CocosCreator2.4 使用Graphics绘制连续心电图效果

前言

上一版心电图效果不是很好，于是修改了一下
tip:画面中的锯齿是因为分辨率太低
初始版本：

修改版本：

初始版本源码

const {
    ccclass,
    property
} = cc._decorator;


export class heartNode {
    position: cc.Vec2;
    heartBeat: heartBeat;

    constructor(pos: cc.Vec2) {
        this.position = pos;
    }
}

@ccclass
export default class heartBeat extends cc.Component {

    @property(cc.Node)
    rootNode: cc.Node = null;
    @property(cc.Graphics)
    Graphic: cc.Graphics = null;

    /**
     * 存储所有需要绘制的点
     *
     * @type {Array<heartNode>}
     * @memberof heartBeat
     */
    heartNodeList: Array < heartNode >= null;

    /**
     * 移动速度
     *
     * @type {number}
     * @memberof heartBeat
     */
    moveSpeed: number = 1;

    /**
     * 浮漂，最新创建的点会追逐这个浮漂
     *
     * @type {number}
     * @memberof heartBeat
     */
    buoy: number = 0;

    /**
     * 跟随浮漂移动的当前值
     *
     * @type {number}
     * @memberof heartBeat
     */
    nowValue: number = 0;

    addPoint(y: number, qiangdu) {
        // console.log(y);
        if (this.heartNodeList == null) {
            this.heartNodeList = new Array();
        }

        this.nowValue = -this.rootNode.height / 2;
        //控制游标到标定点
        this.buoy = -this.rootNode.height / 2 + (this.rootNode.height * y * 0.01);
        console.log("--> 游标位置：" + this.buoy);
        console.log("--> 强度 越强越长：" + qiangdu);
        let maiboqiangdu = MathUtil.reMap(qiangdu, 0, 100, 0.15, 0.25)
        cc.tween(this)
            .to(maiboqiangdu, {
                nowValue: this.buoy
            }, {
                easing: 'sineInOut'
            })
            .call(() => {
                this.buoy = -this.rootNode.height / 2;
            })
            .to(maiboqiangdu, {
                nowValue: -this.rootNode.height / 2
            }, {
                easing: 'sineInOut'
            })
            .start();
    }

    //现在数据需要每帧更新
    update(dt) {
        //清空画布
        this.Graphic.clear();

        if (this.heartNodeList == null) {
            return;
        }

        //没数据就不用画
        if (this.heartNodeList.length <= 0) {
            this.heartNodeList.push(new heartNode(cc.v2(this.rootNode.width / 2, -this.rootNode.height / 2)));
            return;
        }
        // console.log("开始验证");

        //先验证有多少个出界的，记录一下
        let verificationCount = 0;

        for (let i = 0; i < this.heartNodeList.length; i++) {
            //计算出位置
            if (this.heartNodeList[i].position.x < -this.rootNode.width / 2) {
                verificationCount++;
            } else {

            }
        }
        if (verificationCount != 0) {
            for (let i = 0; i < verificationCount; i++) {
                this.heartNodeList.shift();
            }
        }

        //验证完毕，可以绘制有效node
        for (let i = 0; i < this.heartNodeList.length; i++) {
            if (i == 0) {
                this.Graphic.moveTo(this.heartNodeList[i].position.x, this.heartNodeList[i].position.y);
            } else {
                this.Graphic.lineTo(this.heartNodeList[i].position.x, this.heartNodeList[i].position.y);
            }
        }

        //让所有node往左边移动一点
        for (let i = 0; i < this.heartNodeList.length; i++) {
            this.heartNodeList[i].position = cc.v2(this.heartNodeList[i].position.x - this.moveSpeed, this.heartNodeList[i].position.y);
        }

        // 添加一个新的中间点
        let lerpNode = new heartNode(cc.v2(this.rootNode.width / 2, this.nowValue))
        this.heartNodeList.push(lerpNode);
        this.Graphic.stroke();
    }
}

修改后源码

const {
    ccclass,
    property
} = cc._decorator;


export class heartNode {
    position: cc.Vec2;
    heartBeat: heartBeat;

    constructor(pos: cc.Vec2) {
        this.position = pos;
    }
}

@ccclass
export default class heartBeat extends cc.Component {

    @property(cc.Node)
    rootNode: cc.Node = null;
    @property(cc.Graphics)
    Graphic: cc.Graphics = null;

