最近在写一个类似画板的需求。
功能实现参考文章:内存恶鬼drawRect - 谈画图功能的内存优化
功能实现参考Demo:BHBDrawBoarderDemo
简单功能实现后,发现如果快速画圆,拐点都有可见的棱(如下图所示)。看代码CAShaperLayer和UIBezierPath都已经设置为kCGLineJoinRound。百度过,没有找到解决办法。
拐点并不圆滑找到一个Demo也是实现了画笔功能,但是拐点比较圆滑https://github.com/linsendear/LSDrawTest
( iOS 画板/涂鸦 你画我猜 demo (OC版) 文章中提供的)
思路:Demo中是在touchMoved①方法中,对点进行存储,存储够5个后,使用- (void)addCurveToPoint: controlPoint1: controlPoint2:方法把UIBezierPath处理后再赋值给CAShapeLayer。
(①我使用UIPanGestureRecognizer实现的,对应的是UIGestureRecognizerStateChanged状态)
存储5个点在使用时会有稍微的延迟感。我改成了四个,计数规则也稍作改动,就好很多。核心代码如下
switch(gesture.state) {
case UIGestureRecognizerStateBegan: {
ctr=0;//索引值在此处归零
pts[0] = startP;
UIBezierPath*path = [UIBezierPath bezierPath];
_path= path;
CAShapeLayer* shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.backgroundColor = [UIColor clearColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.strokeColor = [UIColor blackColor].CGColor;
shapeLayer.lineWidth = 5;
[self.layer addSublayer:shapeLayer];
_shapeLayer = shapeLayer;
...//其他操作
break;
}
case UIGestureRecognizerStateChanged: {
ctr++;
pts[ctr] = startP;
//圆角处理
if(ctr==3) {
pts[2] = CGPointMake((pts[1].x+pts[3].x) *0.5, (pts[1].y+pts[3].y) *0.5);
[_path moveToPoint:pts[0]];
[_path addCurveToPoint:pts[2] controlPoint1:pts[0] controlPoint2:pts[1]];
pts[0] = pts[2];
pts[1] = pts[3];
ctr = 2;
}
_shapeLayer.path = _path.CGPath;
break;
}
}
效果图:
拐点已看不到棱角另:如果有大神知道“设置kCGLineJoinRound无效”的解决办法或原因,可以评论区指导一下,感激不尽!
网友评论