Quartz2D-绘图-00-知识点

1> 水印PPT简介
    *  图片水印作用:防止他人盗取图片,加一些Logo,生成一张新的图片。
    *  怎么生成新的图片?和绘图一样的,需要拿到上下文做事情,这里也需要拿到上下文,生成一个新的图片。
    *  什么上下文?位图上下文,在这个上下文画东西,就能输出到新的图片上。
    *  怎么获取?之前用的都是图层上下文,系统会自动创建,但是我们位图上下文,需要我们手动创建
    *  总结:只要不和view有关系的上下文,都需要我们手动创建。
    *  在哪获取图像上下文,viewDidLoad, 不需要拿到系统创建的图层上下文,没必要在drawRect方法里写,直接viewDidLoad就行了。
    *  怎么创建图像上下文了?之前说过跟上下文有关的以什么开头,UIGraphics
    *  UIGraphicsBeginImageContextWithOptions:看注释,create bitmap,创建一个位图上下文,而且这种方法得到的图片最清晰。
    *  解释参数(size:新图片尺寸 opaque: YES:不透明 NO:透明 scale:0.0 不伸缩)
    *  绘制内容(图片,文字)
    *  获取图片:把位图上下文的内容生成一个图片给你。
    *  关闭上下文,不关闭一直占用着内存。
    *  显示UIImageView上
    *  保存图片,写到文件,UIImage不能写,需要转换成NSData二进制数据
    *  UIImageJPEGRepresentation:可以设置图片质量
    *  UIImagePNGRepresentation:把图片转换成png格式的二进制数据,png格式默认是最高清的。
    *  写到桌面

2>    图片裁剪PPT简介
*    图片裁剪
    * PPT分析思路:先设置裁剪区域,把图片画上去,超出裁剪区域的自动裁剪掉。
    * 加载旧图片,根据旧图片,获取上下文尺寸。
    * 上下文的尺寸 = 新图片的尺寸
    * 开启一个多大的上下文?:和图片尺寸一样大,避免压缩图片。如果比图片尺寸小,会压缩图片。
    * 设置裁剪区域:正切于图片的圆
    * 绘制旧图片
    * 获取新图片
    * 关闭上下文
*   带圆环裁剪:在裁剪的图片外边加个小圆环。
    * PPT分析思路:先画一个大圆,在设置裁剪区域,把图片画上去,超出裁剪区域的自动裁剪掉。
    * 加载旧图片,根据旧图片,获取上下文尺寸。
    * 确定圆环宽度 borderW
    * 上下文的尺寸 = 新图片的尺寸
    * 确定新的上下文尺寸: newImageW : oldImageW + 2 * borderW  newImageH : oldImageH + 2 * borderW,
    * 绘制大圆:
        1.获取上下文 2.添加路径到上下文 3.设置大圆的颜色 = 圆环的颜色 4.渲染
    * 设置裁剪区域,和图片尺寸一样大,只不过,x,y不一样,x=borderW,y=borderW.
    * 绘制旧图片
    * 获取新图片
    * 关闭上下文
    * 抽分类,3个参数,图片名称,圆环宽度,圆环颜色

3>  屏幕截图简介
*    屏幕截图:把屏幕的内容截屏生成一张新的图片
    * 通常开发中,都是把控制器的内容截屏,生成新的图片
    * 控制器怎么显示?根据view
    * view怎么显示? 根据layer图层
    * 把layer渲染到位图上下文
    * 注意:图层只能用渲染,图片和文字可以用draw
    * 渲染在哪?新的图片
    * 开启图片上下文,和视图一样的尺寸
    * 写入桌面
    * 抽分类

