弧线，KineticJS绘制

如果使用KineticJS，在浏览器控制台获取错误绘制弧形：“对象＃有没有一种方法‘的getContext’” 代码：弧线，KineticJS绘制

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 
    <script defer="defer"> 
     var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 200 
     }); 
     var layer = new Kinetic.Layer(); 

    var myarc = new Kinetic.Shape({ 
     drawFunc: function(canvas) { 
     var context=canvas.getContext('2d'); 
     var x = stage.getWidth()/2; 
     var y = stage.getHeight()/2; 
     var radius = 70; 
     var startAngle = 1 * Math.PI; 
     var endAngle = 0 * Math.PI; 
     context.beginPath(); 
     context.arc(x, y, radius, startAngle, endAngle, false); 
     context.stroke(this); 
     canvas.fillStroke(this); 
    }, 
    fill: '#00D2FF', 
    stroke: 'red', 
    strokeWidth: 15, 
    draggable:true 
    }); 


    myarc.on('mouseover', function() { 
     this.setStroke('blue'); 
     this.setStrokeWidth(20); 
     layer.draw(); 
     }); 

     myarc.on('mouseout', function() { 
     this.setStroke('black'); 
     this.setStrokeWidth(4); 
     layer.draw(); 
     }); 
     // add the shape to the layer 
     layer.add(myarc); 

     // add the layer to the stage 
     stage.add(layer); 
    </script> 

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

我能画弧，而无需使用帆布，只是转移“上下文”为drawFunc功能参数：

drawFunc: function(context) {

，但在这种情况下，我不能改变圆弧的鼠标悬停事件的宽度。

来源

2013-10-28 Illya K

我看你已经升级到4.7.2动力学

版本开始4.7.0有一个稍微不同的drawFunc其供应方面的包装，而不是一个帆布包装。

https://github.com/ericdrowell/KineticJS/wiki/Change-Log

试试这个：

drawFunc: function(context) { 
    var x = stage.getWidth()/2; 
    var y = stage.getHeight()/2; 
    var radius = 70; 
    var startAngle = 1 * Math.PI; 
    var endAngle = 0 * Math.PI; 
    context.beginPath(); 
    context.arc(x, y, radius, startAngle, endAngle, false); 
    context.fillStrokeShape(this); 
},

来源

2013-10-28 16:23:08 markE

它的工作原理！非常感谢！ –

弧线，KineticJS绘制

回答

相关问题