Rounded Rectangle Weird Result

[jonathanhollander]

I've found a weird result when trying to implement a rounded rectangle as a mask.

Here is more information about it: https://forum.starling-framework.org/topic/rounded-rectangle-mask

var numW:Number = 1000;
var numH:Number = 1000;
var numCR:Number = 25;

this._bg = new AImage("color-white");
this._bg.width = numW;
this._bg.height = numH;

this._mask = new Canvas();
this._mask.beginFill(0xff0000);
this._mask.drawCircle(numCR,numCR,numCR);
this._mask.drawCircle(numW-numCR,numCR,numCR);
this._mask.drawCircle(numW-numCR,numH-numCR,numCR);
this._mask.drawCircle(numCR,numH-numCR,numCR);
this._mask.drawRectangle(numCR,0,numW-numCR-numCR,numH);
this._mask.drawRectangle(0,numCR,numW,numH-numCR-numCR);
this._mask.endFill();

this._bg.mask = this._mask;

this.addChild(this._bg);

[PrimaryFeather]

Thanks for the report, Jonathan! I'll look into it when I'm back from my vacation.

[PrimaryFeather]

Okay, the reason for the problem is that the mask has the wrong size. If a mask is not part of the display list, it's regarded as being in the local coordinate system of the object that's being masked. In your case, you scale the _bg object up, and then give the mask the same size. If you set the mask size to _bg.texture.width/height instead, it will work.

Or, alternatively, simply add _mask to the display list via this.addChild(_mask). Then the two objects will be in the same coordinate system, and your code will yield the right result.

If that doesn't solve the issue, feel free to re-open it, of course. ;-)