macOS图片编辑开发

原创 2018年04月15日 17:37:31

  最近实现了一个在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

thumba.api.2.1.0.0.rar

  • 2014年03月01日 22:01
  • 326KB
  • 下载

iOS 图片编辑——滤镜

iOS中涉及图片编辑中最常见的一种就是滤镜 如下图 首先 ,我们打开Xcode 新建项目  起名:testImageFilterProcess1 拖入几个必要代码(见de...
  • lwjok2007
  • lwjok2007
  • 2016-03-11 11:02:39
  • 1056

macOS 开发 - 入门笔记

引言 相关书籍 剑指人心的书 《Cocoa入门:使用Objective-C》 非虫:《macOS软件安全与逆向分析》 官方开发文档 视频教程 实用Demo 优秀MacOS 开发博客 我的开发笔...
  • lovechris00
  • lovechris00
  • 2017-05-27 10:24:16
  • 6562

macOS 开发入门教程: Part 1

原文:macOS Development for Beginners: Part 1 作者:Sarah Reichelt 译者:kmyhy 你想开发自己的的 macOS App ...
  • kmyhy
  • kmyhy
  • 2017-06-22 09:01:00
  • 2242

MacOS 和iOS 开发细节上的不同(OC)

此处默认读者都已掌握 iOS 开发,只记录macOS 上的代码。设置背景色 按钮添加点击事件设置背景色 self.imgView.wantsLayer = true; self.imgV...
  • lovechris00
  • lovechris00
  • 2017-09-06 16:36:56
  • 2551

安卓图片编辑器

  • 2013年10月14日 20:29
  • 1.03MB
  • 下载

使用Swift开发一个MacOS的菜单状态栏App

这两天突然想看看OSX下的App开发,看了几篇文章。下面这一篇我觉得入门是非常好的。我仅转述为中文,并非原文翻译。原文地址:http://footle.org/WeatherBar/ 下面开始介绍如...
  • yanghuiliu
  • yanghuiliu
  • 2016-07-28 12:11:46
  • 7401

PictureEditor

  • 2007年10月14日 11:34
  • 360KB
  • 下载

MacOS 开发 - NSWindow 两种跳转

准备工作 一、orderFront 跳转 close 返回 二、模态窗口及关闭方法 监听 NSWindowWillCloseNotification 1、Modal windows 2、Mod...
  • lovechris00
  • lovechris00
  • 2017-09-10 15:26:39
  • 3284
收藏助手
不良信息举报
您举报文章:macOS图片编辑开发
举报原因:
原因补充:

(最多只允许输入30个字)