creator 使用Graphics绘制移动的虚线

百味苦

已于 2022-04-09 11:56:40 修改

阅读量1.2k

点赞数

分类专栏： creator typescript 文章标签： creator typescript

于 2022-04-09 11:53:54 首次发布

本文链接：https://blog.csdn.net/qq_38026437/article/details/124058241

版权

本文介绍如何在Creator中利用Graphics对象动态绘制移动的虚线，探讨了Graphics重绘可能带来的性能问题，并提醒需要在更新阶段持续调用绘制方法。尽管存在终点显示不完美的问题，作者希望社区能分享更优解决方案。

摘要由CSDN通过智能技术生成

原文路径

原文是绘制固定虚线

因为Graphics好像是每次都会重绘，所以可能会比较耗性能

自己取舍

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    @property(cc.Node)
    content: cc.Node = null;
    @property(cc.Node)
    cNode: cc.Node = null;
    @property(cc.Graphics)
    GraphicsNode: cc.Graphics = null;  //Graphics 绘制组件
    @property(cc.Node)
    colorNode: cc.Node = null;     //颜色节点
    linePosArr: any[];          //存放起始坐标和目标坐标
    isUpdate: boolean = true;   //是否开启update
    @property(cc.Node)
    btnNode: cc.Node = null; //按钮
    
    maxMoveNum = 30; //最大偏移
    moveNum = 1;    //偏移
    dtNum: number = 1;//dt记数

    start() {
        this.initNode()
        this.btnNode.on('click', () => {
            this.moveLine();
        })
    }
    moveLine() {
        this.GraphicsNode.clear();
        this.moveNum++;
        if (this.moveNum > this.maxMoveNum) {
            this.moveNum = 0;
        }
        this.GraphicsNode.clear();
        let arr = this.linePosArr
        for (let i = 0; i < arr.length; i++) {
            let item = arr[i]
            this.drawLineOfDashes(this.GraphicsNode, item.fromPos, item.toPos, item.color)