Kineticjs fillAlpha가 작동하지 않습니다.

누구나 다음 문제에 관해 올바른 방법으로 말해 주시겠습니까? kineticjs를 사용하여 캔버스에 텍스트 상자를 만들고 싶습니다. 투명한 채우기와 검은 색 획이있는 텍스트를 얻으려고합니다. 아무것도 Kineticjs fillAlpha가 작동하지 않습니다.

obj.fillAlpha(0.1); 발생하지 - -

가

obj.setAttr('fillAlpha',0.1); 캔버스에 오류가 발생합니다 : 나는 다음 두 가지 중 하나를하려고 할 때 그것은 아무것도하지 않는 캔버스 보인다 catch되지 않은 형식 오류를 : 개체 번호가있는 방법 'fillAlpha'

출처

2014-02-21 Ervin

채우기 불투명도와 획 투명도를 개별적으로 조정하려면 획이있는 텍스트 객체와 채워진 텍스트 객체가 포함 된 그룹을 만들어야합니다.

다음은 예제 코드와 데모입니다 : 내가 채우기에 100 %의 투명성을 원하는 경우 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 % 투명한 채우기를해야하는 경우가 있습니다. 그 이유로 KineticJS는 fillAlpha와 strokeAlpha를 가지고 있지만, 왜 이런 것들이 전혀 작동하지 않는지 알지 못합니다 ... – Ervin

나는 보았습니다 ... 채우기와 선 처리 불투명도를 독립적으로 제어하려고합니다. 내 수정 된 답변을 참조하십시오. – markE

우수 !!! 고맙습니다! 지난 2 주 동안 너는 나를 많이 도왔다! 정말 감사합니다! – Ervin

Kineticjs fillAlpha가 작동하지 않습니다.

답변

관련 문제