EaselJS - ラインにBlurFilterを追加することは可能ですか？

easelJSを使用してぼかし効果を1行に追加しようとしています。私は、createJSドキュメントのBlurFilterデモに従っています（ただし、行の代わりに円を使用しています）。 shape.cache呼び出しを削除しない限り、私の形は完全に消えます。これは線で可能ですか、またはぼかしは形に限られていますか？EaselJS - ラインにBlurFilterを追加することは可能ですか？

function drawShape() { 
    var shape = new createjs.Shape(); 
    shape.graphics.setStrokeStyle(10, "round") 
    .beginStroke(colorPalette.shape[0]) 
    .beginFill(colorPalette.shape[0]) 
    .moveTo(200,400) 
    .lineTo(1500,400); 
    shape.cursor = "pointer"; 

    var blurFilter = new createjs.BlurFilter(50, 50, 1); 
    shape.filters = [blurFilter]; 
    var bounds = blurFilter.getBounds(); 
    shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height); // Code works if I remove this line 

    updateStage(shape); // Utility function that calls addChild and update on stage 
}

<body onload="init()" onresize="resize()"> 
     <!-- App --> 
     <canvas id="canvas"></canvas> 
</body>

出典

2016-07-03 Eric M.

ここでの問題は、そのshapes have no boundsで、あなただけの生成ぼかしの境界上にぼかしの境界を追加しています。あなたはフィドルにboundsを検査した場合、あなたはそれだけでどちらの方向にブレ量を返していることがわかります。

// blurFilter.getBounds() 
Rectangle {x: -51, y: -51, width: 102, height: 102}

あなたcache呼び出しで50と100にこれらの値を追加する場合、それはまだあなたを提供しますあなたが作成したグラフィックは含まれていません。より正確なものは次のようになります。

// Add in the offset position of the graphics and the coords of the shape 
shape.cache(200 - 5 + bounds.x, 400 - 5 + bounds.y, 1300 + 10 + bounds.width, 10 + bounds.height);

注線の幅について-5と+10口座います。いくつかの洞察を提供http://jsfiddle.net/lannymcnie/cevymo3w/1/

希望：ここ

は、私は形状自体に「境界」を設定し、キャッシュコールにそれらの境界を追加している更新フィドルです。

出典

2016-07-04 15:36:31 Lanny

ありがとうございました！これに対して私は何時間も頭を打っていました。 –

EaselJS - ラインにBlurFilterを追加することは可能ですか？

答えて

関連する問題