kineticjs - KineticJS: 形のない影?

Question

KinectJSでは、影を「キャスト」する形状を描画せずに、影 (つまり、エッジがぼやけた半透明の形状) をどのように作成しますか?

最初は、シェイプに影を落とすだけで、シェイプ自体の不透明度をゼロに設定できると思いました。そのようです：

var rect = new Kinetic.Rect({
    width: 100,
    height: 100,
    opacity: 0,
    shadowEnabled: true,
    shadowBlur: 10,
    shadowOpacity: 0.6
});

ただし、最終的な shadowOpacity がシェイプ自体の不透明度の値で乗算されているように見えるため、これは機能しません。したがって、形状の不透明度==0 の場合、最終的な影の不透明度 = 0.6 * 0 == 0 になります。これは、影も最終的に見えなくなることを意味します。

望ましい効果を達成する方法について何かアイデアはありますか?

score 3 · Accepted Answer

ぼやけたタッチでカスタムシェイプを作成しない限り、シェイプのないシャドウは作成できないと思います。次のように、メインシェイプをビューの外に隠すことができます。ただし、多くの形状ではこれをお勧めしません。

    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script>
    <script>
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: -120,
        y: -90,
        width: 100,
        height: 50,
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 1,
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: 150,
        shadowOpacity: 0.5
      });

      layer.add(rect);
      stage.add(layer);

    </script>

score 1 · Accepted Answer

必要なのはぼかしフィルターです。これは、今月後半 (2013 年 3 月) に v4.3.4 でリリースされる予定です。w3c 仕様により、シャドウはぼやけたエッジを作成するための適切なメカニズムではありません。

score 0 · Accepted Answer

これを行うには、kinteticjs フレームワークを変更して、影付きの透明なボタンを作成したことを覚えています。反対方向の塗りつぶしを可能にするために、特定の形状メソッドを変更しました。反対方向に塗りつぶすと、同じ塗りつぶし内の他の図形からその図形が削除されます。

score -1 · Accepted Answer

これはあなたを助けることができると思います: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shadows/ .

kineticjs - KineticJS: 形のない影?

4 に答える 4

Related

Reference