精华内容
下载资源
问答
  • 像素的正确解释
    万次阅读
    2019-06-12 11:49:37

    设备像素比(devicePixelRatio,dpr)

    定义

    window.devicePixelRatio是设备物理像素设备独立像素(device-independent pixels,dips)之间的比率。window.devicePixelRatio = 物理像素/ 设备独立像素

    • 设备物理像素:
      是一个物理概念,比如设备的分辨率,Phone 5的分辨率640 x 1136px。
    • 设备独立像素dips :
      是一个抽象像素,用于向CSS中的宽度、高度、媒体查询和meta 的viewport 中的device-width提供信息。通过观察retina和非retina设备之间的区别,可以最好地解释它们。
    • CSS像素:
      是Web编程的概念,指的是CSS中使用的逻辑像素。在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px是一个相对单位,相对的是设备物理像素。
      比如iPhone 5使用的是Retina屏幕,使用2px x 2px的设备物理像素,代表 1px x 1px 的 CSS像素,所以设备物理像素为640 x 1136px,而CSS逻辑像素数为320 x 568px。
    • 每英寸像素(pixel per inch,ppi):
      表示每英寸所拥有的像素(pixel)数目,数值越高,代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素
      以上计算出ppi是为了得到密度分界,获得默认缩放比例,即设备像素比。在这里插入图片描述由上图可知,ppi在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(Apple给了它一个高大上的名字——Retina)。
      获得设备像素比后,便可得知设备物理像素与CSS像素之间的比例。当这个比率为1:1时,使用1个设备物理像素显示1个CSS像素。当这个比率为2:1时,使用4个设备物理像素显示1个CSS像素,当这个比率为3:1时,使用9(3*3)个设备物理像素显示1个CSS像素。
      关于设计师和前端工程师之间如何协同:一般由设计师按照设备像素(device pixel)为单位制作设计稿。前端工程师,参照相关的设备像素比(device pixel ratio),进行换算以及编码。

    所有非retina屏幕的iPhone在纵向模式下有320个物理像素的宽度(320px)。当你使用<meta name="viewport" content="width=device-width">时,它将布局视区的宽度设置为320px,以便页面自然地适应屏幕。

    因此,在非retina屏幕的iPhone上有320个物理像素和320个dips。因此,window.devicePixelRatio等于1。

    retina屏幕的iPhone在纵向模式下有640个物理像素的宽度(640px)。不过,使用meta标签设置viewport的网站不应该变成640px宽,而是保持320px,这是iPhone的最佳阅读尺寸。

    因此,即使物理像素的数量是640,dips的数量仍然是320。window.devicePixelRatio现在等于2。

    浏览器支持

    大多数浏览器都正确实现了window.devicePixelRatio。该属性包含物理像素和dips之间的比率,即使一些值起初看起来很奇怪,但实际上它们是有意义的。

    给一个没有正确实现window.devicePixelRatio的浏览器列表会更有效。他们是:

    • IE和Firefox根本不支持这个属性。我假设下一个版本将实现它。

    • retina设备的Opera桌面浏览器window.devicePixelRatio的值是1,而它应该是2。我想下一个版本会解决这个问题。

    • Opera Mobile 10不支持它,但12正确实现了这个属性。

    • UC总是给出1,但当涉及到viewport属性时,UC非常困惑。

    • Chrome最近才在retina设备上实现了这个属性。Chrome19错误地返回1,Chrome22正确地返回2。

    • MeeGo WebKit (诺基亚N9/N950)做了一些可怕的事情:当应用meta viewport时,它会将值从1更改为1.5。

    这真是坏消息。好消息是,Safari、Android Webkit、Chrome 22+和Android、Opera Mobile、BlackBerry Webkit、QQ、Palm Webkit和Dolfin正确实现了该属性。

    两个注意事项
    MeeGo WebKit在应用meta viewport时更改值的想法是大错特错的。首先,在应用meta viewport时,像素比实际上没有改变:物理像素的数量和dips也没变,因此它们的比例也保持不变。

    其次,有些浏览器习惯于在应用meta viewport时更改所有类型的内容(三星Dolfin是一个臭名昭著的例子),这一点也没有任何意义。应用meta viewport时唯一改变的是布局视区的尺寸。如果一个浏览器改变了其他的东西,那就完全是错误的。

    有关devicePixelRatio的详细信息

    这一节将给出一些例子,并考虑到了screen.width。

    请注意,在大多数台式机和笔记本电脑上,devicePixelRatio仍然是1。Retina 笔记本电脑在Safari和Chrome22上显示2,在Chrome21(?)和Opera显示1,在IE和Firefox中未定义。(顺便说一下,2值并不总是正确的。见下文。)

    iOS

    非Retina 屏幕的iOS设备devicePixelRatio将显示1,而Retina 设备将显示2。这是因为在Retina 设备上物理像素的实际数量增加了一倍,但浏览器却假装没有,以免打乱人们为iPhone精心设计的320px宽的布局。毕竟,具有device-width的meta viewport的站点不应该突然变为640px宽。因此,设备独立像素(dips)宽度保持在320px,640/320=2。

    在iOS上,设备像素比情况相对简单:只有值1和2。在大多数其他平台上,情况也很简单,因为实际物理像素计数等于dips计数,这使得设备像素比为1。

    Android

    主要的难题来自于Android,或者更确切地说,来自于许多具有Retina显示屏的现代设备,这些设备其像素明显多于320px,其中大部分运行的是Android。

    事实上,据作者所知,谷歌的Nexus One是第一款使用dips的设备,甚至在iPhone之前。同时,Galaxy Nexus和Galaxy Note也都有Retina显示屏。仔细观察这三种设备是有指导意义的。

    Nexus One的物理分辨率为480x800,但Android WebKit团队认为,以纵向模式查看的网页的最佳宽度仍然是320px。因此,dips保持320像素宽,设备像素比变成480/320=1.5。

    在同一部手机上,Opera Mobile的dips也是320px宽,设备像素比也是1.5。

    (顺便说一句,带OS7的BlackBerry Torch 9810也有480个物理像素,BlackBerry WebKit团队决定使用设备像素比为1。回想起来,如果他们将设备像素比设置为1.5,可能会更好,480px宽的网站在Torch上显示有点难以阅读。)

    Galaxy Nexus的物理分辨率上升到了720x1200。Android团队也决定将dips抽象层的宽度提高到360像素。这使得设备像素比为720/360=2。Chrome团队、腾讯的QQ浏览器也做出了同样的决定。

    然而,Opera不同意,他们决定坚持使用320px的dips宽度。这就产生了720/320=2.25的设备像素比。

    最后,Galaxy Note的物理分辨率为800x1200。在这里,所有的浏览器都决定与Galaxy Nexus保持相同的比率:对于设备像素比,Android Webkit、Chrome和QQ坚持使用2(这意味着400px的dips宽),而Opera坚持使用2.25,达到略为奇怪的356px的dips宽。

    说到这里,我们发现,各种浏览器基本上都在玩自己的游戏。

    devicePixelRatio与其他属性的关系

    不管怎样。除了一些例外情况,设备像素比在浏览器中工作相当一致(有关例外情况,请参阅之前的报告)。设备像素比、物理像素和dips之间的关系完全是数学关系,知道其中两个,就可以计算第三个。

    但是我们如何找到dips宽度或者物理像素宽度呢?

    找到dips宽度很容易:给你的HTML页面增加一个<meta name=“viewport” content=“width=device width”>,然后读取document.documentElement.clientWidth,大多数浏览器会给你布局视区的宽度,现在等于dips宽度。(这里是必要的兼容性表。)

    但是,如果你不能使用这个计算方法,事情会变得更复杂。我们不得不使用screen.width给出的值。但是这些值意味着什么呢?

    如果你根据浏览器思考他们的意思,恭喜你!你开始理解移动世界了。

    • 在iOS的Retina设备上,screen.width以dips为单位给出宽度。所以无论是Retina还是非Retina屏幕的iPad纵向模式下都会报告768。

    • 在三种Android设备上,分别为480、720和800,screen.width以物理像素表示宽度。设备上的所有浏览器都使用相同的值。(想象一下,如果同一设备上的某些浏览器使用了dips,而其他浏览器使用的是物理像素!)

    Vasilis 有一个很好的理论:苹果增加设备的物理像素是因为它想让显示器更清晰、更平滑,而安卓供应商增加设备的物理像素是为了在屏幕上塞进更多的东西。这是观察这些差异的一种方式:它解释了为什么苹果强调从非Retina到Retina的连续性,而安卓则专注于原始像素计数。

    那么其他OSs上的其他浏览器怎么看呢?在这里,我只能使用那些与物理像素不同的dips的浏览器,而且这些浏览器不多。我可以从诺基亚Lumia Windows手机上的IE9中获得清晰的阅读,它与Android系统一致,并以screen.width给出物理像素值。但是它不支持devicePixelRatio,所以不能完全测试它。

    所以对于移动设备的结论是

    • devicePixelRatio 在大多数浏览器上是最可靠的。

    • 在iOS设备上,将devicePixelRatio 乘以screen.width以获得物理像素值。

    • 在Android和Windows Phone设备上,用screen.width除以devicePixelRatio ,得到dips值。

    参考文章:
    devicePixelRatio
    More about devicePixelRatio
    A tale of two viewports — part two

    更多相关内容
  • ps:这篇文章不是移动端适配入门文章,不对大多数基础概念进行解释,例如像素,viewport,meta标签和主流适配方案等,如果还没了解基础概念,建议读一下相关文章再来看(也可以先阅读我下面列出

    0. 为什么要写这篇文章?

    最近查阅了一些移动端适配的文章和资料,对大多数的概念和论述没发现有疑惑的地方,唯独对设备像素比(device pixel ratio,dpr)有些不解,而设备像素比对理解移动端概念以及适配都起到重要作用,所以做了更多的资料查阅和理解,这期间花了一些时间,也希望有不同意见的同学可以交流一下
    ps:这篇文章不是移动端适配入门文章,不对大多数基础概念进行解释,例如像素,viewport,meta标签和主流适配方案等,如果还没了解基础概念,建议读一下相关文章再来看(也可以先阅读我下面列出的参考文章,自己先理解一下 ^ _ ^)

    1. 设备像素比的问题在哪里?

    1.1. 不同的论述导致不同的理解

    实际上,我在查阅文章的时候,发现不同文章对这个概念的论述存在差异性,而这个差异性容易导致理解的差异,大致可以归类为两种结论:
    结论1:设备像素比 = 设备物理像素/设备独立像素

    参考文章1:关于移动端适配,你必须要知道的
    参考文章2:面试官:你了解过移动端适配吗?
    参考文章3:移动前端开发之viewport的深入理解
    参考文章4:使用Flexible实现手淘H5页面的终端适配
    参考文章5:设备像素比devicePixelRatio简单介绍
    参考文章6:what exactly is device pixel ratio?

    结论2:设备像素比 = 设备物理像素/CSS像素

    参考文章7:2022 年移动端适配方案指南
    参考文章8:作为前端,你应该了解的分辨率/逻辑像素/物理像素/retina屏知识
    参考文章9:完全理解px,dpr,dpi,dip
    参考文章10:前端涉及的各种像素概念以及 viewport 汇总

    设备像素比在浏览器下可以用window.devicePixelRatio接口获取,MDN是这样定义的:Window 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率:一个CSS像素的大小与一个物理像素的大小。 简单来说,它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。

    根据此定义,CSS像素是可变的,设备像素比应该也是可变的,所以结论2比较准确,但是还有一个可能,有没有可能设备独立像素就是相当于CSS像素呢?若是,则结论1也可以成立。下面继续讨论

    1.2. 设备独立像素与CSS像素

    综合分析1.1.节的参考文章,首先明确一个基本没有争议的结论:CSS大小是可变的,跟缩放有关。但关于设备独立像素与CSS像素的关系,有如下两种结论:

    结论3:设备独立像素为固定值,与css像素成缩放比例的关系,见: 参考文章1参考文章4参考文章5参考文章6参考文章7参考文章9

    结论4:设备独立像素就是css像素,见:参考文章3参考文章8参考文章10

    我们回到设备独立像素出现的背景,设备独立像素是随着Retina屏的诞生而出现的,下面是apple开发网站的尺寸标注:
    在这里插入图片描述

    px是设备物理像素,pt是设备独立像素,@x等于 设备物理像素/设备独立像素,在chrome开发工具,adobedpi.lvmydevice.io等网站也可以看到类似的标注
    在这里插入图片描述

    由此可见,设备独立像素是一个与设备物理像素相对应的抽象尺寸标准,应该是不可变的,设备物理像素/设备独立像素的比值衡量的是设备在初始状态下(无缩放,缩放比例100%)用程序绘制一个抽象像素需要使用多少真实的像素,而无缩放的状态下,CSS像素是可以等价于设备独立像素的,在有缩放的状态下,缩放比例就是CSS像素与设备独立像素的比值,所以我们可以得出结论3(设备独立像素为固定值,与css像素成缩放比例的关系)是正确的

    PPK在iPhone 4到来之前写了一篇文章,有一段话是这么描述的:

    When the zooming factor is exactly 100%, one CSS pixel equals one device pixel (though the upcoming intermediate layer will take the place of device pixels here.)
    当缩放因子等于100%的时候,一个CSS像素等于一个设备像素(尽管在即将到来的中间层会取代这里的设备像素

    注意括号里面的话,即将到来的中间层也就是后面出现的设备独立像素的概念,也就是设备独立像素对标的是原来的设备物理像素,例如原来说在300%缩放的情况下1个CSS像素等于3个设备物理像素,以后就要说成1个CSS像素等于3个设备独立像素了,PPK这段话也间接印证了结论3

    1.3. 小结

    我们再回顾一下1.1.和1.2.得出的结论:

    结论1:设备像素比 = 设备物理像素/设备独立像素
    结论2:设备像素比 = 设备物理像素/CSS像素
    结论3:设备独立像素为固定值,与css像素成缩放比例的关系
    结论4:设备独立像素就是css像素

    综合结论2和结论3,可以得出
    结论5:设备像素比 = 设备物理像素/CSS像素;而设备独立像素为固定值,在无缩放的时候与CSS像素等价

    而且你会发现,结论1和结论4只是结论5的在无缩放条件下的特例

    另外,设备物理像素/设备独立像素,如果非要用一个词来指代,我觉得使用apple官网的scale factor(缩放因子)来描述挺合适的,即 scale factor=设备物理像素/设备独立像素,该值不可变

    High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x).

    2. 设备像素比 = 设备物理像素/CSS像素,真的正确吗?

    好了,有了1.3.小结的结论,我们满怀欣喜地带着这个结论继续往前走

    2.1. PC端验证

    无缩放状态下:
    设备像素比2,然后是各个宽度:设备独立像素1500,布局视口1500,测试元素宽度200,可反推出设备物理像素3000
    基于无缩放状态下的数值,测试200%和50%缩放的数值,以下是我们的预期数值

    缩放设备像素比设备独立像素布局视口测试元素
    100%215001500200
    200%(期望值)41500750200
    50% (期望值)115003000200

    实际数据,见下图
    在这里插入图片描述
    数值符合预期,设备像素比 = 设备物理像素/CSS像素 通过验证

    2.2. 手机端验证

    使用iPhone6作为测试机型,iPhone6的设备独立像素为375 x 667,设备物理像素为750 x 1334,缩放因子为2

    无缩放状态下:
    设备像素比2,然后是各个宽度:设备独立像素375,布局视口375,测试元素宽度200,可反推出设备物理像素750
    基于无缩放状态下的数值,测试200%和50%缩放的数值,缩放数值通过<meta name="viewport" content="width=device-width, initial-scale=1">标签的 initial-scale属性设置,以下是我们的预期数值

    缩放设备像素比设备独立像素布局视口测试元素
    100%2375375200
    200%(期望值)4375375200
    50% (期望值)1375750200

    实际数据,见下图
    在这里插入图片描述
    真机效果
    在这里插入图片描述

    数值符合…等等,数据好像不符合预期?!

    缩放设备像素比设备独立像素布局视口测试元素
    100%2375375200
    200%(期望值)4 2375375200
    50% (期望值)1 2375750200

    在手机端,设备像素比没有随着缩放比而变化?

    2.3. 出了什么问题?

    我们来看看出了什么问题,根据公式设备像素比 = 设备物理像素/CSS像素 ,设备物理像素不变,在3种缩放比例下,我们可以看到测试像素的CSS宽度均为200不变,而测试像素实际大小已发生了变化,说明CSS像素随着缩放覆盖了更多/更少的设备独立像素/设备物理像素,根据上面的公式,设备像素比是应该按预期发生变化的,然鹅,现在我们只在PC端看到了我们预期,在移动端设备像素比似乎不随缩放发生变化

    再回过头来看看1.1.节关于MDN对设备像素比的定义:Window 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率:一个CSS像素的大小与一个物理像素的大小。 简单来说,它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。

    以上定义跟我们目前的认知一致,仍然没办法解释为什么移动端设备像素比不随缩放发生变化

    2.4. 重新认识设备像素比

    对于2.3.节出现的问题,困扰了我一段时间,直到我找到了一份window.devicePixelRatio的规范,如下:

    The devicePixelRatio attribute must return the result of the following determine the device pixel ratio algorithm:

    1. If there is no output device, return 1 and abort these steps.
    2. Let CSS pixel size be the size of a CSS pixel at the current page zoom scale factor and at a pinch zoom scale factor of 1.0.
    3. Let device pixel size be the vertical size of a device pixel of the output device.
    4. Return the result of dividing CSS pixel size by device pixel size.

    从第4点来看,window.devicePixelRatio返回的结果是CSS像素大小与设备物理像素大小之比,这和我们的公式设备像素比 = 设备物理像素/CSS像素 是一致的(注意,我们公式的像素单位是个数,规范第4点的单位是大小,所以除数和被除数会相反,但表达的意思是一致的)

    既然结论没有问题,那是不是可能我们忽略了结论成立的某些前提条件,我们留意到规范第2点:

    1. Let CSS pixel size be the size of a CSS pixel at the current page zoom scale factor and at a pinch zoom scale factor of 1.0.
      使CSS像素大小为当前page zoom的缩放比例且pinch zoom缩放比例等于1之下的CSS像素大小

    在这里,我们获悉了之前对设备像素比的定义中都没有提到的前提条件:
    条件1:计算当前page zoom的缩放比例
    条件2:使pinch zoom缩放比例等于1,换句话说,就是不计算page zoom的缩放比例

    这两个条件其实给我们澄清了两种缩放:page zoom也就是页面缩放(例如在PC端使用Ctrl+鼠标滚轮/+/-),pinch zoom是手势缩放或者双指缩放。为什么计算设备像素比的时候要计算page zoom而不计算pinch zoom呢?有何区别呢?zoom的规范是这么说的

    There are two kinds of zoom, page zoom which affects the size of the initial viewport, and pinch zoom which acts like a magnifying glass and does not affect the initial viewport or actual viewport.
    存在两种缩放:会影响初始视口的页面缩放,和类似放大镜一样不会影响初始或实际视口的手势缩放

    可对页面缩放和手势缩放可以得出如下结论:
    结论6: 页面缩放会影响页面的布局视口,会引起页面的重新布局,所以设备像素比需计算页面缩放的比例
    结论7: 手势缩放不会影响布局视口,不会引起页面重新布局,只会影响视觉视口,类似放大镜的功能,所以设备像素比不需计算手势缩放的比例,在计算设备像素比的时候CSS像素大小按照手势缩放比为1的大小计算

    结论6已经在2.1.节验证了,为了验证结论7,我们利用笔记本的触摸板,来模拟实际设备的手势缩放(pinch zoom)功能(带触摸屏功能的电脑也可以直接在屏幕上操作)

    PC端
    在这里插入图片描述
    移动端
    在这里插入图片描述
    可以看到,无论在PC端还是手机端,手势缩放不会影响布局视口,只会影响视觉视口,在只改变手势缩放的条件下,设备像素比保持不变,结论6验证通过

    至此,对于2.2.和2.3.出现的问题:在移动端设备像素比不随缩放发生变化,也随着结论5和结论6的确定而解决了,因为移动端进行的是手势缩放(pinch zoom)而非页面缩放(page zoom),故设备像素比保持不变

    ps:有意思的是,现在移动端浏览器似乎没有给我们提供类似PC端页面缩放的功能而只有手势缩放功能,也就意味着移动端的设备像素比在目前是可以“保持不变的”,也就意味着移动端在某种程度上,结论1(设备像素比 = 设备物理像素/设备独立像素)和结论4(设备独立像素就是css像素)确实是可以成立的,但如果没弄清楚为什么,就很容易造成概念和结论的混淆。而且谁也说不定哪一天移动端会不会有类似页面缩放(page zoom)的功能,万一呢?^ _ ^

    3. 总结

    根据结论5,6,7,有:
    结论5:设备像素比 = 设备物理像素/CSS像素,而设备独立像素为固定值,在无缩放的时候与CSS像素等价
    结论6: 页面缩放会影响页面的布局视口,会引起页面的重新布局,所以设备像素比需计算页面缩放的比例
    结论7: 手势缩放不会影响布局视口,不会引起页面重新布局,只会影响视觉视口,类似放大镜的功能,所以设备像素比不需计算手势缩放的比例,在计算设备像素比的时候CSS像素大小按照手势缩放比为1的大小计算

    把上面的3个结论总结到一起,可以得出对设备像素比的最终结论

    设备像素比 = 设备物理像素/CSS像素,CSS像素的实际大小只受页面缩放(page zoom)的影响而不受手势缩放(pinch zoom)的影响;设备独立像素为固定值,在无缩放的时候与CSS像素等价

    以上就是我查阅相关资料并逐步理清疑惑的过程,欢迎多多交流

    展开全文
  • 我被告知,这就解释了为什么电子彩色显示器(如电视机或计算机显示屏)的每个像素都是由红、绿、蓝三色构成的。  而如今,我发现实际情况要复杂得多。虽然我们大多数人的确有3个色彩受体——一个对蓝紫色(blue-...
  • iOS: 如何正确的绘制1像素的线

    千次阅读 2015-06-29 10:30:00
    看了上述一通解释,我们了解了1像素宽的线条失真的原因,及解决办法。 至此问题貌似都解决了?再想想为什么在非Retina和Retina屏幕上调整位置时值不一样,前者为0.5Point,后者为0.25Point,那么scale为3的6 Plus...

    一、Point Vs Pixel

        iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量。系统在实际渲染到设置时会帮助我们处理Point到Pixel的转换。
        这样做的好处隔离变化,即我们在布局的事后不需要关注当前设备是否为Retina,直接按照一套坐标系统来布局即可。实际使用中我们需要牢记下面这一点:

    One point does not necessarily correspond to one physical pixel.

    1 Point的线在非Retina屏幕则是一个像素,在Retina屏幕上则可能是2个或者3个,取决于系统设备的DPI。
    iOS系统中,UIScreen,UIView,UIImage,CALayer类都提供相关属性来获取scale factor。原生的绘制技术天然的帮我们处理了scale factor,例如在drawRect:方法中,UIKit自动的根据当前运行的设备设置了正切的scale factor。所以我们在drawRect: 方法中绘制的任何内容都会被自动缩放到设备的物理屏幕上。
    基于以上信息可以看出,我们大部分情况下都不需要去关注pixel,然而存在部分情况需要考虑像素的转化。
    例如画1个像素的分割线
    看到这个问题你的第一想法可能是,直接根据当前屏幕的缩放因子计算出1 像素线对应的Point,然后设置线宽即可。
    代码如下:
    1.0f / [UIScreen mainScreen].scale
    表面上看着一切正常了,但是通过实际的设备测试你会发现渲染出来的线宽并不是1个像素。

    Why?

    为了获得良好的视觉效果,绘图系统通常都会采用一个叫“antialiasing(反锯齿)”的技术,iOS也不例外。
    显示屏幕有很多小的显示单元组成,可以接单的理解为一个单元就代表一个像素。如果要画一条黑线,条线刚好落在了一列或者一行显示显示单元之内,将会渲染出标准的一个像素的黑线。
    但如果线落在了两个行或列的中间时,那么会得到一条“失真”的线,其实是两个像素宽的灰线。如下图所示:



        Positions defined by whole-numbered points fall at the midpoint between pixels. For example, if you draw a one-pixel-wide vertical line from (1.0, 1.0) to (1.0, 10.0), you get a fuzzy grey line. If you draw a two-pixel-wide line, you get a solid black line because it fully covers two pixels (one on either side of the specified point). As a rule, lines that are an odd number of physical pixels wide appear softer than lines with widths measured in even numbers of physical pixels unless you adjust their position to make them cover pixels fully.
    官方解释如上,简单翻译一下:
    规定:奇数像素宽度的线在渲染的时候将会表现为柔和的宽度扩展到向上的整数宽度的线,除非你手动的调整线的位置,使线刚好落在一行或列的显示单元内。如何对齐呢?
        On a low-resolution display (with a scale factor of 1.0), a one-point-wide line is one pixel wide. To avoid antialiasing when you draw a one-point-wide horizontal or vertical line, if the line is an odd number of pixels in width, you must offset the position by 0.5 points to either side of a whole-numbered position. If the line is an even number of points in width, to avoid a fuzzy line, you must not do so.
    On a high-resolution display (with a scale factor of 2.0), a line that is one point wide is not antialiased at all because it occupies two full pixels (from -0.5 to +0.5). To draw a line that covers only a single physical pixel, you would need to make it 0.5 points in thickness and offset its position by 0.25 points. A comparison between the two types of screens is shown in Figure 1-4.
    翻译一下
    在非高清屏上,一个Point对应一个像素。为了防止“antialiasing”导致的奇数像素的线渲染时出现失真,你需要设置偏移0.5 Point。
    在高清屏幕上,要绘制一个像素的线,
    需要设置线宽为0.5个Point,同时设置偏移为0.25 Point。
    如果线宽为偶数Point的话,则不要去设置偏移,否则线条也会失真。
    如下图所示:


    看了上述一通解释,我们了解了1像素宽的线条失真的原因,及解决办法。
    至此问题貌似都解决了?再想想为什么在非Retina和Retina屏幕上调整位置时值不一样,前者为0.5Point,后者为0.25Point,那么scale为3的6 Plus设备又该调整多少呢?
    要回答这个问题,我们需要理解调整多少依旧什么原则。


    再回过头来看看这上面的图片,图片中每一格子代表一个像素,而顶部标记的则代码我们布局时的坐标。

    可以看到左边的非Retina屏幕,我们要在(3,0)这个位置画一条一个像素宽的竖线时,由于渲染的最小单位是像素,而(3,0)这个坐标恰好位于两个像素中间,此时系统会对坐标3左右两列的像素对填充,为了不至于线显得太宽,为对线的颜色淡化。那么根据上述信息我们可以得出,如果要画出一个像素宽的线,就得把绘制的坐标移动到(2.5, 0)或者(3.5,0)这个位置,这样系统渲染的时候刚好可以填充一列像素,也就是标准的一个像素的线。

    基于上面的分析,我们可以得出“Scale为3的6 Plus”设备如果要绘制1个像素宽的线条时,位置调整也应该是0.5像素,对应该的Point计算如下:

    (1.0f / [UIScreen mainScreen].scale) / 2;
    奉上一个画一像素线的一个宏:
    #define SINGLE_LINE_WIDTH           (1 / [UIScreen mainScreen].scale)
    #define SINGLE_LINE_ADJUST_OFFSET   ((1 / [UIScreen mainScreen].scale) / 2)
    使用代码如下:
    CGFloat xPos = 5;
    UIView *view = [[UIView alloc] initWithFrame:CGrect(x - SINGLE_LINE_ADJUST_OFFSET, 0, SINGLE_LINE_WIDTH, 100)];

    二、正确的绘制Grid线条

    贴上一个写的GridView的代码,代码中对Grid线条的奇数像素做了偏移,防止出现线条模糊的情况。
    SvGridView.h

    //
    //  SvGridView.h
    //  SvSinglePixel
    //
    //  Created by xiaoyong.cxy on 6/23/15.
    //  Copyright (c) 2015 smileEvday. All rights reserved.
    //
    #import @interface SvGridView : UIView
    /**
     * @brief 网格间距,默认30
     */
    @property (nonatomic, assign) CGFloat   gridSpacing;
    /**
     * @brief 网格线宽度,默认为1 pixel (1.0f / [UIScreen mainScreen].scale)
     */
    @property (nonatomic, assign) CGFloat   gridLineWidth;
    /**
     * @brief 网格颜色,默认蓝色
     */
    @property (nonatomic, strong) UIColor   *gridColor;
    @end

    SvGridView.m

    //
    //  SvGridView.m
    //  SvSinglePixel
    //
    //  Created by xiaoyong.cxy on 6/23/15.
    //  Copyright (c) 2015 smileEvday. All rights reserved.
    //
    #import "SvGridView.h"
    #define SINGLE_LINE_WIDTH           (1 / [UIScreen mainScreen].scale)
    #define SINGLE_LINE_ADJUST_OFFSET   ((1 / [UIScreen mainScreen].scale) / 2)
    @implementation SvGridView
    @synthesize gridColor = _gridColor;
    @synthesize gridSpacing = _gridSpacing;
    - (instancetype)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) {
            self.backgroundColor = [UIColor clearColor];
             
            _gridColor = [UIColor blueColor];
            _gridLineWidth = SINGLE_LINE_WIDTH;
            _gridSpacing = 30;
        }
         
        return self;
    }
    - (void)setGridColor:(UIColor *)gridColor
    {
        _gridColor = gridColor;
         
        [self setNeedsDisplay];
    }
    - (void)setGridSpacing:(CGFloat)gridSpacing
    {
        _gridSpacing = gridSpacing;
         
        [self setNeedsDisplay];
    }
    - (void)setGridLineWidth:(CGFloat)gridLineWidth
    {
        _gridLineWidth = gridLineWidth;
         
        [self setNeedsDisplay];
    }
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect
    {
        CGContextRef context = UIGraphicsGetCurrentContext();
         
        CGContextBeginPath(context);
        CGFloat lineMargin = self.gridSpacing;
         
        /**
         *  https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html
         * 仅当要绘制的线宽为奇数像素时,绘制位置需要调整
         */
        CGFloat pixelAdjustOffset = 0;
        if (((int)(self.gridLineWidth * [UIScreen mainScreen].scale) + 1) % 2 == 0) {
            pixelAdjustOffset = SINGLE_LINE_ADJUST_OFFSET;
        }
         
        CGFloat xPos = lineMargin - pixelAdjustOffset;
        CGFloat yPos = lineMargin - pixelAdjustOffset;
        while (xPos < self.bounds.size.width) {
            CGContextMoveToPoint(context, xPos, 0);
            CGContextAddLineToPoint(context, xPos, self.bounds.size.height);
            xPos += lineMargin;
        }
         
        while (yPos < self.bounds.size.height) {
            CGContextMoveToPoint(context, 0, yPos);
            CGContextAddLineToPoint(context, self.bounds.size.width, yPos);
            yPos += lineMargin;
        }
         
        CGContextSetLineWidth(context, self.gridLineWidth);
        CGContextSetStrokeColorWithColor(context, self.gridColor.CGColor);
        CGContextStrokePath(context);
    }
    @end

    使用方法如下:

    SvGridView *gridView = [[SvGridView alloc] initWithFrame:self.view.bounds];
    gridView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    gridView.alpha = 0.6;
    gridView.gridColor = [UIColor greenColor];
    [self.view addSubview:gridView];

    三、一个问题

    这里我使用相同的比例缩放,对比一下。使用偏移量和不实用偏移量的差别:


    (上图没有使用偏移量)


    (上图使用了偏移量)

    差别还是很明显的


    三、一个问题

    好了,到这儿本文的全部知识就结束了,最后我还有一个问题。


    设计师为什么一定要一个像素的线?
    一个像素的线可能在非Retina设备上显示宽度看着合适,在Retina屏幕上显示可能会比较细。是不是一定需要一个像素的线,需要根据情况来处理。

    参考文档:
    https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html
    注:smileEvday保留本文的一切权利

    展开全文
  • 本文介绍了图像中像素的邻域关系,通过邻域关系中基于限定灰度值的集合定义了邻接关系,通过邻接可以构建像素间的通路,基于通路构建了像素间的连通关系和连通集,并进一步定义了图像的区域和边界。 如果一个函数...

    在这里插入图片描述

    ☞ ░ 前往老猿Python博文目录 https://blog.csdn.net/LaoYuanPython

    一、引言

    本系列文章记录老猿自学冈萨雷斯《数字图像处理》的感悟和总结,不过估计更新会比较慢,白天要工作,都是晚上抽空学习,学习完一章再回头总结,想学的朋友可以自己下载英文原版(目前到第四版)和中文译本(目前应该到第三版)的电子版观看,如果想对照观看建议英文原版也找第三版。

    这本《数字图像处理》不愧为数字图像处理的经典教程,知识范围广、内容详尽、案例贴近实践,至少很合老猿的口味。但中译本存在两个问题:

    1. 有些翻译得不够精准或流利,对于这样的内容如果在老猿总结知识中出现,会以斜体字标记,有些关键术语老猿会附上英文原词;
    2. 中译本的图像案例很多都比原版差很多,甚至差到影响对讲述内容的理解,因此就算不看原版文字,图像案例最好还是对照原版的。

    二、知识概要:像素间的关系(Some Basic Relationships between Pixels)

    2.1、邻域(neighbors)

    图像中的像素p与其周边像素的关系常用的有如下几种:

    • 4邻域(4-neighbors):对于图像中的每个像素p,其垂直方向和水平方向与其相邻的4个像素称为p的4邻域,记为N4(p)。
    • 4对角邻域(four diagonal neighbors):像素p的4个对角相邻的像素称为4对角邻域,记为ND (p)
    • 8邻域(8-neighbors):像素p的4邻域像素和4对角邻域像素合在一起称为p的8邻域像素,记为记为N8(p)。

    对于图像边缘的像素,存在其邻域像素不在图像内的情况。

    2.2、 邻接性(Adjacency)

    假设V是定义邻接性的某些灰度值的集合(这个定义有些拗口,老猿这么理解:如果某个像素的灰度值在这个集合中,就表示该像素可以和周边像素具备邻接的基本条件,不是这个集合的灰度值的像素肯定不会和其他像素有邻接关系):

    • 4邻接和8邻接:两个像素p和q,如果q出现在p的4邻域或8邻域,且p和q的灰度值都在集合V中,则p和q是邻接的,根据是4邻域或8邻域称p和q为4邻接(4-adjacency)或8邻接(8-adjacency)
    • m-邻接(mixed adjacency,混合邻接):p和q的灰度值都在集合V中,q与p为4邻接或q在p的4对角邻域中且N4(p)∩N4(q)的集合中没有像素值在V中,则称p和q为m邻接。

    m邻接是对8邻接的改进,是为了消除8邻接的二义性。令V={1},如下图:
    在这里插入图片描述
    可能年纪大了反应不过来,这个图乍一看很容易理解,但仔细一想又存在疑问,老猿是思考了一阵子才明白。根据自己的理解解释如下:
    分别用a12、a13、a22、a33表示上面4个为1的元素,在8邻接情况下,a13同时是a12和a22的8邻接,但在混合邻接情况下,a13是a12的混合邻接,但不是a22的混合连接,因为a13和a22各自的4邻接存在交集元素a12,不满足混合邻接定义。

    2.3、通路(Path)

    从像素p(坐标为(x,y))到像素q(坐标为(s,t))的通路(digital path)(或曲线(curve))是除p和q可能重复外不存在其他重复的像素组成的序列(distinct pixels,中文版翻译为“特定的像素序列”,英文版没有除起点和终点外的说明,这是老猿琢磨半天的翻译,不知是否正确),其坐标序列为:

    (x0, y0), (x1, y1), … , (xn, yn)

    满足:

    1. (x0, y0)对应p的坐标, (xn, yn)对应q的坐标
    2. 序列中的任意两个相邻像素(xi,yi)和(xi+1,yi+1)是邻接的。

    以上关于通路的定义的通路长度为n,如果p和q重合即对应同一个像素,则称该通路为闭合通路(closed path)。

    上面定义中两个像素的邻接可以是4邻接、8邻接和混合邻接,则对应的通路分别称为4通路、8通路、m通路(4-, 8-, or m-paths)。

    上面邻接定义时说明二义性的图中,其左图连接的虚线是右上角到右下角的8通路,可见图中8通路有2条,而右图是m通路,只有一条。

    2.4、连通性( Connectivity)

    假设s是某图像的一个像素子集:

    • 如果s中的两个像素p和q之间存在一条由s的全部像素组成的一条通路(path),则可以说s中的两个像素p和q是连通(connected)的
    • 根据使用的邻接的类型,连通可以分为4-连通(4-connectivity)、8连通和m连通
    • 对于s中的任意像素p,s中连通到p的所有像素构成的集合称为s的连通分量(connected component)
    • 如果s中只有一个连通分量,则集合s称为连通集(connected set)

    2.5、区域( Regions )

    假设R是某图像的一个像素子集, 如果R是连通集,则称R为图像的一个区域(region)。需要注意,区域的概念是与邻接类型相关的,可能某个区域是8邻接的区域,但不是4邻接的区域。区域定义中的邻接只基于4邻接或8邻接,不能考虑m邻接,老猿认为是在图像中,一个m邻接的连通集如果不同时是8邻接的连通集,则在图像中的区域可能会给人的感觉有断点,因为m邻接可以是两个对角的像素邻接。

    对于两个区域Ri和Rj,他们联合形成一个连通集,则称两个区域邻接(adjacent)。不邻接(not adjacent)的区域称为不连通(disjoint)区域。

    2.6、边界( Boundaries)

    假设一幅图像中含有k个不邻接的区域R1,R2,…,RK(为了不考虑边界的特殊处理假设这K个区域都不接触图像的边界),令RU为这K个区域的并集,令RUc为RU的补集(complement,即为图像中不在RU中的像素集合),则称RU中所有的点为图像的前景(foreground),RUc中的所有点图像的背景(background)。

    区域R的边界(boundary,也称为边缘(border)或轮廓(contour))是这样一些点的集合,这些点与R的补集中的某些点邻近(adjacent),即区域的边界是该区域中至少有一个背景点邻近的像素集合(这里的邻近老猿理解为是整个图像的灰度值作为集合的8-邻接)。该边界称为区域的内边界(inner border),与此对应有外边界(outer border),区域的外边界也即区域补集(背景)的内边界。外边界形成了一个绕该区域的闭合通路(closed path)。

    如果区域R就是图像本身,则定义这种情况下的边界为图像的第一行、第一列以及最后一行和最后一列的像素集合。

    三、知识概要:距离度量(Distance Measures)

    3.1、定义

    对于像素p (x, y)、q (s, t)、z(v, w)和函数D,如果满足:

    1. D(p,q)≥0【D(p,q)=0当且仅当p=q】
    2. D(p,q)=D(q,p)
    3. D(p,z)≤D(p,q)+D(q,z)

    则成函数D为距离函数或距离度量(distance function or metric)。

    3.2、欧几里德距离

    欧几里德距离是一种距离度量,p (x, y)、q (s, t)之间的欧几里德距离(Euclidean distance,简称欧氏距离)定义为:
    在这里插入图片描述
    该式完全满足距离度量的定义。

    对于欧式距离来说,距离点(x,y)的距离小于等于r的像素是以(x,y)为圆心r为半径的圆平面。

    3.3、D4距离

    p (x, y)、q (s, t)之间的D4距离(D4 distance,又称为城市街区距离,city-block distance)定义如下:
    D4(p,q) = |x-s|+|y-t|

    该式完全满足距离度量的定义,因此也是一种距离度量。

    距离点(x,y)D4距离小于等于r的像素形成一个中心在点(x,y)的菱形。如D4距离等于1的像素构成中心点的4邻域,D4距离小于等于2的像素组成类似如下轮廓:

           2
      	2  1  2
     2  1  0  1  2
      	2  1  2
      	   2  	
    

    3.4、D8距离

    p (x, y)、q (s, t)之间的D8距离(D8 distance,又称为棋盘距离,chessboard distance)定义如下:
    D8(p,q) = max(|x-s|,|y-t|)

    该式同样完全满足距离度量的定义,因此也是一种距离度量。

    距离点(x,y)D8距离小于等于r的像素形成一个中心在点(x,y)边长为2r+1的正方形。点(x,y)的D8距离为1的像素是点点(x,y)的8邻域。

    四、小结和感悟

    本文介绍了图像中像素的邻域关系,通过邻域关系中基于限定灰度值的集合定义了邻接关系,通过邻接可以构建像素间的通路,基于通路构建了像素间的连通关系和连通集,并进一步定义了图像的区域和边界。

    如果一个函数满足图像像素间距离度量的定义,则该函数就是一个距离函数或距离度量,常见的距离有欧式距离、D4距离、D8距离。

    通过这些内容的介绍,可以使得大家了解像素间的邻域、邻接、连通关系以及区域和边界的定义,明白像素间不同距离度量的距离计算方法。

    本文介绍的内容是像素间的关系,通过这些定义了解邻域、邻接、连通以及区域和边界的概念,没有学习之前,老猿对这些知识可能有些模糊的感受,但真正的定义一点也不知道,对于理解图像处理来说,这些概念很重要。

    另外《数字图像处理》中文版的翻译有些地方还是做得不好,这么多的内容,如果不熟悉图像处理并字斟句酌的审阅,这些情况很难发现,可以理解。相关翻译的问题在正文中已经用斜体字标注,有些地方已经单独进行了说明,希望对大家有所帮助。

    更多图像处理请参考专栏OpenCV-Python图形图像处理》及《图像处理基础知识》的介绍。

    对于缺乏Python基础的同仁,可以通过老猿的免费专栏《 专栏:Python基础教程目录》从零开始学习Python。

    写博不易,敬请支持:

    如果阅读本文于您有所获,敬请点赞、评论、收藏,谢谢大家的支持!

    关于老猿的付费专栏

    1. 付费专栏《https://blog.csdn.net/laoyuanpython/category_9607725.html 使用PyQt开发图形界面Python应用》专门介绍基于Python的PyQt图形界面开发基础教程,对应文章目录为《 https://blog.csdn.net/LaoYuanPython/article/details/107580932 使用PyQt开发图形界面Python应用专栏目录》;
    2. 付费专栏《https://blog.csdn.net/laoyuanpython/category_10232926.html moviepy音视频开发专栏 )详细介绍moviepy音视频剪辑合成处理的类相关方法及使用相关方法进行相关剪辑合成场景的处理,对应文章目录为《https://blog.csdn.net/LaoYuanPython/article/details/107574583 moviepy音视频开发专栏文章目录》;
    3. 付费专栏《https://blog.csdn.net/laoyuanpython/category_10581071.html OpenCV-Python初学者疑难问题集》为《https://blog.csdn.net/laoyuanpython/category_9979286.html OpenCV-Python图形图像处理 》的伴生专栏,是笔者对OpenCV-Python图形图像处理学习中遇到的一些问题个人感悟的整合,相关资料基本上都是老猿反复研究的成果,有助于OpenCV-Python初学者比较深入地理解OpenCV,对应文章目录为《https://blog.csdn.net/LaoYuanPython/article/details/109713407 OpenCV-Python初学者疑难问题集专栏目录
    4. 付费专栏《https://blog.csdn.net/laoyuanpython/category_10762553.html Python爬虫入门 》站在一个互联网前端开发小白的角度介绍爬虫开发应知应会内容,包括爬虫入门的基础知识,以及爬取CSDN文章信息、博主信息、给文章点赞、评论等实战内容。

    前两个专栏都适合有一定Python基础但无相关知识的小白读者学习,第三个专栏请大家结合《https://blog.csdn.net/laoyuanpython/category_9979286.html OpenCV-Python图形图像处理 》的学习使用。

    对于缺乏Python基础的同仁,可以通过老猿的免费专栏《https://blog.csdn.net/laoyuanpython/category_9831699.html 专栏:Python基础教程目录)从零开始学习Python。

    如果有兴趣也愿意支持老猿的读者,欢迎购买付费专栏。

    如对文章内容存在疑问,可在博客评论区留言,或关注:老猿Python 微信公号发消息咨询。

    老猿Python,跟老猿学Python!

    ☞ ░ 前往老猿Python博文目录 https://blog.csdn.net/LaoYuanPython

    展开全文
  • Android进程保活 Android进程 首先你要知道Android中的进程以及它的优先级,下面来说明它进程 前台进程 (Foreground process) 可见进程 (Visible process) ...下面进行解释: 前台进程(Foregr...
  • 语义分割是像素级别的分类,其常用评价指标: 像素准确率(Pixel Accuracy,PA)、 类别像素准确率(Class Pixel Accuray,CPA)、 类别平均像素准确率(Mean Pixel Accuracy,MPA)、 交并比(Intersection over ...
  • 像素显示详解

    千次阅读 2018-11-22 20:52:00
    以三倍像素方式显示(上图)的五个像素宽的”m”的腿告诉我们,当在正常分辨率下显示的时候,TrueType轮廓平滑引擎会将这些腿显示为一又三分之二个正常像素(也就是5个亚像素),但是TrueType又必须将其转换为两个...
  • 最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉...虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px。 1.2 注意 在CSS规范中
  • 机器学习模型可解释性的详尽介绍

    千次阅读 多人点赞 2019-11-26 12:22:00
    机器之心平台来源:腾讯技术工程模型可解释性方面的研究,在近两年的科研会议上成为关注热点,因为大家不仅仅满足于模型的效果,更对模型效果的原因产生更多的思考,这样的思考有助于模型和特征的优化,更能够帮助更...
  • 2020年3月11日,我在看学生提交的中期报告时,再次遇到“字号,行距,磅,像素……”之类概念,然后搜了很多资料,看我的脑壳痛,眼冒金星。之前,在2017年7月16日,我在B站上传了《排版的艺术》,当时主要关注的是...
  • AWTRIX2.0像素时钟制作

    千次阅读 热门讨论 2020-07-18 23:47:06
    像素钟 文章目录项目官方网站材料准备ESP8266固件烧写准备工作安装python3环境安装git环境安装pyserial下载esptool安装platformIO IDE安装vscode安装platformIO插件方法一:官方推荐方法下载固件擦除ESP8266Flash...
  • 机器学习可解释

    千次阅读 2022-01-30 17:41:16
    什么是可解释性 理想情况下,严谨的数学符号-逻辑规则是最好的解释。 但是实际上人们往往不强求“完整的解释”,只需要关键信息和一些先验知识。 不同领域的模型解释需要建立在不同的领域术语之上,不可能或者目前...
  • 设备像素比devicePixelRatio简单介绍

    千次阅读 2017-08-17 14:19:09
    今天分享设备像素比devicePixelRatio简单介绍,我个人觉得这个很重要有必要去进行了解,今天我分享给大家。 本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着...
  • 解释了为什么苹果强调非视网膜视网膜的连续性,而Android集中在原始像素数。 Nokia Lumia Windows Phone上的IE9  screen.width 的值与Android设备一样,返回的是物理像素。而且其不支持 devicePixelRatio . ...
  • dpr(设备像素比)与 移动端适配

    千次阅读 2019-09-29 11:32:35
    在上一篇文章中(使用 rem 实现移动端的自适应布局),我们讲到 iphone6s 的屏幕宽度为 375px,我们拿到的视觉稿也是基于iphone6s 设计的,但是设计稿的...一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在...
  • 但是目前大部分可解释性算法往往侧重于工程性的功能实现,侧重于迎合人类对被解释事物的主观认知,而缺少基于统一的理论基础的科学理论体系,影响了可解释性算法的严谨性,阻碍了可解释性研究的进一步发展。...
  • 图像像素字节数

    千次阅读 2015-09-30 09:21:09
    计算图像像素字节数的纠结 Code: int imgBuffSize = (m_imgWidth*m_nBitCount/8+3)/4*4*m_imgHeight;  就是后面的+3让我纠结了一阵子。原来是图像的像素占的字节数为4的整数倍。 从网上找了一下得到...
  • 掩膜(mask)

    千次阅读 2021-01-17 08:18:52
    col++) { //current[col-offsetx]是当前的像素点的左边那个像素点的位置,因为一个像素点有三个通道 //current[col+offsetx]是当前的像素点的右边那个像素点的位置,因为一个像素点有三个通道 //previous[col]表示...
  • 像素显示

    千次阅读 2013-06-19 00:08:30
    来源:... 2009年1月20日 发表评论 阅读评论 ...被拆分的像素:当像素不是一个像素的时候 LCD显示器上最小的图像单元(一个”像素”)实际上是由三个”亚像素(sub-pixel)”组成的:一个红色、一
  • GitHub标星7000+,快速恢复像素化图像,效果惊人

    万次阅读 多人点赞 2020-12-09 19:06:12
    整理 |高卫华出品 | AI科技大本营像素化(类似于马赛克)被许多领域用来加密图像中的重要信息, 例如很多公司会将内部文档中的密码像素化以加密数据,但之后并没有工具来恢复被像素化的图像...
  • 深入浅出人脸识别技术

    千次阅读 2021-01-30 16:45:06
    这里简单解释下上面的几个名词:误识别率就是照片其实是A的却识别为B的比率;通过率就是照片确实是A的,但可能每5张A的照片才能识别出4张是A其通过率就为80%;相似度阈值是因为对特征值进行分类是概率行为,除非输入...
  • 在做移动端网页开发时,首先要搞清楚三种viewport和三种像素,只有明白了这些概念,才能更好地开发出适配不同分辨率设备的网页。 但参阅的博客越多,对这些概念越是混乱,同样的一个概念,在一篇博客中是这种说法,...
  • 论文题目:迈向基于概念的自动解释(2019.8) 作者:Amirata Ghorbani∗James Zou-》斯坦福大学,James WexlerBeen Kim-》谷歌 原文链接:https://arxiv.org/pdf/1902.03129.pdf 摘要: 随着越来越多的机器...
  • Camera开发常见专业术语名词解释

    千次阅读 2017-03-15 14:44:35
    相机常见专业术语名词解释 1、 、 ISO: 感光度 就是CMOS(或胶卷)对光线的敏感程度,如果 用ISO100的感光片,相机2秒可以正确曝光的话, 同样光线条件下 用ISO200的只需要1秒即可,用ISO400则只要0.5秒 通常表示...
  • 基于Spine动画的AVATAR换装系统优化

    千次阅读 2021-12-15 21:07:49
    虽然Spine官方已经宣称实现了这个功能,不过知其然,也应知其所以然,我按照自已的方案实现了这一步,下面我来解释一下其中奥妙,为此我特意开发了一个工具软件并以目前所用的一套基础女的Spine动画文件为例来辅助...
  • 解释性(一)之CAM和Grad_CAM

    千次阅读 2022-01-06 14:55:38
    最近在学习可解释性方面的内容,主要是用cam做可解释性,因此想要系统地学习一下。 参考: keras CAM和Grad-cam原理简介与实现 GAP CAM Grad-CAM Grad-CAM++的解释 pytorch实现所有cam衍生 ECG-Grad-CAM CAM 将原...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,729
精华内容 15,891
热门标签
关键字:

像素的正确解释