<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script> <meta charset="utf-8" /> <title>Konva Transform Events 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 layer = new Konva.Layer(); stage.add(layer);
var rect = new Konva.Rect({ x: 160, y: 60, width: 100, height: 90, fill: 'red', name: 'rect', stroke: 'black', draggable: true }); layer.add(rect);
var text = new Konva.Text({ x: 5, y: 5 }); layer.add(text); updateText();
var tr = new Konva.Transformer(); layer.add(tr); tr.attachTo(rect); layer.draw();
rect.on('transformstart', function() { console.log('transform start'); });
rect.on('dragmove', function() { updateText(); }); rect.on('transform', function() { updateText(); console.log('transform'); });
rect.on('transformend', function() { console.log('transform end'); });
function updateText() { var lines = [ 'x: ' + rect.x(), 'y: ' + rect.y(), 'rotation: ' + rect.rotation(), 'width: ' + rect.width(), 'height: ' + rect.height(), 'scaleX: ' + rect.scaleX(), 'scaleY: ' + rect.scaleY() ]; text.text(lines.join('\n')); layer.batchDraw(); } </script> </body> </html>
|