Graphics绘制的问题

Creator 2.x
#1

绘制多段线后，我要新增加点，要有动画效果，我就加了个计时器分时间绘制增加的点。但是问题来了，
增加那一瞬间绘制的内容会闪一下，我要是不加计时器全部绘制是好的

#2

const { ccclass, property } = cc._decorator;

@ccclass

export default class NewClass extends cc.Component {

ctx: cc.Graphics = null;

// onLoad () {}

protected draw_points: cc.Vec2[] = null;

start() {

    this.ctx = this.getComponent(cc.Graphics);

    this.draw_points = this.getRandomVecs();

    this.ctx.moveTo(this.draw_points[0].x, this.draw_points[0].y);

    this.drawLines();

}

protected draw_idx: number = 0;

drawLines(len: number = 0) {

    this.ctx.moveTo(this.draw_points[0].x, this.draw_points[0].y);

    len = len == 0 ? this.draw_points.length : len;

    for (let i = 1; i < len; i += 1) {

        this.ctx.lineTo(this.draw_points[i].x, this.draw_points[i].y);

    }

    this.ctx.stroke();

}

protected UpdateNextLine() {

    this.ctx.lineTo(this.draw_points[this.draw_idx].x, this.draw_points[this.draw_idx].y);

    this.ctx.stroke();

    this.draw_idx += 1;

    if (this.draw_idx >= this.draw_points.length) {

        this.unschedule(this.UpdateNextLine);

    }

}

protected getRandomVecs() {

    let arr = [];

    for (let i = 0; i < 10; i++) {

        let y = +(Math.random() * 200).toFixed(0) + 200;

        let x: number = 100 + i * 50;

        arr.push(cc.v2(x, y));

    }

    return arr;

}

protected addRandom() {

    let len: number = this.draw_points.length;

    /**之前的线有细微变化 */

    this.draw_points.pop();

    for (let i = 0; i < 6; i++) {

        let vec: cc.Vec2 = cc.v2(100 + (len + i) * 50, +(Math.random() * 200).toFixed(0) + 200);

        this.draw_points.push(vec);

    }

    this.ctx.clear();

    // this.drawLines();

    /**问题所在 */

    this.drawLines(len);

    this.draw_idx = len;

    this.schedule(this.UpdateNextLine, .1);

}

}

#3

不clear的话，之前绘制的线条会加粗，加了clear和计时器之前的内容有个肉眼可见的粗细变化

#4

this.ctx.lineWidth = 1;看着的就是闪了

#5

主要是为楼主的头像而来

#7

const {ccclass, property} = cc._decorator;

@ccclass

export default class Helloworld extends cc.Component {

protected map: cc.Graphics = null;

protected draw_points: cc.Vec2[] = null;

start() {

    this.map = this.getComponent(cc.Graphics);

    this.initPoints();

    this.drawLines();

    this.schedule(this.addLine, 1);

}

protected initPoints() {

    this.draw_points = [];

    while (this.draw_points.length<10) {

        this.draw_points.push(this.addPos());

    }

}

drawLines() {

    this.map.clear();

    for (let i = 0; i < this.draw_points.length; i += 1) {

        if(i===0) this.map.moveTo(this.draw_points[i].x, this.draw_points[i].y);

        else this.map.lineTo(this.draw_points[i].x, this.draw_points[i].y);

    }

    this.map.stroke();

}

addPos():cc.Vec2{

    let y = +(Math.random() * 200).toFixed(0) + 200;

    let x: number = 100 + this.draw_points.length * 50;

    return cc.v2(x, y)

}

addLine():void{

    this.draw_points.push(this.addPos());

    this.drawLines();

}

}

#8

改成一次性加多条线呢？

#9

addLine(): void {

    for (let i = 0; i < 5; i++) {

        this.addpos.push(this.addPos());

    }

    this.drawLines();

    this.schedule(this.AddLines, .1);

}

protected AddLines(): void {

    let p = this.addpos.shift();

    this.draw_points.push(p);

    this.map.lineTo(p.x, p.y);

    this.map.stroke();

    if (this.addpos.length < 0) {

        this.unschedule(this.AddLines);

    }

}

我这边点击增加5条线，然后按时间顺序出来就会有问题

#10

应该知道什么问题了，之前绘制的必须要清除掉才行，
this.map.lineTo(p.x, p.y);
this.map.stroke();
这样绘制他要在之前画的线上面还要画一次，然后就看到闪烁了
直接改成 this.drawLines(),吧前面清除，之前的内容每次也画下来就没问题了

#11

那你再看一下这个写法

#12

const {ccclass, property} = cc._decorator;

@ccclass

export default class Helloworld extends cc.Component {

protected map: cc.Graphics = null;

private crtLineNum = 0;

private oldPos = cc.v2(0,0);

start() {

    this.map = this.getComponent(cc.Graphics);

    this.schedule(this.addNewLine, 1);

}



addNewLine(){

    let _pos:cc.Vec2 = cc.v2(

        100 + this.crtLineNum * 50,

        Math.floor(Math.random() * 200) + 200

    )

    this.map.moveTo(this.oldPos.x, this.oldPos.y);

    this.map.lineTo(_pos.x, _pos.y);

    this.map.stroke();

    this.crtLineNum++;

    this.oldPos = _pos;

}

}

#13

这个很关键啊
this.map.moveTo(this.oldPos.x, this.oldPos.y);
谢谢老哥了

#14

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。