I would like to draw a stroke line around a mask element.
The idea is to have a rounded rectangle displaying an image and a stroke line around it.
I am using pixi and tried something like this:
// ui is my ui object
ui.thumbnail = new PIXI.Sprite.fromImage( '2.png' ); // loading a tmp image
// I will then interact with my graphics and update the texture in a promise call, and do something like:
var newTexture = new PIXI.Texture.fromImage( thumbnail.source );
ui.thumbnail.texture = newTexture;
// Now I apply the mask - a graphics mask:
var mask = new PIXI.Graphics();
mask.beginFill(0, 0);
mask.drawRoundedRect(0, 0, newTexture.width, newTexture.height, 40);
mask.lineStyle(5, 0xFF0000); // here I try to draw the stroke, but not visibile being part of the mask itself ...
mask.endFill();
// apply the mask
ui.thumbnail.mask = mask;
I read here a bit about difference of graphics mask and alpha mask: https://github.com/pixijs/pixi.js/issues/2770
For the sake of trying, I tried with to assign a sprite as mask property, but does not mask the texture anymore, and does not either show the stroke-line:
var mask = new PIXI.Sprite();
How to display a stroke around a mask, or which alternative would you suggest to do?
In my design textures have different Width and Height proportions - not priority if can come up with a good solution balancing masking and performance.
