二零二三年 优质公开课UIKit和CoreGraphics.pptx

UIKit和Core Graphics北京电子科技职业学院 UIKit1 UIKitUIKit绘图方式实际是对Core Graphics方式的一种简化封装，可以采用面向对象的方式很方便的做各种绘图操作，主要是通过UIBezierPath这个类来实现的，创建基于矢量的路径，例如各种直线、曲线、圆等等。 2Core Graphics Core GraphicsCore Graphics是基于C的API，可以用于一切iOS绘图程序的开发，如图所示。Quartz 2D是Core Graphics框架的一部分，是一个强大的二维图像绘制引擎。Quartz 2D在UIKit中也有很好的封装和集成，日常所用到的UIKit中的各种组件都是由Core Graphics进行绘制的，包括一些常用的绘图API进行。图形上下文CGContext代表图形输出设备（也就是绘制的位置），包含了绘制图形的一些设备信息。Quartz 2D中所有对象都必须绘制在图形上下文。 Core GraphicsCore Graphics绘图的一般步骤，如图所示，主要包括：获取图形上下文创建并设置路径，将路径添加到上下文，如直线的坐标等设置上下文状态，如颜色，线条宽度等绘制路径 3Quartz 2D Quartz 2DQuartz 2D路径可以用来描述矩形、圆，以及其他想要的2D几何图形。通过路径可以对几何图形进行各种处理。Quartz 2D中有4种基本图元：点、线段、弧和贝塞尔曲线。点：点是二维空间中的一个位置，不等同于像素，一个点完全不占空间。画一个点不会在屏幕上显示任何东西；线段：线段由起点和终点两个点定义。线段没有面积，所依它们不能被填充。可以用一组线段或者曲线组成一个具有闭合路径的几何图形，然后进行填充；弧：弧由一个圆心点、半径、起始角和结束角定义。圆是弧的特例。弧是占有一定面积的路径，所以可以被填充、描边和描边填充出来；贝塞尔曲线：任何一条曲线都可以通过与它相切的控制线两端的点的位置来定义。贝塞尔曲线可以用4个点描述，其中两个点描述两个端点，另外两个描述每一端的切线。 实现自定义绘图4 实现自定义绘图在iOS上无论采用哪种绘图技术，绘制都发生在UIView对象的区域内，因此，可以重载UIView的draw(_ rect: CGRect)方法中实现自定义绘图。系统会为视图设置一个重绘标识，在每次循环时, 绘图引擎会检查重绘标识，以此判断是否有需要更新的内容，如果需要重绘，则自动调用draw(_ rect: CGRect)方法。当然，也可以手动设置重绘标识，一般可以调用一下函数来实现重绘：重绘整个视图：setNeedsDisplay()重绘指定区域的视图：setNeedsDisplay (rect : CGRect) 实现自定义绘图原则上尽量不要重复绘制全部视图，以降低系统绘制开销，以下几种情况会触发视图重绘： 当遮挡视图的其他视图被移动或删除操作的时候； 将视图的hidden属性声明设置为NO，使其从隐藏状态变为可见； 将视图滚出屏幕, 然后再重新回到屏幕上； 显式调用视图的setNeedsDisplay或者setNeedsDisplay (rect : CGRect)方法。 实现自定义绘图下面就以一个实例来分析一下具体的步骤，体会一下Quartz 2D的绘图效果。在Quartz 2D的绘图中常见的函数及其功能如下： draw(_ rect: CGRect)函数：这个是UIView内部自动调用，用于重画整个UIView中的图形内容，一般需要重载，实现自定义绘图； UIGraphicsGetCurrentContext()函数：用于获得当前的图形上下文； UIGraphicsEndImageContext()函数：关闭图形上下文； CGPoint(x: , y:)函数：建立一个点，其坐标为(x,y)； CGRect(x:, y: , width: , height: )函数：建立一个矩形，其左上角坐标为(x,y)，其宽为width，其高为height； 实现自定义绘图 move(to: CGPoint)函数：将画图的落笔移动到CGPoint这一点所在的位置，开始画； addLine(to: CGPoint )函数：从当前点开始，画一条线段，其终点为CGPoint所在位置； setStrokeColor(CGColor)函数：设置笔划线段的颜色； setFillColor(CGColor)函数：设置填充的颜色； setLineWidth(CGFloat)函数：设置笔划线段的粗细； addRect(CGRect)函数：根据CGRect的矩形位置和大小，画出一个矩形； strokeEllipse(in: CGRect)函数：根据CGRect矩形