KineticJS：没有形状的阴影？答案

【问题标题】：KineticJS: Shadow without shape?KineticJS：没有形状的阴影？
【发布时间】：2013-08-09 21:22:30
【问题描述】：

在KinectJS 中，如何在不绘制“投射”它的形状的情况下创建阴影（即边缘模糊的半透明形状）？

起初我认为可以让形状投射阴影，但将形状本身的不透明度设置为零。像这样：

var rect = new Kinetic.Rect({
    width: 100,
    height: 100,
    opacity: 0,
    shadowEnabled: true,
    shadowBlur: 10,
    shadowOpacity: 0.6
});

但是，这不起作用，因为最终的 shadowOpacity 似乎乘以形状自身的不透明度值。所以如果 shape opacity==0，那么最终的 shadowOpacity = 0.6 * 0 == 0。这意味着阴影最终也是不可见的。

您对如何达到预期效果有任何想法吗？

【问题讨论】：

标签： kineticjs

【解决方案1】：

我认为没有形状就不可能有阴影，除非你用模糊的触感构建自定义形状。您可以将主要形状隐藏在视图之外，如下所示。不过，我不建议对许多形状使用此方法。

    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script>
    <script>
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: -120,
        y: -90,
        width: 100,
        height: 50,
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 1,
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: 150,
        shadowOpacity: 0.5
      });

      layer.add(rect);
      stage.add(layer);

    </script>

【讨论】：

现在这就是我所说的跳出框框思考 :-) 也许不是我想要的，但仍然是一个很酷的 hack。

【解决方案2】：

您需要的是模糊滤镜。这将在本月晚些时候（2013 年 3 月）随 v4.3.4 一起发布。由于 w3c 规范，阴影不是创建模糊边缘的好机制。

【讨论】：

这个出来了吗？哪里都看不到。

【解决方案3】：

我记得通过更改 kinteticjs 框架来创建带有阴影的透明按钮来实现这一点。我更改了特定的形状方法以允许填充相反的方向。每当您向相反方向填充时，它都会从同一填充中的任何其他形状中删除该形状。

【讨论】：

【解决方案4】：

我想，这可以帮助你：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shadows/。

【讨论】：

在链接的示例中，所有阴影投射形状都是可见的。我想要的是一个没有产生它的形状的阴影。或者，它可以是应用于形状模糊边缘的过滤器。这又是我在 API 中找不到的东西。