4> 手势解锁
    * 演示实例程序
    * 分析界面有几个控件:背景:UIImageView 白色圆圈:按钮(点击他,会出现另外一种图片,按钮可以设置不同状态下的图片。)单独视图:(画线是有范围的,当超出view就不能画线了)
    * HMLoadView:自定义视图,在视图一创建的时候,就添加9个按钮。
    * 在initWithCoder,initWithFrame方法添加按钮。
    * 九宫格布局:
        tolcol = 3
        计算row,col 按钮的x,y跟col,row有关系,col = i % tolcol row = i / tolcol
        计算边距 margin = (view.bounds.size.width - tolcol * btnW) / (tolcol + 1)
        btnX = margin + (btnW + margin) * col
        btnY = (btnW + margin) * row
    * 圆的选中
      * 点击按钮就为选中的图片怎么做?监听按钮点击。
      * 不能addTarget: 不能及时显示选中图片。
      * 监听touchBegin,判断点在不在按钮的frame上。
      * touchBegin不调用?原因:事件交给按钮处理,应该把事件交给解锁视图。让按钮不接收事件。
      * 设置按钮不允许交互,2个用处:1.不接收事件 2.取消高亮效果 一举两得
    * 遍历所有按钮,看触摸点在哪个按钮上,就选中谁,CGRectContainsPoint 传入的参数必须是同一个坐标系
      * 实现touchMove方法:因为手指移动的时候,也需要判断点在不在按钮上。
      * 抽方法,因为touchMove的方法里,也需要做同样的事情。
            1> pointWithTouches 根据touches集合取出触摸点
            2> buttonWithPoint 根据触摸点,获取触摸按钮
   * 圆的连线
     * 哪些需要连线?被选中按钮之间都需要连线,还有一个多余的线
     * 先把选中的按钮全部连线?为什么,因为多余的那根线是从最后一个按钮的圆心开始画,手指移动在哪就画哪。
     * 搞个数组保存下所有选中按钮,在drawRect方法中遍历所有按钮,连线
     * UIBezierPath画线,不需要上下文。
     * 需要多少个UIBezierPath对象?一个,路径都是连续的,不相连的,才需要创建新的UIBezierPath。
     * 遍历数组,描述路径
        1> 起点:第一个按钮的圆心
        2> 添加一根线到其他按钮的圆心
     * 设置路径的颜色和线宽
     * 什么时候渲染?把所有路径都描述完就,渲染一次就够了。
     * [path stroke] 就能渲染到视图上了。
     * 画多余的那根线,记住手指移动的位置。
     * setNeedDisplay 没有画出来线?因为drawRect只会调用一次,需要每次手指移动的时候,都需要重绘。
     * touchBegin不调用setNeedDisplay?那时候重绘也没用,只有起点。
     * lineJoinStyle:有尖尖的东西,线段连接样式的问题,设置为平的。
     * 已经选中的按钮,不需要再次选中,和画线
     * 手指抬起,取消所有选中按钮,并且清空数组,清空线条
     * drawRect判断下没有选中数组,不需要画线。
     * 如何判断用户是否输入正确?给选中按钮绑定tag,遍历所有选中按钮,把tag拼接成一个字符串。

5> 画板
    演示程序:
    分析控件:ToolBar(不需要管里面子控件的frame),画板view,自定义工具条(方便屏幕适配,能迅速固定里面子控件的位置)
    自动布局
    绘图思路:先描述路径,在渲染。
    绘图功能:
        * touchBegin设置画线起点:开始触摸的点
        * 怎么设置起点?创建UIBezierPath,贝塞尔路径才能设置起点
        * touchMove:手指移动到哪就画哪,addLine到移动的点
        * setNeedDisplay,路径描述完了,就渲染到视图就好了。
        * 只能画一条线?drawRect方法每次都会把之前的清掉,重新绘制
        * 怎么绘制多条路径?搞个数组保存上一次的
        * 设置线宽:每次滑动滑块,就改变下一次路径的宽度
        * 监听滑块的值,把值传递给paintView,设置路径的线宽。
        * 不能在drawRect写,会导致所有路径都是一个线宽,应该是每个路径都记录自己的线宽,而且线宽只需要设置一次,在路径一创建的时候就设置。
        * 设置颜色:
        * 自定义UIBezierPath,保存颜色,实现一条路径对应一个颜色
    辅助功能:
    * 清屏:清空所有路径数组
    * 撤销:移除最后一条路径
    * 橡皮擦:设置画笔为白色
    * 保存:
        1> 把画板内容截屏
        2> 把图片保存到相册 UIImageWriteToSavedPhotosAlbum
        3> 保存相册的回调方法不能乱写,必须按照规定 image:didFinishSavingWithError:contextInfo:
    * 照片选择
        1> 通常都是去相册里去照片
        2> UIImagePickerController,就可以去手机相册了
        3> 用Modal,没有导航控制器,不能push
        4> 设置代理,获取图片
        5> 把图片传递给paintView
        6> 添加到路径,然后重绘。:画图片也需要顺序的
    * 照片处理
        1> PPT画思路:搞一个和画板一样的透明view,里面搞个UIImageView来显示我们从照片库选择的图片,然后对UIImageView进行旋转,缩放等操作
        2> UImageView不能放在layoutSubViews里面设置尺寸,因为要设置他的形变,默认会调用他父类的layoutSubViews,导致一些莫名其妙的原因
        3> 在传图片的时候设置他的尺寸,和位置,让他和图片一样的尺寸,显示在中间
        4> 长按操作:在长按结束的时候,做操作
            1.默认高亮状态,先变浅在恢复,设置alpha
            2.动画结束后,把自己截屏,传给控制器里,在交给paintView显示
            3.需要移除父视图,使命完成了,而且不移除,不能绘制东西,永远添加到paintView上面
时间: 2024-10-27 07:59:46

Quartz2D-绘图-00-知识点的相关文章

Quartz2D绘图

