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绘制图像的圆

回答

相关问题