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} * @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(); } } }