cocos creater_画线

 使用版本：2.4.2

1、创建三个节点

2、创建脚本

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    @property(cc.Node)
    nd_1: cc.Node = null!;
    gra_1: cc.Graphics = null!;

    @property(cc.Node)
    nd_2: cc.Node = null!;
    gra_2: cc.Graphics = null!;

    @property(cc.Node)
    nd_3: cc.Node = null!;

    onLoad() {
        this.gra_1 = this.nd_1.getComponent(cc.Graphics);
        this.gra_2 = this.nd_2.getComponent(cc.Graphics);

        this.gra_1.strokeColor = cc.Color.WHITE;
        this.gra_2.strokeColor = cc.Color.RED;
    }

    start() {
        this.drayLine();
    }

    drayLine() {
        this.gra_1.moveTo(0, 0);
        //获得在 nd_1 节点坐标系下的 nd_2 坐标
        this.gra_1.lineTo(this.nd_1.convertToNodeSpaceAR(this.getWorldPos(this.nd_2)).x, this.nd_1.convertToNodeSpaceAR(this.getWorldPos(this.nd_2)).y);
        //画线
        this.gra_1.stroke();

        this.gra_2.moveTo(0, 0);
        //获得在 nd_2 节点坐标系下的 nd_3 坐标
        this.gra_2.lineTo(this.nd_2.convertToNodeSpaceAR(this.getWorldPos(this.nd_3)).x, this.nd_2.convertToNodeSpaceAR(this.getWorldPos(this.nd_3)).y);
        //画线
        this.gra_2.stroke();
    }

    //获得节点的世界坐标
    private getWorldPos(node: cc.Node): cc.Vec2 {
        return node.convertToWorldSpaceAR(cc.Vec2.ZERO);
    }
}

3、拖拽赋值

 4、运行