cc.Graphics has a bug on v2.3

[hananht]

Hello,

cc.Graphics throws error when I try the execut the method moveTo.

this._graphics.moveTo(0, 0); // Works if this line removed
const direction = this.ShapeCounterClockwise ? 1 : -1;
this._graphics.arc(0,0, this.ShapeRadius, 0, cc.misc.degreesToRadians(this.ShapeArcAngle) * direction, this.ShapeCounterClockwise);
this._graphics.strokeColor = this.GizmoColor;
this._graphics.moveTo(0, 0);  // Works if this line removed
this._graphics.arc(0,0, this.ShapeRadius * this.ShapeThickness, 0, cc.misc.degreesToRadians(this.ShapeArcAngle) * direction, this.ShapeCounterClockwise);

this._graphics.stroke(); // Cause issue

Here is the error:
TypeError: Cannot read property ‘sub’ of undefined

Any suggestions?

[zzf_Cocos]

@hananht

this._graphics.moveTo(0, 0);

Just executing this code will lead to an error? Maybe you can create a example project for test “lineTo” scene, to confirm that the error exists.It was normal in my test.

[hananht]

If I remove the “.moveTo” method it works fine. If I am adding the “.moveTo” then the “stroke()” method shouts the error mentioned above.

I also notice that the “cc.v2().mul” has changed to “cc.v2().multiply” and it doesnt work either.

[hananht]

Here, Try this component:

const {ccclass, property, executeInEditMode, playOnFocus, requireComponent} = cc._decorator;

@ccclass
@executeInEditMode
@playOnFocus
@requireComponent(cc.Graphics)
export default class GTest extends cc.Component {

    private _graphics: cc.Graphics;

    onLoad () {
        this._graphics = this.node.getComponent(cc.Graphics);
    }

    start () {

    }

    update (dt) {
        this._graphics.clear();

        this._graphics.moveTo(0, 0);
        const direction = 1;
        this._graphics.arc(0, 0, 200, 0, cc.misc.degreesToRadians(360) * direction, true);
        //this._graphics.strokeColor = this.GizmoColor;
        this._graphics.moveTo(0, 0);
        this._graphics.arc(0, 0, 200 * 1, 0, cc.misc.degreesToRadians(360) * direction, true);

        this._graphics.stroke();
    }
}

Just create an empty node and debug my GTest component.

[zzf_Cocos]

We can fix you code like this:

        this._graphics.clear();

        this._graphics.moveTo(0, 0);
        this._graphics.close();  // or use this._graphics.lineTo(0, 0);
        const direction = 1;
        this._graphics.arc(0, 0, 100, 0, cc.misc.degreesToRadians(360) * direction, true);
        //this._graphics.strokeColor = this.GizmoColor;
        this._graphics.moveTo(0, 0);
        this._graphics.close();  // or use this._graphics.lineTo(0, 0);
        this._graphics.arc(0, 0, 200, 0, cc.misc.degreesToRadians(360) * direction, true);

        this._graphics.stroke();

Because drawing requires a section of drawing path, moveTo () can only produce one drawing point, so error will appear when drawing. You need to use the drawing path interface: lineTo or close interface. Create a drawing path, and then execute stroke.

[hananht]

Thank you!

It worked fine now…