您当前位置:首页 > 睿峰资讯 > 技术宝典 > 学员供稿|基于2D矩阵变换的用图技巧

学员供稿|基于2D矩阵变换的用图技巧

时间:2016-10-28 15:49:17   来源:睿峰科技  作者:睿峰

看到这个题目,
有小伙伴就会问了,
你这么diao你爸妈知道吗?

知道,他们当然知道。

今天来聊一聊在iOS开发中 2D矩阵变换,
CGAffineTransformMake(a,b,c,d,tx,ty)

如何正确地使用图片来达成超越纯代码或纯图片的体验。









怎么说呢,方法就在那里,你迟早会看到并学会,但是如何灵活使用这些方法,就是真正的技术所在了。

整个Demo基础在于UIControl的自定义,在自定义中,通过UIControl类的方法 continueTrackingWithTouch和 endTrackingWithTouch 两种Event方法来判断当前点击位置,并对放于画布上的图层来进行相应变换。

首先,简单提一下 CGAffineTransform





 
CGAffineTransformMake(a,b,c,d,tx,ty)
ad缩放bc旋转tx,ty位移,基础的2D矩阵
公式
x=ax+cy+tx
y=bx+dy+ty
    
|a   b   0|
|c   d   0|
|tx  ty  1|
    
设a=d=1, b=c=0.


坐标是按照向量(tx,ty)
进行平移此时对应平移变幻方法:

CGAffineTransform CGAffineMakeTranslation
(CGFloat tx,CGFloat ty)
设b=c=tx=ty=0.


坐标X按照a进行缩放,Y按照d进行缩放,a,d就是X,Y的比例系数。

此时对应缩放方法:
CGAffineTransformMakeScale
(CGFloat sx, CGFloat sy)

    
设tx=ty=0,a=cosɵ,b=sinɵ,c=-sinɵ,d=cosɵ
这个时候,ɵ就是旋转的角度,
逆时针为正,顺时针为负,此时对应旋转方法:

CGAffineTransformMakeRotation(CGFloat angle)





基于这种变换,如何去组合图片特效,这便是技术点所在。

线分析一下这个Demo,中间一个圆,但是要根据鼠标点击点实时旋转,然后外圈的彩色圆环,随着中间圆的旋转逐渐出现。

咯,我贴出图片素材吧




这里可以看出来,在彩色圆下面还有个白色的底,当然,有没有这个白底对效果影响不大。

那么,这个彩环如何做到的跟随角度出现的呢?
有个方法这样的

CGContextAddArc(context, center, center, center, _minRotation, _rotation, 0);

这是一个画曲线的方法,前俩点为中心,中间点店为起始弧度,后面两个变量是最小角度和最大角度。

那么,这个画曲线和彩色圆图片除了这俩玩意都是圆的之外还有什么联系呢,答案是肯定的,当然没有啦。


首先说,曲线是画出来的,其路径可以拆解为无限个小点,假设以将彩色圆环图片的锚点设置为与曲线一样,然后以曲线作为彩色圆环的画布。你想啊,假设画布只能看到一部分,那么画布上的东西当然只能看到那么相应的一部分咯。

这个道理想明白了就很容易了。

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextDrawImage(context,imageRect, self.unselectImage.CGImage);

//把当前上下文状态保存在栈中

CGContextSaveGState(context);

CGContextMoveToPoint(context, center, center);//开始画线点

CGContextAddArc(context, center, center, center, _minRotation, _rotation, 0);

//画曲线 前俩点为中心 中间点店为起始弧度

CGContextClosePath(context);

CGContextClip(context);//裁剪锁定绘制动作


嗯,通过这样把彩色圆环绘制到曲线路径作为的画布上。

然后剩下的呢,就是根据UIControl的类方法 continueTrackingWithTouch 和 endTrackingWithTouch 事件方法,判断当前点击事件对应的图片的变换量。

贴个代码吧


这里通过判断起始touch点和结束touch点与center点的坐标相对距离,通过计算正切tan角的差来计算对应的旋转量。



思路说得差不多了,没必要贴更多代码了,执行力爆表的人看一半估计就能写出来了,反之即使我把代码放上来了最多也就拉个收藏然后就没然后了。

当然,这个Demo的最终质量取决于图片素材的质量,毕竟App什么的都看脸的是吧,所以能够在代码中玩好图片当然是作出在好看基础上好用的App的捷径啊。

嗯,就这样咯,以上均为自己看别人Demo后理解部分写出来的,当然被我参考的Demo丑得一比。
可能有些地方理解不够到位,请理解。

最后还有一个问题,
一直没整明白为啥CGContextDrawImage绘制出来的图是垂直翻转过的,对此郁闷了好久,茶不思饭不想地,结果还是没瘦。

还有更多原创精彩内容,各位期待着吧~



 
PS : 毕业季,不迷茫
现在报名参加
睿峰·web前端开发工程师
高级名企定制培训班
限招15人报名学费立减2000元
别说我没通知你,赶紧告诉你的小伙伴吧~

 

 

欢迎加入睿峰优秀学员交流群:

iOS开发: 493647356  |  软件测试:144390442

如果你有优秀的原创帖,快快向睿小峰投稿吧!

 
上一篇:UI们如何快速设计Banner  
下一篇:Mark|讲师力荐-OCUI界面设计:程序基本结构

睿峰科技——做受尊敬的培训机构 价值观: 敬畏 感恩 责任 创新 使命——通过移动互联产品提升人类生活品质 join us