我想在遮罩元素周围绘制一条笔划线。
这个想法是有一个圆角矩形显示图像和它周围的笔划线。
我正在使用pixi并试过这样的事情:
// 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;
我在这里阅读了一些关于图形蒙版和alpha蒙版的区别: https://github.com/pixijs/pixi.js/issues/2770
为了尝试,我尝试将sprite指定为mask属性,但不再屏蔽纹理,并且不显示笔触线:
var mask = new PIXI.Sprite();
如何在面具周围显示笔划,或者您建议使用哪种替代方法?
在我的设计中,纹理具有不同的宽度和高度比例 - 如果能够提供平衡屏蔽和性能的良好解决方案,则不是优先级。