HTML5 Canvas Move Shape to Another Container Tutorial
To move a shape from one container into another with Konva, we can use the moveTo() method which requires a container as a parameter. A container can be another stage, a layer, or a group. You can also move groups into other groups and layers, or shapes from groups directly into other layers.
Instructions: Drag and drop the groups and observe that the red rectangle is bound to either the yellow group or the blue group. Use the buttons on the left to move the box from one group into another.
Konva Move Shape to Another Container Demoview raw
<!DOCTYPE html> <html> <head> <scriptsrc="https://unpkg.com/konva@4.0.18/konva.min.js"></script> <metacharset="utf-8" /> <title>Konva Move Shape to Another Container Demo</title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f0f0; } #buttons { position: absolute; left: 10px; top: 0; } button { margin-top: 10px; display: block; } </style> </head> <body> <divid="container"></div> <divid="buttons"> <buttonid="toBlue"> Move red box to blue group </button> <buttonid="toYellow"> Move red box to yellow group </button> </div> <script> var width = window.innerWidth; var height = window.innerHeight;
var stage = new Konva.Stage({ container: 'container', width: width, height: height });
var layer = new Konva.Layer(); var yellowGroup = new Konva.Group({ x: 100, y: 100, draggable: true }); var blueGroup = new Konva.Group({ x: 300, y: 80, draggable: true });
var box = new Konva.Rect({ x: 10, y: 10, width: 100, height: 50, fill: 'red', stroke: 'black' });
var yellowCircle = new Konva.Circle({ x: 0, y: 0, radius: 50, fill: 'yellow', stroke: 'black' });
var blueCircle = new Konva.Circle({ x: 0, y: 0, radius: 50, fill: 'blue', stroke: 'black' });
// build node tree yellowGroup.add(yellowCircle); yellowGroup.add(box); blueGroup.add(blueCircle); layer.add(yellowGroup); layer.add(blueGroup); stage.add(layer);