EaselJS - 是否可以将 BlurFilter 添加到一行？答案

【问题标题】：EaselJS - Is it possible to add a BlurFilter to a line?EaselJS - 是否可以将 BlurFilter 添加到一行？
【发布时间】：2016-07-03 19:32:00
【问题描述】：

我正在尝试使用画架JS 为单行添加模糊效果。我一直在关注 createJS 文档中的 BlurFilter 演示（除了他们使用的是圆圈而不是线条）。除非我删除 shape.cache 调用，否则我的形状会完全消失。这可能是一条线还是仅限于形状的模糊？

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>

【问题讨论】：

标签： javascript createjs easeljs

【解决方案1】：

这里的问题是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/

希望能提供一些见解。

【讨论】：

谢谢！几个小时以来我一直在努力解决这个问题，这解释了它。