macOS图片编辑开发

  最近实现了一个在mac系统上对图片进行编辑的程序,先给大家看一下效果


  大家可以看一下这张图片里拥有那些功能呢?
  可以看到的是这边有绘制箭头,椭圆,圆角矩形框,线条,马赛克(路飞的鞋底),当然还有文字功能以及添加表情贴图功能,一个完整的图片编辑拥有以上功能虽然使用起来不会觉得有功能上的不足,但是还是极其不方便的,其实我这边还有做一些界面上看不到的功能,比如裁剪,对图片的缩放,对已绘制操作的调整(比如移动位置,改变大小,旋转,改变颜色,删除),redo&undo,编辑完成添加到剪贴板等等,可以让用户对图片的编辑操作很顺畅的完成!
那么重点来了,这些功能具体又是怎么实现的呢?
首先说一下最简单的线条

1.曲线

  如果单纯的连接两个点,会造成画出来的曲线有棱角,很不美观,我使用二阶贝塞尔曲线(CGPathAddQuadCurveToPoint)绘制,根据上一个点以及下一个点的位置,绘制出一条平滑的曲线,但是这边也会出现一个问题,当绘制的曲线变长或者移动鼠标速度变快,曲线也会变的有棱角,如下图:


  这是什么原因呢?曲线变长,显然会导致需要绘制的点变多,电脑变得卡顿,导致mousemove获取的两点之间的间隔变长,移动鼠标速度加快同理,这边我们可以不要那么贪,传递给方法的终点选择跟上一次绘制点的中点,这个问题就解决了,请看下图:
  

  正常画这么长之后,曲线应该也会出现棱角,反正我绘制的时候,明显感觉线条已经跟不上我的鼠标指针了。。。。。
  最后简单介绍下贝塞尔曲线,大家可以看一下这篇贝塞尔曲线的数学原理,巨牛逼~
  我这边简单摘录了一段介绍二阶贝塞尔的:
  二阶贝塞尔只存在一个控制点,此时从起点到终点的线段发生变化,具体的变化是由控制点的位置而改变的,图中绿色的线段为红色曲线的切线

  B(t)=(1−t)2P0+2t(1−t)P1+t2P2,tin[0,1]
  仅仅只是简单的一元二次方程式
   


2.圆角矩形
  这个形状的绘制就相对简单很多,只是做一些细节的处理就好,比如用户绘制的圆角矩形过小时,会导致崩溃,是的你没看错,尼玛,我采用的办法是直接绘制直角矩形,这块用的方法主要是:CGPathCreateWithRoundedRect,当然啦,直角大家都知道是:CGPathCreateWithRect,其实圆角大家也知道Orz
3.椭圆
  这个形状跟之前的圆角矩形差不多,需要在用户绘制的椭圆过窄时做些处理,过窄时,虽然不会导致崩溃,但是也很逗比,请看下图:
     

  是的请不要怀疑,中间一条红的不知道什么鬼的,就是在过窄情况下的椭圆了,我对这个情况下的处理是在减少线条宽度的同时使用圆角矩形进行绘制,就是这个方法了bezierPathWithRoundedRect,效果还不错,一般人也不会这么画吧。。。。,正常椭圆的绘制就是使用它了bezierPathWithOvalInRect,还有一个情况,是的,还有,当用户选择线条很宽,但是绘制的椭圆过小时,单纯减少线条宽度,那可是会造成空心椭圆的哦,这就跟用户预期不一样了,需要填充一下哦,我使用了这两个方法进行绘制CGContextAddEllipseInRect&CGContextFillPath
4.箭头
  箭头的绘制就比较复杂了,因为没有找到现成的方法,涉及多个点之间连接,手动绘制的,后续我慢慢补上,当然还会有一些其他的。

还得看下这个markdown怎么玩,使用<div align='center'>只有第一张图能居中。。。。
哦,好像是我图片大小不一样,后面的比较大

阅读更多
版权声明:如有疑问或者建议,欢迎在下方留言。 https://blog.csdn.net/u010662488/article/details/79950300
文章标签: mac 图片编辑 画线
个人分类: Objective c
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