cocos creater_画线

一只野狗

已于 2022-10-11 15:45:04 修改

阅读量1.5k

点赞数

分类专栏： Cocos 文章标签： cocos2d

于 2022-10-11 15:38:48 首次发布

本文链接：https://blog.csdn.net/ashmoc/article/details/127264710

版权

Cocos 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用版本：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);
    }
}