EaselJS

Question

我正在尝试使用 easelJS 为单行添加模糊效果。我一直在关注 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>

Answer 1

这里的问题是 shapes have no bounds，您只是将模糊边界添加到生成的模糊边界上。如果您检查 fiddle 中的 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 占线的宽度。

这是更新后的 fiddle，我在形状本身上设置了 "bounds"，然后将这些边界添加到缓存调用中：http://jsfiddle.net/lannymcnie/cevymo3w/1/

希望能提供一些见解。

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

EaselJS - Is it possible to add a BlurFilter to a line?

javascript

createjs