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：陰影沒有形狀？

回答

相關問題