Kineticjs fillAlpha不工作

有人可以告訴我或讓我以正確的方式解決以下問題嗎？我想使用kineticjs在畫布上創建文本框。我正在嘗試使用透明填充和黑色筆觸來獲取文本。看來畫布上沒有做任何事情，當我嘗試以下兩種之一：Kineticjs fillAlpha不工作

obj.setAttr('fillAlpha',0.1); - 什麼也沒有發生
obj.fillAlpha(0.1); - 拋出在畫布上的錯誤：遺漏的類型錯誤：對象＃有沒有方法「fillAlpha」

2014-02-21 Ervin

要獨立調整填充不透明度和筆畫不透明度，您需要創建一個包含描邊文本對象和填充文本對象的組。

這裏的示例代碼和演示：http://jsfiddle.net/m1erickson/b7qAB/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> 
<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    var textGroup=new Kinetic.Group({ 
     x:10, 
     y:30, 
     draggable: true 
    }); 
    layer.add(textGroup); 

    var textFill = new Kinetic.Text({ 
     x:0, 
     y:0, 
     text:"Hello", 
     fontSize:108, 
     fill: 'red' 
    }); 
    textGroup.add(textFill); 

    var textStroke = new Kinetic.Text({ 
     x:0, 
     y:0, 
     text:"Hello", 
     fontSize:108, 
     stroke: 'black', 
     strokeWidth: 3, 
    }); 
    textGroup.add(textStroke); 

    layer.draw(); 


    var strokeOpacity=1.00; 
    var fillOpacity=1.00; 
    var mode=1; 
    var opacity=100; 
    var delta=-1 

    animate(); 

    function animate(){ 
     requestAnimationFrame(animate); 

     if(opacity<1){ 
      delta=1; 
      opacity=1; 
     } 
     else if(opacity>100){ 
      opacity=100; 
      delta=-1; 
      mode=-mode; 
     } 
     else { 
      opacity+=delta; 
      if(mode==1){ 
       textStroke.setOpacity(opacity/100); 
      }else{ 
       textFill.setOpacity(opacity/100); 
      } 
     } 
     layer.draw(); 
    } 

}); // end $(function(){}); 

</script>  
</head> 
<body> 
    <div id="container"></div> 
</body> 
</html>

來源

2014-02-21 15:47:54 markE

坊間的感謝，如果我想在填充100％的透明度，這是工作的罰款。但我希望能夠設置中風的不透明度並分開填充。有些情況下我需要製作50％透明填充物，100％可見中風。出於這個原因，KineticJS有fillAlpha和strokeAlpha，但我不知道爲什麼這些不起作用... – Ervin

我看到...你想獨立控制填充和中風的不透明度。看到我修改後的答案。 – markE

優秀!!!謝謝！在過去的兩週裏你幫了我很多！真的很感激它！ – Ervin

Kineticjs fillAlpha不工作

回答

相關問題