为啥 CAShapeLayer 的笔触会延伸到框架之外？

Posted 2023-03-13

【中文标题】为啥 CAShapeLayer 的笔触会延伸到框架之外？

【英文标题】：Why does a CAShapeLayer's stroke extend out of the frame?为什么 CAShapeLayer 的笔触会延伸到框架之外？

【发布时间】：2013-08-02 00:21:04

【问题描述】：

这里是示例代码：

//Called by VC:

HICircleView *circleView = [[HICircleView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];

// init of circle view

- (id)initWithFrame:(CGRect)frame

    self = [super initWithFrame:frame];
    if (self) 
        CAShapeLayer *borderLayer = [CAShapeLayer layer];
        borderLayer.fillColor = [UIColor whiteColor].CGColor;
        borderLayer.path = [UIBezierPath bezierPathWithOvalInRect:self.frame].CGPath;
        borderLayer.strokeColor = [[UIColor redColor] CGColor];
        borderLayer.lineWidth = 5;
        [self.layer addSublayer:borderLayer];
    
    return self;

好的，谢谢你的回答。转移我：

CGRect rect = CGRectMake(3, 3, self.frame.size.width, self.frame.size.height);
borderLayer.path = [UIBezierPath bezierPathWithOvalInRect:rect].CGPath;

并将线宽设为 6。

【参考方案1】：

设置lineWidth 画一条线，实际路径正好在画线的中间。

如果您希望绘制的线与某物对齐，则必须将路径移动lineWidth 的一半。

您可以通过在UIBezierPath 上使用- (void)applyTransform:(CGAffineTransform)transform 来移动路径并应用平移变换。

如果您希望绘制的路径包含在某个区域中，则移动路径无济于事。在这种情况下，只需创建一个较小的路径。如果你想画一个 100ptx100pt 的矩形，线宽为 5，你必须在一个 95pt*95pt 的矩形中画一条路径（两边各有 2.5pt 的空间）。

【讨论】：

谢谢。你能解释一下如何改变线路路径吗？没关系。明白了。

【参考方案2】：

您宁愿选择视图的边界属性进行计算。如果它的原点大于 (0,0)，Frame 属性将无法正常工作。您可以使用 CGRectInsets 来调整圆的矩形，而不是执行变换计算。这将自动将矩形定位在原始矩形的中心。

- (id)initWithFrame:(CGRect)frame

    self = [super initWithFrame:frame];
    if (self) 
        CAShapeLayer *borderLayer = [CAShapeLayer layer];
        borderLayer.fillColor = [UIColor whiteColor].CGColor;
        CGFloat lineWidth = 5;
        CGRect rect = CGRectInset(self.bounds, lineWidth / 2, lineWidth / 2);
        borderLayer.path = [UIBezierPath bezierPathWithOvalInRect:rect].CGPath;
        borderLayer.strokeColor = [[UIColor redColor] CGColor];
        borderLayer.lineWidth = lineWidth;
        [self.layer addSublayer:borderLayer];
    
    return self;

【讨论】：

感谢 CGRectInset 提示，这就是我在 Swift 3 中得到的结果：let delta = type(of: self).StrokeLineWidth / 2.0let rect = contentView.bounds.insetBy(dx: delta, dy: delta)