我正在尝试设计一个可用于使用 block 绘制形状的编辑器，使用 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/
更新
KineticJS 5.0.1 及之前版本
var shape = evt.targetNode;
KineticJS 5.1.0+
var shape = evt.target;
关于javascript - 如何在 kinetic.js 中选择一个对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15315925/