Q1.我怎么能在XCode中绘制它？我可以很容易地在PS中做到这一点,但我发现很难以编程方式在XCode中进行,尤其是获取控制点的坐标.
Q2.此外,当屏幕尺寸变化时,如何固定点的坐标？
Q3.我怎么能像看不见的铅笔画在屏幕上那样动画呢？
解决方法
创建一个UIBezierPath对象,然后使用various methods on it to construct your path.
我怀疑你最感兴趣的方法是：
> moveToPoint:(相当自我解释,将当前点移动到给定点)
> addLineToPoint:(添加一条直线,从当前点开始到给定点结束)
> addCurveToPoint:controlPoint1:controlPoint2:(添加贝塞尔曲线,开始当前点,设置终点和控制点)
> addQuadCurveToPoint:controlPoint:从当前点开始,使用设定的终点和控制点添加二次曲线.
例如,像这样的东西将创建一个带有二次曲线的简单贝塞尔曲线路径：
UIBezierPath* yourPath = [UIBezierPath bezierPath]; // create the bezier path [yourPath moveToPoint:CGPointMake(100,100)]; // move to your starting point [yourPath addQuadCurveToPoint:CGPointMake(300,500) controlPoint:CGPointMake(500,350)]; // add a new quad curve to the point
但是,如果您习惯使用Photoshop之类的东西来创建路径,那么may be interested in PaintCode可以让您使用“所见即所得”的方法创建贝塞尔路径.
您可以将此UIBezierPath添加到CAShapeLayer的path属性中,以便在屏幕上显示它.
CAShapeLayer* yourShapeLayer = [CAShapeLayer layer]; // create your shape layer yourShapeLayer.frame = CGRectMake(0,300,500); // assign it's frame yourShapeLayer.path = yourPath.CGPath; // add your path to the shape layer yourShapeLayer.fillColor = [UIColor clearColor].CGColor; // prevent the shape layer from filling [self.view.layer addSublayer:yourShapeLayer]; // add the shape layer to the view
然后,您可以在形状图层上轻松设置strokeColor和lineWidth属性,以自定义路径的描边方式.
yourShapeLayer.strokeColor = [UIColor redColor].CGColor; // red stroke color yourShapeLayer.lineWidth = 5.0; // 5 point stroke width
你应该得到这样的东西：
我怎么能像看不见的铅笔画在屏幕上那样动画呢？
您可以轻松创建一个CABasicAnimation,它可以为CAShapeLayer的strokeStart或strokeEnd属性设置动画,以实现所需的动画.
这可能会导致线条“被绘制”到屏幕上的动画效果.
例如,此代码将导致strokeEnd属性设置为0.0到1.0的动画,从而创建所需的效果：
yourShapeLayer.strokeStart = 0.0; // reset stroke start before animating CABasicAnimation* strokeAnim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; // create animation that changes the strokeEnd property strokeAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEa@R_403_401@ut]; // give it a nice timing function strokeAnim.duration = 2.0; // duration of the animation strokeAnim.fromValue = @(0.0); // provide the start value for the animation,wrapped in an NSNumber literal. strokeAnim.toValue = @(1.0); // provide the end value for the animation,wrapped in an NSNumber literal. [yourShapeLayer addAnimation:strokeAnim forKey:@"strokeAnim"]; // add animation to layer
如何缩放此路径以使用不同大小的屏幕？
我通常喜欢解决这个问题的方法是在给定的固定帧中定义路径点(比如说500 x 500点),然后根据屏幕大小生成比例因子(在你的情况下,你想要缩放到屏幕的宽度).
所以我们要做的就是生成比例因子.
CGFloat sf = self.view.frame.size.width/500.0; // The factor to scale the path by
然后,我们只需通过此比例因子将UIBezierPath中的所有点加倍.例如,采用我们之前的路径：
UIBezierPath* yourPath = [UIBezierPath bezierPath]; // create the bezier path [yourPath moveToPoint:CGPointMake(100.0*sf,100.0*sf)]; // move to your starting point [yourPath addQuadCurveToPoint:CGPointMake(300.0*sf,500.0*sf) controlPoint:CGPointMake(500.0*sf,350.0*sf)];
现在,我们所要做的就是在我们的bezier路径点编程,好像我们总是在500 x 500帧中绘制它(我的点已经很好地适应了它).
您还需要更改CAShapeLayer的大小,使其平方并占据整个屏幕宽度.
yourShapeLayer.frame = CGRectMake(0,self.view.frame.size.width,self.view.frame.size.width);
最后,您希望将CAShapeLayer定位到屏幕的中心.您可以通过将图层的position属性设置为视图的中心来轻松完成此操作.
yourShapeLayer.position = self.view.center;
现在,您的路径应始终缩放以占据屏幕的宽度.
(我在图层中添加了灰色背景,仅用于说明缩放)
完整项目(为方便起见)：https://github.com/hamishknight/Drawing-Scaling-Animating-UIBezierPaths
