I am trying to create a rectangle shape using KineticJS with mousedown and drag events, but not having much luck with it. Has anyone done something like this?
http://jsfiddle.net/AYHSM/6/
var stage = new Kinetic.Stage({ container: 'container', width: 600, height: 400 }); var layer = new Kinetic.Layer(); layer.add(new Kinetic.Rect({ x:0, y:0, width:600, height:400 })); // this rect will allow us to use mouse events on the layer. There probably a better way to do this, but I don't know it. stage.add(layer); var rect, down = false; // down is a flag to know whether or not the mouse button is down so that we only resize the new rect when it is down. layer.on("mousedown", function(e) { down = true; var r = Math.round(Math.random()*255), g = Math.round(Math.random()*255), b = Math.round(Math.random()*255); rect = new Kinetic.Rect({ x: e.layerX, y: e.layerY, width: 11, height: 1, fill: 'rgb('+r+','+g+','+b+')', stroke: 'black', strokeWidth: 4 }); layer.add(rect); }); layer.on("mousemove", function(e) { if (!down) return; var p = rect.attrs; rect.setWidth(e.layerX - px); rect.setHeight(e.layerY - py); layer.draw(); }); layer.on("mouseup", function(e) { down = false; });