QPainterPath(qpainterpath 凹陷的圆弧)

QPainterPath(qpainterpath 凹陷的圆弧)span id Label3 p align left span style font size 18px br span p p align left p span

大家好,我是讯享网,很高兴认识大家。




讯享网

 <span id="Label3"><p align="left"><span style="font-size:18px"><br></span></p><p align="left"><span style="font-size:18px">使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中。此类是CoreGraphics框架关于path的一个封装。使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。</span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;</span></p><p align="left"><span style="font-size:18px; color:#FF0000">1.Bezier Path 基础</span><span style="color:#FF0000"></span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。 我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状。每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集 合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;创建和使用一个path对象的过程是分开的。创建path是第一步,包含一下步骤:</span></p><p align="left"><span style="font-size:18px">(1)创建一个Bezier&nbsp;path对象。</span></p><p align="left"><span style="font-size:18px">(2)使用方法moveToPoint:去设置初始线段的起点。 </span></p><p align="left"><span style="font-size:18px">(3)添加line或者curve去定义一个或者多个subpaths。</span></p><p align="left"><span style="font-size:18px">(4)改变UIBezierPath对象跟绘图相关的属性。 </span></p><p align="left"><span style="font-size:18px">例如,我们可以设置stroked path的属性lineWidth和lineJoinStyle。也可以设置filled path的属性usesEvenOddFillRule。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;当创建path,我们应该管理path上面的点相对于原点(0,0),这样我们在随后就可以很容易的移动path了。为了绘制path对象,我们要用到 stroke和fill方法。这些方法在current graphic context下渲染path的line和curve段。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px; color:#FF0000">2、使用UIBezierPath创建多边形---在path下面添加直线条形成多边形</span></p><p align="left"><span style="font-size:18px">多边形是一些简单的形状,这些形状是由一些直线线条组成,我们可以用moveToPoint: 和 addLineToPoint:方法去构建。</span></p><p align="left"><span style="font-size:18px">方法moveToPoint:设置我们想要创建形状的起点。从这点开始,我们可以用方法addLineToPoint:去创建一个形状的线段。</span></p><p align="left"><span style="font-size:18px">我们可以连续的创建line,每一个line的起点都是先前的终点,终点就是指定的点。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">下面的代码描述了如何用线段去创建一个五边形。第五条线通过调用closePath方法得到的,它连接了最后一个点(0,40)和第一个点(100,0)</span></p><p align="left"><span style="font-size:18px">说明:closePath方法不仅结束一个shape的subpath表述,它也在最后一个点和第一个点之间画一条线段,如果我们画多边形的话,这个一个 便利的方法我们不需要去画最后一条线。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><ol start="1" type="1"><li><span style="font-size:18px">//&nbsp;Only&nbsp;override&nbsp;drawRect:&nbsp;if&nbsp;you&nbsp;perform&nbsp;custom&nbsp;drawing. &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp; </span></li><li><span style="font-size:18px">-&nbsp;( void )drawRect:(CGRect)rect&nbsp;&nbsp; </span></li><li><span style="font-size:18px">{&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIColor&nbsp;*color&nbsp;=&nbsp;[UIColor&nbsp;redColor];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[color&nbsp;set];&nbsp; //设置线条颜色 &nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIBezierPath*&nbsp;aPath&nbsp;=&nbsp;[UIBezierPath&nbsp;bezierPath];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineWidth&nbsp;=&nbsp;5.0;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineCapStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //线条拐角 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineJoinStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //终点处理 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;Set&nbsp;the&nbsp;starting&nbsp;point&nbsp;of&nbsp;the&nbsp;shape. &nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;moveToPoint:CGPointMake(100.0,&nbsp;0.0)];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;Draw&nbsp;the&nbsp;lines &nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;addLineToPoint:CGPointMake(200.0,&nbsp;40.0)];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;addLineToPoint:CGPointMake(160,&nbsp;140)];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;addLineToPoint:CGPointMake(40.0,&nbsp;140)];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;addLineToPoint:CGPointMake(0.0,&nbsp;40.0)];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;closePath]; //第五条线通过调用closePath方法得到的 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;stroke]; //Draws&nbsp;line&nbsp;根据坐标点连线 &nbsp;&nbsp; </span></li><li><span style="font-size:18px">}&nbsp;&nbsp; </span></li></ol><p align="left"><span style="font-size:18px">注:这个类要继承自UIView。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">运行的结果如下图: </span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">如果修改最后一句代码: [aPath fill ]; </span></p><p align="left"><span style="font-size:18px">运行结果就如下: </span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">这样就知道 stroke &nbsp;和 &nbsp;fill &nbsp;方法的区别 了吧! </span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px; color:#FF0000">3、使用UIBezierPath创建矩形</span></p><p align="left"><span style="font-size:18px">使用这个方法即可: </span></p><p align="left"><span style="font-size:18px"><br></span></p><ol start="1" type="1"><li><span style="font-size:18px">Creates&nbsp;and&nbsp;returns&nbsp;a&nbsp; new &nbsp;UIBezierPath&nbsp;object&nbsp;initialized&nbsp;with&nbsp;a&nbsp;rectangular&nbsp;path.&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&#43;&nbsp;(UIBezierPath&nbsp;*)bezierPathWithRect:(CGRect)rect&nbsp;&nbsp;</span></li></ol><p align="left"><span style="font-size:18px"><br></span></p><ol start="1" type="1"><li><span style="font-size:18px">-&nbsp;( void )drawRect:(CGRect)rect&nbsp;&nbsp; </span></li><li><span style="font-size:18px">{&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIColor&nbsp;*color&nbsp;=&nbsp;[UIColor&nbsp;redColor];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[color&nbsp;set];&nbsp; //设置线条颜色 &nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIBezierPath*&nbsp;aPath&nbsp;=&nbsp;[UIBezierPath&nbsp;bezierPathWithRect:CGRectMake(20,&nbsp;20,&nbsp;100,&nbsp;50)];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineWidth&nbsp;=&nbsp;5.0;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineCapStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //线条拐角 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineJoinStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //终点处理 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;stroke];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">}&nbsp;&nbsp; </span></li></ol><p align="left"><span style="font-size:18px; color:#FF0000">4、 使用UIBezierPath创建圆形或者椭圆形</span></p><p align="left"><span style="font-size:18px">使用这个方法即可: </span></p><p align="left"><span style="font-size:18px"><br></span></p><ol start="1" type="1"><li><span style="font-size:18px">Creates&nbsp;and&nbsp;returns&nbsp;a&nbsp; new &nbsp;UIBezierPath&nbsp;object&nbsp;initialized&nbsp;with&nbsp;an&nbsp;oval&nbsp;path&nbsp;inscribed&nbsp;in&nbsp;the&nbsp;specified&nbsp;rectangle&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&#43;&nbsp;(UIBezierPath&nbsp;*)bezierPathWithOvalInRect:(CGRect)rect&nbsp;&nbsp;</span></li></ol><p align="left"><span style="font-size:18px">这个方法根据传入的rect矩形参数绘制一个内切曲线。</span></p><p align="left"><span style="font-size:18px">当传入的rect是一个正方形时,绘制的图像是一个内切圆;当传入的rect是一个长方形时,绘制的图像是一个内切椭圆。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px; color:#FF0000">5、使用UIBezierPath创建一段弧线</span></p><p align="left"><span style="font-size:18px">使用这个方法: </span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px"><br></span></p><ol start="1" type="1"><li><span style="font-size:18px">Creates&nbsp;and&nbsp;returns&nbsp;a&nbsp; new &nbsp;UIBezierPath&nbsp;object&nbsp;initialized&nbsp;with&nbsp;an&nbsp;arc&nbsp;of&nbsp;a&nbsp;circle.&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&#43;&nbsp;(UIBezierPath&nbsp;*)bezierPathWithArcCenter:(CGPoint)center&nbsp;radius:(CGFloat)radius&nbsp;startAngle:(CGFloat)startAngle&nbsp;endAngle:(CGFloat)endAngle&nbsp;clockwise:( BOOL )clockwise&nbsp;&nbsp;</span></li><li><span style="font-size:18px">Parameters&nbsp;&nbsp; </span></li><li><span style="font-size:18px">center&nbsp;&nbsp; </span></li><li><span style="font-size:18px">Specifies&nbsp;the&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;circle&nbsp;(in&nbsp;the&nbsp;current&nbsp;coordinate&nbsp;system)&nbsp;used&nbsp;to&nbsp;define&nbsp;the&nbsp;arc.&nbsp;&nbsp;</span></li><li><span style="font-size:18px">radius&nbsp;&nbsp; </span></li><li><span style="font-size:18px">Specifies&nbsp;the&nbsp;radius&nbsp;of&nbsp;the&nbsp;circle&nbsp;used&nbsp;to&nbsp;define&nbsp;the&nbsp;arc.&nbsp;&nbsp;</span></li><li><span style="font-size:18px">startAngle&nbsp;&nbsp; </span></li><li><span style="font-size:18px">Specifies&nbsp;the&nbsp;starting&nbsp;angle&nbsp;of&nbsp;the&nbsp;arc&nbsp;(measured&nbsp;in&nbsp;radians).&nbsp;&nbsp;</span></li><li><span style="font-size:18px">endAngle&nbsp;&nbsp; </span></li><li><span style="font-size:18px">Specifies&nbsp;the&nbsp;end&nbsp;angle&nbsp;of&nbsp;the&nbsp;arc&nbsp;(measured&nbsp;in&nbsp;radians).&nbsp;&nbsp;</span></li><li><span style="font-size:18px">clockwise&nbsp;&nbsp; </span></li><li><span style="font-size:18px">The&nbsp;direction&nbsp;in&nbsp;which&nbsp;to&nbsp;draw&nbsp;the&nbsp;arc.&nbsp;&nbsp; </span></li><li><span style="font-size:18px">Return&nbsp;Value&nbsp;&nbsp; </span></li><li><span style="font-size:18px">A&nbsp; new &nbsp;path&nbsp;object&nbsp;with&nbsp;the&nbsp;specified&nbsp;arc.&nbsp;&nbsp; </span></li></ol><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">其中的参数分别指定:这段圆弧的中心,半径,开始角度,结束角度,是否顺时针方向。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">下图为弧线的参考系。 </span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">demo代码: </span></p><p align="left"><span style="font-size:18px"><br></span></p><ol start="1" type="1"><li><span style="font-size:18px">#define&nbsp;pi&nbsp;3. &nbsp;&nbsp; </span></li><li><span style="font-size:18px">#define&nbsp;&nbsp;&nbsp;DEGREES_TO_RADIANS(degrees)&nbsp;&nbsp;((pi&nbsp;*&nbsp;degrees)/&nbsp;180) &nbsp;&nbsp;</span></li></ol><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px"><br></span></p><ol start="1" type="1"><li><span style="font-size:18px">-&nbsp;( void )drawRect:(CGRect)rect&nbsp;&nbsp; </span></li><li><span style="font-size:18px">{&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIColor&nbsp;*color&nbsp;=&nbsp;[UIColor&nbsp;redColor];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[color&nbsp;set];&nbsp; //设置线条颜色 &nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIBezierPath*&nbsp;aPath&nbsp;=&nbsp;[UIBezierPath&nbsp;bezierPathWithArcCenter:CGPointMake(150,&nbsp;150)&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radius:75&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startAngle:0&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;endAngle:DEGREES_TO_RADIANS(135)&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clockwise:YES];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineWidth&nbsp;=&nbsp;5.0;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineCapStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //线条拐角 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineJoinStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //终点处理 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;stroke];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">}&nbsp;&nbsp; </span></li></ol><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">结果如下图: <br></span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px; color:#FF0000">6、UIBezierPath类提供了添加二次贝塞尔曲线和三次贝塞尔曲线的支持。</span></p><p align="left"><span style="font-size:18px">曲线段在当前点开始,在指定的点结束。曲线的形状有开始点,结束点,一个或者多个控制点的切线定义。下图显示了两种曲线类型的相&#20284;,以及控制点和curve形状的关系。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">(1)绘制二次贝塞尔曲线 </span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">使用到这个方法: </span></p><p align="left"><span style="font-size:18px"><br></span></p><ol start="1" type="1"><li><span style="font-size:18px">Appends&nbsp;a&nbsp;quadratic&nbsp;Bézier&nbsp;curve&nbsp;to&nbsp;the&nbsp;receiver’s&nbsp;path.&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp; </span></li><li><span style="font-size:18px">-&nbsp;( void )addQuadCurveToPoint:(CGPoint)endPoint&nbsp;controlPoint:(CGPoint)controlPoint&nbsp;&nbsp;</span></li><li><span style="font-size:18px">Parameters&nbsp;&nbsp; </span></li><li><span style="font-size:18px">endPoint&nbsp;&nbsp; </span></li><li><span style="font-size:18px">The&nbsp;end&nbsp;point&nbsp;of&nbsp;the&nbsp;curve.&nbsp;&nbsp; </span></li><li><span style="font-size:18px">controlPoint&nbsp;&nbsp; </span></li><li><span style="font-size:18px">The&nbsp;control&nbsp;point&nbsp;of&nbsp;the&nbsp;curve.&nbsp;&nbsp; </span></li></ol><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">demo代码: </span></p><p align="left"><span style="font-size:18px"><br></span></p><ol start="1" type="1"><li><span style="font-size:18px">-&nbsp;( void )drawRect:(CGRect)rect&nbsp;&nbsp; </span></li><li><span style="font-size:18px">{&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIColor&nbsp;*color&nbsp;=&nbsp;[UIColor&nbsp;redColor];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[color&nbsp;set];&nbsp; //设置线条颜色 &nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIBezierPath*&nbsp;aPath&nbsp;=&nbsp;[UIBezierPath&nbsp;bezierPath];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineWidth&nbsp;=&nbsp;5.0;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineCapStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //线条拐角 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineJoinStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //终点处理 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;moveToPoint:CGPointMake(20,&nbsp;100)];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;addQuadCurveToPoint:CGPointMake(120,&nbsp;100)&nbsp;controlPoint:CGPointMake(70,&nbsp;0)];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;stroke];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">}&nbsp;&nbsp; </span></li></ol><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">(2)绘制三次贝塞尔曲线 </span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">使用到这个方法: </span></p><p align="left"><span style="font-size:18px"><br></span></p><ol start="1" type="1"><li><span style="font-size:18px">Appends&nbsp;a&nbsp;cubic&nbsp;Bézier&nbsp;curve&nbsp;to&nbsp;the&nbsp;receiver’s&nbsp;path.&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp; </span></li><li><span style="font-size:18px">-&nbsp;( void )addCurveToPoint:(CGPoint)endPoint&nbsp;controlPoint1:(CGPoint)controlPoint1&nbsp;controlPoint2:(CGPoint)controlPoint2&nbsp;&nbsp;</span></li><li><span style="font-size:18px">Parameters&nbsp;&nbsp; </span></li><li><span style="font-size:18px">endPoint&nbsp;&nbsp; </span></li><li><span style="font-size:18px">The&nbsp;end&nbsp;point&nbsp;of&nbsp;the&nbsp;curve.&nbsp;&nbsp; </span></li><li><span style="font-size:18px">controlPoint1&nbsp;&nbsp; </span></li><li><span style="font-size:18px">The&nbsp;first&nbsp;control&nbsp;point&nbsp;to&nbsp;use&nbsp;when&nbsp;computing&nbsp;the&nbsp;curve.&nbsp;&nbsp;</span></li><li><span style="font-size:18px">controlPoint2&nbsp;&nbsp; </span></li><li><span style="font-size:18px">The&nbsp;second&nbsp;control&nbsp;point&nbsp;to&nbsp;use&nbsp;when&nbsp;computing&nbsp;the&nbsp;curve.&nbsp;&nbsp;</span></li></ol><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">demo代码: </span></p><span style="font-size:18px"><br></span><ol start="1" type="1"><li><span style="font-size:18px">-&nbsp;( void )drawRect:(CGRect)rect&nbsp;&nbsp; </span></li><li><span style="font-size:18px">{&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIColor&nbsp;*color&nbsp;=&nbsp;[UIColor&nbsp;redColor];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[color&nbsp;set];&nbsp; //设置线条颜色 &nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIBezierPath*&nbsp;aPath&nbsp;=&nbsp;[UIBezierPath&nbsp;bezierPath];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineWidth&nbsp;=&nbsp;5.0;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineCapStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //线条拐角 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;aPath.lineJoinStyle&nbsp;=&nbsp;kCGLineCapRound;&nbsp; //终点处理 &nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;moveToPoint:CGPointMake(20,&nbsp;50)];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;addCurveToPoint:CGPointMake(200,&nbsp;50)&nbsp;controlPoint1:CGPointMake(110,&nbsp;0)&nbsp;controlPoint2:CGPointMake(110,&nbsp;100)];&nbsp;&nbsp;</span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></li><li><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;[aPath&nbsp;stroke];&nbsp;&nbsp; </span></li><li><span style="font-size:18px">}&nbsp;&nbsp; </span></li></ol><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px; color:#FF0000">7.使用CoreGraphics函数去修改path。</span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;UIBezierPath 类只是CGPathRef数据类型和path绘图属性的一个封装。虽然通常我们可以用UIBezierPath类的方法去添加直线段和曲线 段,UIBezierPath类还提供了一个属性CGPath,我们可以用来直接修改底层的path data type。如果我们希望用CoreGraphics 框架函数去创建path,则我们要用到此属性。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;有两种方法可以用来修改和UIBezierPath对象相关的path。可以完全的使用CoreGraphics函数去修改path,也可以使用Core Graphics函数和UIBezierPath函数混合去修改。第一种方法在某些方面相对来说比较容易。我们可以创建一个CGPathRef数据类型, 并调用我们需要修改path信息的函数。</span></p><p align="left"><span style="font-size:18px">下面的代码就是赋&#20540;一个新的CGPathRef给UIBezierPath对象。</span></p><div border="0" cellpadding="0"><tbody><tr><td><p align="left"><span style="font-size:18px">// Create the path data</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGMutablePathRef cgPath = CGPathCreateMutable();</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(0, 0, 300, 300));</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(50, 50, 200, 200));</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// Now create the UIBezierPath object</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">UIBezierPath* aPath = [UIBezierPath bezierPath];</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">aPath.CGPath = cgPath;</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">aPath.usesEvenOddFillRule = YES;</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// After assigning it to the UIBezierPath object, you can release</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">// your CGPathRef data type safely.</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGPathRelease(cgPath);</span></p></td></tr></tbody></div><p align="left"><span style="font-size:18px">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;如果我们使用Core Graphics函数和UIBezierPath函数混合方法,我们必须小心的移动path 信息在两者之间。因为UIBezierPath类拥有自己底层的CGPathRef data type,我们不能简单的检索该类型并直接的修改它。相反,我们应该生成一个副本,然后修改此副本,然后赋&#20540;此副本给CGPath属性,如下代码:</span></p><p align="left"><span style="font-size:18px">&nbsp;Mixing Core Graphics and&nbsp; UIBezierPath &nbsp;calls</span></p><div border="0" cellpadding="0"><tbody><tr><td><p align="left"><span style="font-size:18px">UIBezierPath*&nbsp;&nbsp;&nbsp; aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 300, 300)];</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// Get the CGPathRef and create a mutable version.</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGPathRef cgPath = aPath.CGPath;</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGMutablePathRef&nbsp; mutablePath = CGPathCreateMutableCopy(cgPath);</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// Modify the path and assign it back to the UIBezierPath object</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGPathAddEllipseInRect(mutablePath, NULL, CGRectMake(50, 50, 200, 200));</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">aPath.CGPath = mutablePath;</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// Release both the mutable copy of the path.</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGPathRelease(mutablePath);</span></p></td></tr></tbody></div><p align="left"><span style="font-size:18px">8.rendering(渲染)Bezier Path对象的内容。 </span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;当创建一个UIBezierPath对象之后,我们可以使用它的stroke和fill方法在current graphics context中去渲染它。在调用这些方法之前,我们要进行一些其他的任务去确保正确的绘制path。</span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;使用UIColor类的方法去stroke和fill想要的颜色。 </span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;设置形状在目标视图中的位置。如果我们创建的path相对于原点(0,0),则我们可以给currentdrawing context应用一个适当的affie transform。例如,我想drawing一个形状起始点在(0,0),我可以调用函数CGContextTranslateCTM,并指定水平和垂 直方向的translation&#20540;为10。调整graphiccontext相对于调整path对象的points是首选的方法,因为我们可以很容易的保存和撤销先前的graphics state。</span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;&nbsp;更新path对象的drawing属性。当渲染path时,UIBezierPath实例的drawing属性会覆盖graphicscontext下的属性&#20540;。</span></p><p align="left"><span style="font-size:18px">&nbsp;</span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;&nbsp;下面的代码实现了在一个自定义view中实现drawRect:方法中去绘制一个椭圆。椭圆边框矩形的左上角位于视图坐标系统的点(50,50)处。</span></p><p align="left"><span style="font-size:18px">&nbsp;&nbsp;Drawing a path in a view </span></p><div border="0" cellpadding="0"><tbody><tr><td><p align="left"><span style="font-size:18px">- (void)drawRect:(CGRect)rect</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">{</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">// Create an oval shape to draw.</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGRectMake(0, 0, 200, 100)];</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// Set the render colors</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">[[UIColor blackColor] setStroke];</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">[[UIColor redColor] setFill];</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">CGContextRef aRef = UIGraphicsGetCurrentContext();</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// If you have content to draw after the shape,</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">// save the current state before changing the transform</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">//CGContextSaveGState(aRef);</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// Adjust the view‘s origin temporarily. The oval is</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">// now drawn relative to the new origin point.</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">CGContextTranslateCTM(aRef, 50, 50);</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// Adjust the drawing options as needed.</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">aPath.lineWidth = 5;</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// Fill the path before stroking it so that the fill</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">// color does not obscure the stroked line.</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">[aPath fill];</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">[aPath stroke];</span></p></td></tr><tr><td><span style="font-size:18px"><br></span></td></tr><tr><td><p align="left"><span style="font-size:18px">// Restore the graphics state before drawing any other content.</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">//CGContextRestoreGState(aRef);</span></p></td></tr><tr><td><p align="left"><span style="font-size:18px">}</span></p></td></tr></tbody></div><p><br><span id="transmark"></span></p><span style="font-size:18px"><br></span><p>iOS开发 贝塞尔曲线UIBezierPath</p></span> 

讯享网
小讯
上一篇 2025-06-16 10:05
下一篇 2025-06-11 10:01

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/144619.html