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;

グラフィックマスクとアルファマスクの違いについてここで少し読みました： https://github.com/pixijs/pixi.js/issues/2770

試しに、スプライトをマスク プロパティとして割り当ててみましたが、テクスチャはもうマスクされず、ストローク ラインも表示されません。

var mask = new PIXI.Sprite();

マスクの周りにストロークを表示する方法、またはどの代替方法を提案しますか?

私のデザインでは、テクスチャの幅と高さの比率が異なります。マスキングとパフォーマンスのバランスをとる適切なソリューションを考え出すことができれば、優先順位は高くありません。

4

0 に答える 0