I am trying to design an editor which can be used to draw shapes using blocks, using <a href="http://kineticjs.com/" rel="nofollow">kineticjs</a> framework. So far everything was good. I am able to add rectangle, to change its size, and to rotate it. But what i said only works on the last created object. I can t select one of them to modify. Here html of the code:
And this is the js part:
Code:
<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>And this is the js part:
Code:
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);