我试图使用easelJS为单行添加模糊效果。我一直在遵循createJS文档中的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>
这里的问题是形状没有边界，您只是将模糊边界添加到生成的模糊边界上。如果你检查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/