在viewController里,添加 1 //创建一个基于UIImage的图形上下文 2 UIGraphicsBeginImageContext(CGSizeMake(320, 450)); 3 //取出"当前"上下文,也就是上句话创建的上下文,返回CGContextRef类型 4 CGContextRef ctx = UIGraphicsGetCurrentContext(); 5 //开始向上下文中增加路径:即开始绘图 6 CGContextBeginPath(ctx); 7 /

Python--matplotlib绘图可视化知识点整理

Python--matplotlib绘图可视化知识点整理 强烈推荐ipython 原文:http://michaelxiang.me/2016/05/14/python-matplotlib-basic/ 无论你工作在什么项目上,IPython都是值得推荐的.利用ipython --pylab,可以进入PyLab模式,已经导入了matplotlib库与相关软件包(例如Numpy和Scipy),额可以直接使用相关库的功能. 本文作为学习过程中对matplotlib一些常用知识点的整理,方便查找.

iOS开发 - Quartz2D绘图

Quartz 2D简介 是一个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 - - drawRect:方法的使用 常见图形的绘制:线条.多边形.圆 绘图状态的设置:文字颜色.线宽等 图形上下文状态的保存与恢复 图形上下文栈 为了便于搭建美观的UI界面,iOS提供了UIKit框架,里面有各种各样的UI控件 UILabel:显示文字 UIImag

第三十四篇:Quartz2D绘图

1.Quartz2D在iOS开发中的价值 ?自定义view(自定义UI控件) 2.图形上下文 1)图形上下文(Graphics Context):是一个CGContextRef类型的数据 2)图形上下文的作用 ?保存绘图信息.绘图状态 ?决定绘制的输出目标(绘制到什么地方去?) (输出目标可以是PDF文件.Bitmap或者显示器的窗口上) 3)相同的一套绘图序列,指定不同的GraphicsContext,就可将相同的图像绘制到不同的目标上 4)Quartz2D提供了以下几种类型的Graphics

iOS:quartz2D绘图(给图形绘制阴影)

quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数 注意:在对绘制的图形做了绘制阴影处理前,需要先对上下文进行保存,绘制阴影成功后,还要对上下文进行复位.目的是为了不影响后面的绘图操作. 举例的阴影绘制实例如下: 1.自定义一个视图类DemoView,并将控制器的视图关联该自定义类,同时在该定义类中重写- (void)drawRect:(CGRect)rect,将绘制无阴影图形和绘制阴影图形的调用方法写在里面.     

iOS:quartz2D绘图(画一些简单的图形,如直线、三角形、圆、矩形、文字等)

前一篇几乎已经详细介绍了Quartz2D的所有知识,这一篇以及后面就不废话了,主要是用具体的实例来演示绘图效果. 这里我们先来绘制一些简单的图形(如直线.三角形.圆.矩形.文字.图像),它有两种方式可以绘制,一种是通过上下文绘制,另一种是通过路径绘制.下面对绘制三角形做了一个两种方式绘制的演示. 绘制基本的图形,需要在操作的视图类中重写- (void)drawRect:(CGRect)rect方法,并在在该方法中绘制图形.绘制图像既可以重写该方法绘制,也可以不用重写该方法,它有封装好的方法.这里

iOS:quartz2D绘图(显示绘制在PDF上的图片)

quart2D既可以用来绘制图像到pdf上,也可以从pdf上读取图像并显示出来.在使用这种方式之前,还有一种方式可以用来读取显示pdf上的图像,即使用UIWebView网页视图控件- (void)loadRequest:(NSURLRequest *)request方法加载绘制到视图上显示,这里我将会将这两种方式都演示一遍. 具体的实例如下: 方式一:采用网页视图控件UIWebView的方式显示在pdf上的绘图 1.在故事板视图中拖入两个子控件,分别是网页视图控件webView和显示按钮   2

IOS开发之Quartz2D绘图的使用

/* *绘图:Quarz 2D  ——> Core Graphics 作用: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 涂鸦\画板 手势解锁 … … 注意: Quartz2D的API是纯C语言的 Quartz2D的API来自于Core Graphics框架 需要导入 CoreGraphics.framework数据类型和函数基本都以CG作为前缀CGContextRefCGPathRefCGContextStro

iOS:quartz2D绘图(在PDF文件上绘制图片)

quartz2D还可以在PDF文件上绘制图片,它有自己的PDF Graphics Context上下文,通过UIGraphicsBeginPDFContextToFile方法开始上下文后就可以绘制图片了,最后记得使用UIGraphicsEndPDFContext()方法结束上下文.绘制pdf时,既可以绘制单页pdf,也可以绘制多页pdf成一本书,在绘制开始时,使用UIGraphicsBeginPDFPage()开始新的一页这是非常重要的.下面演示绘制单页pdf和多页的pdf. 具体的实例如下:

Quartz2D绘图详解

Quartz 2D是?个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 其实,iOS中?部分控件的内容都是通过Quartz2D画出来的 因此,Quartz2D在iOS开发中很重要的?个价值是:自定义view(自定义UI控件) 图形上下文 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用