    /**
     * 存储所有需要绘制的点
     *
     * @type {Array<heartNode>}
     * @memberof heartBeat
     */
    heartNodeList: Array < heartNode >= null;

    /**
     * 移动速度
     *
     * @type {number}
     * @memberof heartBeat
     */
    moveSpeed: number = 1;

    /**
     * 浮漂，最新创建的点会追逐这个浮漂
     *
     * @type {number}
     * @memberof heartBeat
     */
    buoy: number = 0;

    /**
     * 跟随浮漂移动的当前值
     *
     * @type {number}
     * @memberof heartBeat
     */
    nowValue: number = 0;

    addPoint(y: number, qiangdu) {
        // console.log(y);
        if (this.heartNodeList == null) {
            this.heartNodeList = new Array();
        }

        //控制游标到标定点
        // this.buoy = -this.rootNode.height / 2 + (this.rootNode.height * y * 0.01);
        this.buoy =(this.rootNode.height/2) * (y * 0.01);
        console.log("--> 游标位置：" + this.buoy);
        console.log("--> 实际数值：" + y);

        console.log("--> 强度 越强越长：" + qiangdu);
        // let maiboqiangdu = MathUtil.reMap(qiangdu, 0, 100, 0.15, 0.25)
        cc.tween(this)
            .to(0.35, {
                nowValue: this.buoy
            }, {
                easing: 'sineInOut'
            })
            .call(() => {
                // this.buoy = -this.rootNode.height / 2;
                this.buoy = 0;

            })
            .to(0.65, {
                nowValue: -this.buoy
                // nowValue: -this.rootNode.height / 2

            }, {
                easing: 'sineInOut'
            })
            .start();
    }

    //现在数据需要每帧更新
    update(dt) {
        //清空画布
        this.Graphic.clear();

        if (this.heartNodeList == null) {
            return;
        }
        //没数据就不用画
        if (this.heartNodeList.length <= 0) {
            // this.heartNodeList.push(new heartNode(cc.v2(this.rootNode.width / 2, -this.rootNode.height / 2)));
            this.heartNodeList.push(new heartNode(cc.v2(this.rootNode.width / 2, 0)));

            return;
        }
        this.DrawCenterLine();
        this.DrawWaveLine();
    }

    /**
     * 绘制中间的横线
     *
     * @memberof heartBeat
     */
    DrawCenterLine(){
        this.Graphic.strokeColor=new cc.Color(255,0,0,255);
        this.Graphic.moveTo(-this.rootNode.width / 2,0);
        this.Graphic.lineTo(this.rootNode.width / 2,0);
        this.Graphic.stroke();
    }


    /**
     * 绘制波浪线
     *
     * @memberof heartBeat
     */
    DrawWaveLine(){
        this.Graphic.strokeColor=new cc.Color(0,255,0,255);
        //先验证有多少个出界的，记录一下
        let verificationCount = 0;

        for (let i = 0; i < this.heartNodeList.length; i++) {
            //计算出位置
            if (this.heartNodeList[i].position.x < -this.rootNode.width / 2) {
                verificationCount++;
            } else {

            }
        }
        if (verificationCount != 0) {
            for (let i = 0; i < verificationCount; i++) {
                this.heartNodeList.shift();
            }
        }

        //验证完毕，可以绘制有效node
        for (let i = 0; i < this.heartNodeList.length; i++) {
            if (i == 0) {
                this.Graphic.moveTo(this.heartNodeList[i].position.x, this.heartNodeList[i].position.y);
            } else {
                this.Graphic.lineTo(this.heartNodeList[i].position.x, this.heartNodeList[i].position.y);
            }
        }

        //让所有node往左边移动一点
        for (let i = 0; i < this.heartNodeList.length; i++) {
            this.heartNodeList[i].position = cc.v2(this.heartNodeList[i].position.x - this.moveSpeed, this.heartNodeList[i].position.y);
        }

        // 添加一个新的中间点
        let lerpNode = new heartNode(cc.v2(this.rootNode.width / 2, this.nowValue))
        this.heartNodeList.push(lerpNode);

        if (this.heartNodeList.length>=3) {
        this.Graphic.stroke();
            
        }
        
    }
}

其中用到的reMap函数

    public reMap(oXY, oMin, oMax, nMin, nMax) {
        let result = 0;
        result = (nMax - nMin) / (oMax - oMin) * (oXY - oMin) + nMin;
        return result;
    }