[英]How to select an object in kinetic.js?
我正在嘗試使用kineticjs框架設計一個可用於使用塊繪制形狀的編輯器。 到目前為止一切都很好。 我可以添加矩形,更改其大小,並旋轉它。 但我說的只適用於最后創建的對象。 我無法選擇其中一個進行修改。 這里是代碼的html:
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<table width="800" border="0">
<tr>
<td colspan="2" style="background-color:#eeeeee;">
</td>
</tr>
<tr>
<td style="background-color:#eeeeee;height:200px;width:400px;">
<button id="rect">Rectangle</button><br>
<button id="small">Small</button><br>
<button id="big">Big</button><br>
<button id="rotate">RotateRight</button><br>
<button id="rotate2">RotateLeft</button><br>
<button id="delete">Delete</button><br>
</td>
<td>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script type="text/javascript" src="example_kinetic.js"></script>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#eeeeee;text-align:center;">
Copyright © ceng314animation.wordpress.com/</td>
</tr>
</table>
</body>
</html>
這是js部分:
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
boardBlankArray = [];
var rect, myRect;
var i = 1;
document.getElementById('rect').addEventListener('click', function() {
rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50,25],
draggable: true,
id:"rect"+i
});
i=i+1;
rect.setListening(true);
boardBlankArray[i] = rect;
// add the shape to the layer
layer.add(boardBlankArray[i]);
stage.add(layer);
boardBlankArray[i].on("click",function(){
alert(this.attrs.id);
//myRect = stage.getChildren()[i];
});
}, false);
document.getElementById('big').addEventListener('click', function(){
rect.setWidth(rect.getWidth()+10);
rect.setHeight(rect.getHeight()+10);
rect.setListening(true);
stage.add(layer);
}, false);
document.getElementById('small').addEventListener('click', function() {
rect.setListening(true);
rect.setWidth(rect.getWidth()-10);
rect.setHeight(rect.getHeight()-10);
stage.add(layer);
}, false);
document.getElementById('rotate').addEventListener('click', function() {
rect.setListening(true);
rect.rotate(Math.PI/4);
stage.add(layer);
}, false);
document.getElementById('rotate2').addEventListener('click', function() {
rect.setListening(true);
rect.rotate(-Math.PI/4);
stage.add(layer);
}, false);
document.getElementById('delete').addEventListener('click', function() {
layer.remove(rect);
stage.add(layer);
}, false);
看起來@ jing3142的答案適用於@ user1422167,但我想在這里發布這個答案,因為另一個答案使用非常規方法在KineticJS中選擇一個節點。
KineticJS選擇節點的方式是使用:
event.targetNode
資料來源: http : //www.html5canvastutorials.com/kineticjs/html5-canvas-get-event-shape-with-kineticjs/
layer.on('click', function(evt) {
// get the shape that was clicked on
var shape = evt.targetNode;
alert('you clicked on \"' + shape.getName() + '\"');
});
使用var shape = evt.targetNode;
,您可以在KineticJS節點上調用所有KineticJS方法。 在本示例中,教程調用getName
方法: shape.getName()
。
另外,請在此處查看有關KineticJS事件的更多信息: http ://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/
UPDATE
KineticJS 5.0.1及之前
var shape = evt.targetNode;
KineticJS 5.1.0+
var shape = evt.target;
單擊矩形時,需要將其設置為活動矩形。 將myrect用作當前活動矩形的變量
對您的代碼進行以下更改,標識為// <<<<<<<<<<<<<<<<<<<<<
注意boardBlankArray不是必需的
document.getElementById('rect').addEventListener('click', function() {
rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50,25],
draggable: true,
id:"rect"+i
});
i=i+1;
myrect=rect //<<<<<<<<<<<<<<sets recently created rectangle as active
rect.setListening(true);
// add the shape to the layer
layer.add(rect);
stage.add(layer);
rect.on("click",function(){ //<<<<<<<<<<<
myRect = this; //<<<<<<<<<<<<<<<<<<<<<< sets clicked on rectangle as active
});
}, false);
document.getElementById('big').addEventListener('click', function(){
myrect.setWidth(myrect.getWidth()+10); //<<<<<<<<<uses currently active rectangle
myrect.setHeight(myrect.getHeight()+10); //<<<<<<<uses currently active rectangle
myrect.setListening(true);
stage.add(layer);
}, false);
您需要在以下所有函數調用中將rect更改為myrect
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.