<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/[email protected]/konva.min.js"></script> <meta charset="utf-8" /> <title>Konva Drag and Drop a Group Demo</title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f0f0; } </style> </head> <body> <div id="container"></div> <script> var width = window.innerWidth; var height = window.innerHeight;
var stage = new Konva.Stage({ container: 'container', width: width, height: height, });
var shapesLayer = new Konva.Layer(); var group = new Konva.Group({ draggable: true, }); var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
for (var i = 0; i < 6; i++) { var box = new Konva.Rect({ x: i * 30 + 10, y: i * 18 + 40, width: 100, height: 50, name: colors[i], fill: colors[i], stroke: 'black', strokeWidth: 4, }); group.add(box); }
group.on('mouseover', function () { document.body.style.cursor = 'pointer'; }); group.on('mouseout', function () { document.body.style.cursor = 'default'; });
shapesLayer.add(group); stage.add(shapesLayer); </script> </body> </html>
|