問題タブ [image-masking]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - マスクの周りに線を描く: アルファ マスクまたはグラフィック マスク (pixi.js)?
マスク要素の周りにストローク ラインを描画したいと思います。
アイデアは、画像を表示する丸みを帯びた長方形とその周りのストローク線を持つことです。
私はpixiを使用しており、次のようなことを試しました：
グラフィックマスクとアルファマスクの違いについてここで少し読みました： https://github.com/pixijs/pixi.js/issues/2770
試しに、スプライトをマスク プロパティとして割り当ててみましたが、テクスチャはもうマスクされず、ストローク ラインも表示されません。
マスクの周りにストロークを表示する方法、またはどの代替方法を提案しますか?
私のデザインでは、テクスチャの幅と高さの比率が異なります。マスキングとパフォーマンスのバランスをとる適切なソリューションを考え出すことができれば、優先順位は高くありません。
css - さまざまなウィンドウ サイズで画像ホバーの形状が変化する
レスポンシブでホバー形状に問題がある
私はこのコードを持っています:
ブラウザのサイズを変更しない場合、ホバー画像は画像と同じサイズになります。css メディア画面に異なる境界線パーセントを配置しようとしましたが、ホバーは背景画像とまったく同じではありません
html5-canvas - CC キャンバスとマスキングをアニメートする
マスクとして機能するムービークリップ内でアニメーション化された形状をどのように使用できるのでしょうか?
私の Animate CC キャンバス ファイルには、mapAnim という以下のインスタンスをマスクするインスタンス (stripeMask) があります。
stripMask には、アニメーション化されている形状が含まれています。
したがって、関数 maskIn が呼び出されると、再生ヘッドは、stripeMask クリップ内の最初のフレーム (フレーム 0 の後のフレーム) に移動し、次のようにマスクをアニメートする必要があります。
私は AnimateCC が大好きで、うまく機能しますが、より複雑でアニメーション化されたマスクを作成する必要があり、ここで何かが欠けていない限り、達成するのは簡単ではありません.
ありがとう！
html - CSS: mix-blend-mode プロパティを特定の要素のみに適用する
mix-blend-mode プロパティを使用して、特定の SVG パスがストロークの背景画像を取り、パスが消去パスのように見えるようにしたいと考えています。次のコードは私が到達したものです。ただし、ご覧のとおり、mix-blend プロパティは、ストロークに背景画像なしで表示するために必要な他のパスに影響を与えます。したがって、mix-blend-mode プロパティを個別の要素グループのみに適用し、他の要素に影響を与えないようにする方法を求めています。
以下は私が求めるものです。
注: マスキングを使用してこれを行うこともできますが、一部のブラウザーでは非常に遅くなります。