KineticJS：阴影没有形状？

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

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

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.这意味着阴影也最终不可见。

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

来源

2013-03-12 atis

-1

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

来源

2013-03-12 13:51:05

在链接的示例中，所有阴影投射形状都是可见的。我想要拥有的是没有产生它的形状的影子。或者，它也可以是应用于塑造其边缘的滤镜。这又是我在API中找不到的东西。 – atis 2013-03-12 15:10:38

我不认为你可以有没有形状的影子，除非你建立你的自定义形状模糊触摸。虽然如下所示，您可以隐藏视图外的主要形状。尽管如此，我不推荐使用这种形状。

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

来源

2013-03-13 04:04:32 allenhwkim

现在这就是我所说的在盒子外面思考的问题:-)也许不是我在找的东西，而是一个很酷的黑客。 – atis 2013-03-13 19:31:21

非常聪明的解决方案！ – 2013-03-16 07:53:17

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

来源

2013-03-16 07:52:11

这个还没有？无法在任何地方看到它。 – andrewb 2014-01-01 05:04:09

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

来源

2013-08-09 13:22:30 user2668049

KineticJS：阴影没有形状？

回答

相关问题