代码之家  ›  专栏  ›  技术社区  ›  Eric M.

EaselJS-是否可以在线条中添加模糊过滤器?

  •  2
  • Eric M.  · 技术社区  · 10 年前

    我正在尝试使用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>
    
    1 回复  |  直到 10 年前
        1
  •  1
  •   Lanny    10 年前

    这里的问题是 shapes have no bounds ,您只是将模糊边界添加到生成的模糊边界上。如果您检查 bounds 在您的提琴中,您将看到它只是向任意方向返回模糊量:

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

    如果将这些值添加到 cache 调用时,它仍将提供不包括所创建图形的边界。更准确的是:

    // 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/

    希望能提供一些见解。