Swift：为什么 CAShapeLayer 的 Stroke 和 LineWidth 是从 Center 绘制的答案

【问题标题】：Swift: Why CAShapeLayer's Stroke and LineWidth drawn from CenterSwift：为什么 CAShapeLayer 的 Stroke 和 LineWidth 是从 Center 绘制的
【发布时间】：2021-07-04 00:07:27
【问题描述】：

我正在尝试具有动态数据的PieChart。

在点击每个Pie时，它必须突出显示并且处于正常状态。

动态更改lineWidth 的CAShapeLayer，但lineWidth 从中间路径增加。

它必须从下到上增加

代码：

    let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2)
    let circleRadius : CGFloat = circle.bounds.width / 2 * 0.83

    let circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(1.0 * .pi), endAngle: CGFloat(3.0 * .pi), clockwise: true)
    let progressCircle = CAShapeLayer()
    progressCircle.path = circlePath.cgPath
    progressCircle.strokeColor = color.cgColor
    progressCircle.fillColor = UIColor.clear.cgColor

    if onClick == 2 {
        progressCircle.lineWidth = 60
    } else {
        progressCircle.lineWidth = 30
    }
    
    
    progressCircle.strokeStart = strokeStart/PieChartConstant.maxPercent
    progressCircle.lineCap = CAShapeLayerLineCap.butt
    progressCircle.strokeEnd = strokeEnd/PieChartConstant.maxPercent

查询：

增加的Pie 应该和之前的Pies 一样。请指导我，如何实现这一目标。

推荐人：

Checked_this，但无法实现，也不知道如何实现。

我的输出：

【问题讨论】：

有什么问题？
嗨@matt 增加的派应该和以前的派一样。 .,如何实现？
我不知道你所说的“相同的轨道”是什么意思。你能展示一张你希望它们看起来如何的图片吗？
@Sweeper 图像已更新。突出显示的饼图应与“必需”图像位于同一路径
看起来，所需图像中的所有线宽都相同。为什么您首先有条件地将lineWidth 设置为不同的值？您应该将所有线宽设置为相同的数字。

标签： ios swift uiview pie-chart cashapelayer

【解决方案1】：

我已经尝试达到这个结果。，

OnClicking，需要增加这个radius。然后，得到了确切的结果。

代码：

    .........
    .....
    let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2)
    var circleRadius : CGFloat = circle.bounds.width / 2 * 0.83

    if onClick == 2 { //THIS BLOCK IS USED TO INCREASE PARTICULAR PIE
        circleRadius = circleRadius + 10
    }

    let circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(1.0 * .pi), endAngle: CGFloat(3.0 * .pi), clockwise: true)
    .......
    ............

输出

【讨论】：

这仍然不是解决问题的可行或可维护的方法。您的绘图与原始目标绘图（i.stack.imgur.com/7abRT.png 右侧的那个）不同，而且不会。与其破坏设计以匹配您的代码，不如升级您的代码以实现设计。
我的真实设计不能在这里发布。这是保密的。我只想知道为什么从中心画笔画，有没有办法在同一轨道上移动那个饼。我之前提到的设计[你在之前的评论中提到过]，代表“SAME TRACK”的含义。而且，我不想和图书馆一起去。我正在尝试自己。所以我在这里问了一个问题。但我不知道拒绝投票的原因。谢谢@matt
而且这个简单的代码将帮助许多SO追随者实现这种简单的饼图。

【解决方案2】：

我个人认为你会更乐意绘制整个段形状并填充它，而不是试图让一个简单的笔划代表形状。我很容易得到这种东西：

这里的每个线段都被绘制成圆弧、直线、圆弧、直线，然后填充。这种方法可以完全控制线段的绘制方式，因为我们自己绘制线段。

【讨论】：

是的@matt。我画了一个完整的圆圈，然后我试图调整笔画的开始和结束。这种方法是错误的。我们必须绘制精确的弧线，然后根据需要填充或使用笔划。我进行了很多搜索并完成了我的要求。感谢您的 cmets。 “如果目标是一个饼形，画一个饼形并填充它”——在这条评论的帮助下，我已经完成了。