用 CALayer 画一条线

Posted 2023-02-16

【中文标题】用 CALayer 画一条线

【英文标题】：Draw a line with a CALayer

【发布时间】：2014-02-26 05:40:08

【问题描述】：

我正在尝试使用 CALayer 在两点之间画一条线。这是我的代码：

//positions a CALayer to be a line between a parent node and its subnodes.

-(void)makeLineLayer:(CALayer *)layer lineFromPointA:(CGPoint)pointA toPointB:(CGPoint)pointB
    NSLog([NSString stringWithFormat:@"Coordinates: \n Ax: %f Ay: %f Bx: %f By: %f", pointA.x,pointA.y,pointB.x,pointB.y]);

    //find the length of the line:
    CGFloat length = sqrt((pointA.x - pointB.x) * (pointA.x - pointB.x) + (pointA.y -     pointB.y) * (pointA.y - pointB.y));
    layer.frame = CGRectMake(0, 0, 1, length);

    //calculate and set the layer's center:
    CGPoint center = CGPointMake((pointA.x+pointB.x)/2, (pointA.y+pointB.y)/2);
    layer.position = center;

    //calculate the angle of the line and set the layer's transform to match it.
    CGFloat angle = atan2f(pointB.y - pointA.y, pointB.x - pointA.x);
    layer.transform = CATransform3DMakeRotation(angle, 0, 0, 1);

我知道长度计算正确，我很确定中心也是。当我运行它时，显示的线条长度正确，并且穿过两点之间的中心点，但没有正确旋转。起初我以为线条围绕错误的锚点旋转，所以我做了：layer.anchorPoint = center;，但这段代码无法在屏幕上显示任何线条。我做错了什么

【问题讨论】：

锚点在单位坐标空间中（x和y都从0到1）。这意味着无论图层的大小和纵横比如何，居中的锚点都是 (0.5, 0.5)。

好的，所以layer.anchorPoint = center; 将锚点设置为远离屏幕的某个位置，并且旋转将超出屏幕的约束范围......它不显示是有道理的。你知道问题可能是什么吗？

【参考方案1】：

试试这个...

-(void)makeLineLayer:(CALayer *)layer lineFromPointA:(CGPoint)pointA toPointB:(CGPoint)pointB

    CAShapeLayer *line = [CAShapeLayer layer];
    UIBezierPath *linePath=[UIBezierPath bezierPath];
    [linePath moveToPoint: pointA];
    [linePath addLineToPoint:pointB];
    line.path=linePath.CGPath;
    line.fillColor = nil;
    line.opacity = 1.0;
    line.strokeColor = [UIColor redColor].CGColor;
    [layer addSublayer:line];

【讨论】：

是的。不要以一定角度制作实心 CALayer 来表示一条线。使用 CAShapeLayer，并设置其路径。

【参考方案2】：

这是基于Rajesh Choudhary 的回答的 Swift 版本：

斯威夫特 2

func drawLine(onLayer layer: CALayer, fromPoint start: CGPoint, toPoint end: CGPoint) 
    let line = CAShapeLayer()
    let linePath = UIBezierPath()
    linePath.moveToPoint(start)
    linePath.addLineToPoint(end)
    line.path = linePath.CGPath
    line.fillColor = nil
    line.opacity = 1.0
    line.strokeColor = UIColor.redColor().CGColor
    layer.addSublayer(line)

斯威夫特 3

func drawLine(onLayer layer: CALayer, fromPoint start: CGPoint, toPoint end: CGPoint) 
    let line = CAShapeLayer()
    let linePath = UIBezierPath()
    linePath.move(to: start)
    linePath.addLine(to: end)
    line.path = linePath.cgPath
    line.fillColor = nil
    line.opacity = 1.0
    line.strokeColor = UIColor.red.cgColor
    layer.addSublayer(line)

【讨论】：

最好返回层，让调用者自己插入（在他们认为合适的情况下在另一层之上或之下），而不是为他们插入。

【参考方案3】：

这是基于Rajesh Choudhary 的回答的 Swift 3 版本：

func drawLine(onLayer layer: CALayer, fromPoint start: CGPoint, toPoint end:CGPoint) 
        let line = CAShapeLayer()
        let linePath = UIBezierPath()
        linePath.move(to: start)
        linePath.addLine(to: end)
        line.path = linePath.cgPath
        line.fillColor = nil
        line.opacity = 1.0
        line.strokeColor = UIColor.green.cgColor
        layer.addSublayer(line)