在使用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的舞臺中繪製多個數字？

回答

相關問題