文档章节

iOS中理解坐标系

Megan_zhou
 Megan_zhou
发布于 2014/04/30 14:25
字数 1038
阅读 2.9K
收藏 1

阿里云携手百名商业领袖、技术大咖,带您一探行进中的数字新基建!>>>

坐标、点和像素之间的微妙转换也可能降低绘制性能,导致线条和文字模糊。观察以下代码:

CGContextSetLineWidth(context, 3.); // 绘制从坐标{10, 100}到{200, 100}的3像素宽水平线条 
CGContextMoveToPoint(context, 10., 100.);
GContextAddLineToPoint(context, 200., 100.);
CGContextStrokePath(context); // 绘制从坐标{10, 105.5} 到 {200, 105.5}的3像素宽水平线条 
CGContextMoveToPoint(context, 10., 105.5);
CGContextAddLineToPoint(context, 200., 105.5); GContextStrokePath(context);



图8-3展示了这个程序在非Retina屏幕上的输出结果,这里放大了图片,可以更清晰地看出区别。

enter image description here

图8-3 比较分别从{10, 100}和{10, 105.5}出发的两条线

从{10, 100}到{200, 100}的线条要比从{10, 105.5}到{200, 105.5}的线条模糊很多,原因就在于iOS对坐标系的解读方式。

构造一个CGPath时,便是使用了所谓的**几何坐标系**。这与数学中使用的坐标系是一样的,以两条网格线的交点来表示零坐标点。你无法绘制出真正的几何点或几何线条,因为它们都是无限小和无限细的。iOS绘制中必须将这些几何对象转换成**像素坐标**。这是一个可以指定颜色的2D网格。像素是设备能控制的最小显示区域单位。来看图8-4。

enter image description here

图8-4 展示从{10, 100}到{200, 100}的几何线条

当调用了CGContextStrokePath,iOS会让线条沿路径居中。理想情况下,线条有3像素宽,从y = 98.5到y = 101.5,如图8-5所示。

enter image description here

图8-5 理想的3像素宽线条

但是,这个线条仍不能绘制。每个像素必须有唯一的颜色,线条顶部和底部的像素有两种颜色。一半是画笔颜色,一半是背景颜色。iOS通过取两个颜色的平均值解决了这个问题。同样的技术也用在了反锯齿上,如图8-6所示。

enter image description here

图8-6 反锯齿的3像素宽线条

在屏幕上,线条看起来会有些模糊。解决这个问题的方法就是将水平或垂直的线条移动到半个点的位置,这样当iOS将线条居中时,边缘刚好就是像素的边界。或者可以让线条更粗一些。

使用非整型宽度的线条,或者坐标系不是整型和半整型时,也可能遇到这个问题。让iOS绘制小数像素时都有可能导致模糊。

填充工具与画笔不一样。画笔的线条是中心对齐路径的,而填充颜色是基于路径的。如果填充从{10, 100}到{200, 103}的矩形,每个像素都会被正确填充,如图8-7所示。

enter image description here

图8-7 填充从{10, 100}到{200, 103}的矩形

目前的讨论视点与像素相同。而在Retina屏幕上,它们就不一样了。iPhone 4的每个点有4个像素,缩放比例为2。这样事情就有了一些微妙的变化,而且通常是情况更好了。因为Core Graphics与UIKit的坐标都是用点表示的,所有整数宽度的线条都以偶数个像素来表示了。比如说,如果需要1个点宽的画笔,实际上就是一个2像素宽的画笔。绘制这条线,iOS需要填充路径两边的像素。这样就会是整数的像素,因此不需要反锯齿处理。当然,如果使用的坐标系不是整数或半整数的,依然有可能遇到模糊的情况。

在Retina屏幕上并不需要位移半个点的位置,不过这不会有影响。若是要支持iPhone 3GS或iPad2,便需要对水平或垂直线条使用半个点的位移。

只能对水平或垂直线条使用这些方法。斜线与曲线应该进行反锯齿处理以便不会出现缺口,没有必要为它们进行偏移操作。

本文转载自:http://wiki.eoe.cn/page/iOS_pptl_artile_28212.html

Megan_zhou
粉丝 72
博文 116
码字总数 30181
作品 0
浦东
程序员
私信 提问
加载中

评论(0)

iOS的绘图机制-iOS,iPad,iPhone,Objective-c

嘿!我又回来了。 在前面我介绍了iOS的视图机制,我也提到了iOS的视图框框可以通过drawRect自己绘图,我也说过每个view的layer(CALayer)就像一个视图的投影,其实我们也可以来操作它定制一...

晨曦之光
2012/05/28
3K
0
iOS新手引导--GuideImageView(一)

github:https://github.com/woaiyouxi0803/GuideImageView 好用欢迎点🌟Star~ iOS新手引导--GuideImageView(一) iOS新手引导--GuideImageView(二) iOS新手引导--GuideImageView(三)......

woaiyouxi
2018/07/18
0
0
iOS的绘图机制二 - iOS,iPad,iPhone,Objective-c

在iOS的绘图机制那篇文章中,我说了很多大道理,现在我觉得应该摆上台来说程序本身的主题了。当说完程序本身的主题,我再引入绘图如何去定制我们的视图(UIView),估计大家就会和我一样收获...

晨曦之光
2012/05/28
628
0
CoreText 实现图文混排

NSTextView和Attribued String 第一次接触苹果系的富文本编程是在写Mac平台上的一个输入框的时候,输入框中的文字可以设置各种样式,并可以在文字中间插入图片,好在Mac的AppKit中提供了NST...

Megan_zhou
2014/05/26
1.7W
0
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 (持续更新)

1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个api,例如在开发环境...

osc_6nx63520
2019/11/17
2
0

没有更多内容

加载失败,请刷新页面

加载更多

队列关系图

Joker上上签
24分钟前
24
0
解决LeanCloud流控问题以及配置DaoVoice

最近hexo博客的评论系统valine遇上一点问题,本篇就来记录下我的解决方法。 1 LeanCloud流控问题 如果用valine评论系统的同学最近打开valine部署的日志可能会发现诸如此类的信息。 事实上我在...

胖胖雕
41分钟前
17
0
深源恒际二代信用报告OCR产品入选百度云市场优选商城

本文作者:cloudmarket 近日,深源恒际二代信用报告OCR产品入选百度云市场优选商城,用户可通过百度云市场优选商城入口0元试用相关产品。 百度云市场优选商城是从云市场合作伙伴中精选而出,...

百度开发者中心
昨天
0
0
什么是反射,为什么有用? - What is reflection and why is it useful?

问题: What is reflection, and why is it useful? 什么是反射,为什么有用? I'm particularly interested in Java, but I assume the principles are the same in any language. 我对Jav......

javail
今天
17
0
URL 中文链接 编码错误 完美解决

直接上代码 str = "%25E4%25B8%25AD%25E6%2596%2587";console.log(str);str =decodeURIComponent(decodeURIComponent(str));console.log(str); 输出结果 %25E4%25B8%25AD%25E6%2596%25......

放只虎归个山
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部