在使用Kineticjs的舞台中绘制多个数字？

我想在不同的按钮点击画布上绘制多个数字。在使用Kineticjs的舞台中绘制多个数字？

HTML

<body> 

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

<div id="option"> 
<button value="rect" onclick="rect();">rect</button> 
<button value="circle" onclick="circle();">circle</button> 
</div> 
</body>

使用Javascript：

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

function rect(){ 
var redLine = new Kinetic.Line({ 
     points: [100, 5, 100, 300, 450,300], 
     stroke: 'black', 
     strokeWidth: 3, 
     lineCap: 'square', 
     lineJoin: 'mitter' 
     }); 
// add the shape to the layer 

layer.add(redLine); 
// add the layer to the stage 
stage.add(layer); 
} 

function circle(){ 
     var wedge = new Kinetic.Wedge({ 
     x: stage.getWidth()/2, 
     y: stage.getHeight()/2, 
     radius: 70, 
     angleDeg: 60, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 4, 
     rotationDeg: -120 
     }); 

     // add the shape to the layer 
     layer.add(wedge); 

     // add the layer to the stage 
     stage.add(layer); 
}

但它给误差作为层和阶段没有被定义。我如何解决它？

来源

2013-04-11 akshaykumar6

你可以把你的代码中的jsfiddle？ – SoluableNonagon 2013-04-15 13:46:46

那个阶段和层将不被限定的原因是它们或者范围外，或者它们被首先实例化之前的代码是打破。

首先，确保你的舞台和层的任何职能之外;全球范围。

其次，你的函数的圆（）“和“矩形（）”正在调用按钮的点击，我怀疑是打破你的代码。要从内嵌删除此onclick处理程序：

<button value="circle" onclick="circle();">circle</button>

和使用JavaScript，您已经创建阶段之后分配的onclick。您可以使用jQuery轻松分配处理程序。所以，你的代码应该是这个样子：

HTML

<button value="rect" id='rect'>rect</button> //assign an id to your button

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

$('#yourButtonId').click(function(){ // button id here would be '#rect' if you use the id above 
    rect(); 
});

来源

2013-04-15 13:55:16 SoluableNonagon

在使用Kineticjs的舞台中绘制多个数字？

回答

相关问题