如何让线条边缘平滑？

Posted 2023-03-13

【中文标题】如何让线条边缘平滑？

【英文标题】：How to make the line edge smooth?

【发布时间】：2016-01-19 12:32:07

【问题描述】：

我正在尝试绘制一个光标，并且我已经使用 UIBezierPath 来做到这一点。

这就是我所做的：

从顶部指针到右边缘画线。

从顶部指针到左边缘画线。

将 bezierPath 设置为具有宽度的层。

代码如下：

cursorLayerPathPointTop = UIBezierPath()
cursorLayerPathPointTop.lineJoinStyle = CGLineJoin.Round
cursorLayerPathPointTop.lineCapStyle = CGLineCap.Round
cursorLayerPathPointTop.lineWidth = 20

cursorLayerPathPointTop.moveToPoint(cursor_point_top)
cursorLayerPathPointTop.addLineToPoint(cursorRightPoint)
cursorLayerPathPointTop.moveToPoint(cursor_point_top)
cursorLayerPathPointTop.addLineToPoint(cursorLeftPoint)

//adding calyer
cursorLayer = CAShapeLayer()
cursorLayer.lineWidth = 3.0;
cursorLayer.path = cursorLayerPathPointTop.CGPath
cursorLayer.strokeColor = UIColor.whiteColor().CGColor
self.layer.addSublayer(cursorLayer)

我需要把光标变粗，这样设置cursorLayer.lineWidth = 3.0;的原因。

但这是我得到的：

正如你所看到的指针，线条没有平滑地连接在一起。我应该怎么做才能解决这个问题？

【参考方案1】：

UIBezierPath 上的lineJoinStyle 和lineCapStyle 属性仅在您使用UIBezierPath 绘制路径时使用。

您想要CAShapeLayer 等效项：

cursorLayer.lineJoin = kCALineJoinRound;
cursorLayer.lineCap = kCALineCapRound;

Fogmeister 也是正确的，您需要绘制一条线路径，而不是两条线。

【参考方案2】：

您的代码当前正在创建两个单独的线段。

改为这样做...

cursorLayerPathPointTop.moveToPoint(cursorRightPoint)
cursorLayerPathPointTop.addLineToPoint(cursor_point_top)
cursorLayerPathPointTop.addLineToPoint(cursorLeftPoint)

这将创建一条从右点开始的单线，到达顶点，然后向下到左点。

然后它将在拐角处正确使用连接样式。