KineticJS繪製圖像的圓

裏面我想用放置一個圓圈內的圖像：KineticJS繪製圖像的圓

 var gArrow2 = new Image(); 
     gArrow2.src = '../../Content/images/green_s.png'; 
     var circle2 = new Kinetic.Circle({ 
      drawFunc: function(canvas) { 
       var context = canvas.getContext(); 
       context.drawImage(gArrow2, 256, 256, 11, 23); 
       context.beginPath(); 
       context.arc(256, 256, this.getRadius(), 0, 2 * Math.PI, false); 
       context.lineWidth = this.getStrokeWidth(); 
       context.strokeStyle = this.getStroke(); 
       context.stroke(); 
      }, 
      x: 256, 
      y: 256, 
      radius: 70, 
      stroke: '#00ffff', 
      strokeWidth: 4, 
      opacity: 0.5 
     }); 
     layer2.add(circle2);

它不工作！我會很感激你的建議，在此先感謝。

來源

2013-03-20 hncl

你必須給gArrow2加載時間。你通過gArrow2.onload來做到這一點。

總是把gArrow2.src 後它是onload。

然後把任何使用gArrow2 的代碼放在的onload函數中。

[編輯補充layer2.draw（）]

我插你的代碼，並得到它的工作。

看起來像所有需要的是layer2.draw（）;

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/Qgnkx/

<!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://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
} 
</style>   
<script> 
$(function(){ 

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


     var gArrow2 = new Image(); 
     gArrow2.onload=function(){ 

      var circle2 = new Kinetic.Circle({ 
       drawFunc: function(canvas) { 
        var context = canvas.getContext(); 
        context.drawImage(gArrow2, 256, 256, 11, 23); 
        context.beginPath(); 
        context.arc(256, 256, this.getRadius(), 0, 2 * Math.PI, false); 
        context.lineWidth = this.getStrokeWidth(); 
        context.strokeStyle = this.getStroke(); 
        context.stroke(); 
       }, 
       x: 256, 
       y: 256, 
       radius: 70, 
       stroke: '#00ffff', 
       strokeWidth: 4, 
       opacity: 0.5 
      }); 
      layer2.add(circle2);   
      layer2.draw(); 
     } 
     gArrow2.src = 'http://dl.dropbox.com/u/139992952/stackoverflow/house1.jpg'; 


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

</script>  
</head> 

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

來源

2013-03-20 19:59:19 markE

再次，你的幫助是非常讚賞。不幸的是它沒有工作，我甚至沒有得到這個圈子。謝謝 – hncl 2013-03-20 20:55:21

馬克，我使用了你以前的drawFunc解決方案，並且在onload之後也放了src，它工作的很好。謝謝你的幫助。 – hncl 2013-03-20 22:53:45

KineticJS繪製圖像的圓

回答

相關問題