Is it possible to edit restored primitive shapes using kineticjs?

Question

Is it possible to edit restored primitive shapes using kineticjs?

Edit in the sense re-size and destroy restored shapes. I am using the following kineticjs files kinetic-v5.0.1.js kinetic-v5.0.1.min.js

If its possible means help me to find out the solution.

Thanks in Advance.

Answer 1

I have reedited restored rectangle and other shapes in this way

var Rectanglenodes = stage.find('Rect');
for (var i = 0; i < Rectanglenodes.length; i++) {
var rect = Rectanglenodes[i];
rect.on("mousedown", function (e) {
var node = e.targetNode;
selectednode = e.targetNode;
selectednodecount = 1;
if (drawingObject == "delete") {
var parentnode = node.parent;
parentnode.destroy();
stage.draw();
}
else if (drawingObject == "clearAll") {
layerText.destroy();
layerLine.destroy();
layerCircle.destroy();
layerrect.destroy();
drawingObject = "";
}
else if (drawingObject == "select") {
select(node);
var children = node.parent.children;
var group = node.parent;
 for (i = 1; i < children.length; i++) {
var str = children[i].getId();
var n = str.length;
var anchorId = str.substring(0, (n - 1));
if (anchorId.toLowerCase().indexOf("rect") >= 0) {
children[i].on('dragmove', function () {
update(this, e);
console.log(this);
layerrect.draw();
});
children[i].on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
children[i].on('dragend', function () {
group.setDraggable(true);
layerrect.draw();
});
children[i].on('mouseover', function () {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layerrect.draw();
});
children[i].on('mouseout', function () {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.strokeWidth(2);
layerrect.draw();
});
}
}
}
});
}

Answer 2

Yes, KineticJS primitive shapes can be modified easily even after they've been displayed!

// change sizes on various primitive shapes

myCircle.radius(newRadius);

myRect.width(newWidth);

myImage.scale(.75,.75);

// be sure to redraw the layer so the changes are displayed

layer.draw();

Answer 3

1. You have to set id property before converting to JSON (also you can use name property, see documentation for more information) to each node, that you want to edit.

2. After you have restored stage you can find node by id

   var node = stage.find('#circle')[0];
   

3. Then you can edit node.