3

我想在遮罩元素周围画一条笔划线。

这个想法是有一个圆角矩形显示图像和围绕它的笔划线。

我正在使用 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

为了尝试，我尝试将精灵指定为遮罩属性，但不再遮罩纹理，也没有显示笔划线：

var mask = new PIXI.Sprite();

如何在蒙版周围显示笔画，或者您建议使用哪种替代方法？

在我的设计中，纹理具有不同的宽度和高度比例——如果能提出一个平衡遮罩和性能的良好解决方案，则不是优先级。

4

0 回答 0