Question

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

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

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

但是，这不起作用，因为看起来最终的shadowOpacity会与形状自己的不透明度值相乘。因此，如果形状不透明度== 0，那么最终的shadowOpacity = 0.6 * 0 == 0.这意味着阴影最终也是不可见的。

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

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

Answer 2

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

Answer 3

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

Answer 4

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

KineticJS：没有形状的阴影？

4 个答案: