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，你只是将模糊边界添加到生成的模糊边界上。如果您检查小提琴中的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/

希望能提供一些见解。

EaselJS - 是否可以在线上添加BlurFilter？

1 个答案: