Kinetic js drag, drop, resize and rotate image

Question

I am trying to combine drag and drop resize image and rotating image on touch, and mine is behaving strange http://jsfiddle.net/littlechad/Kuaxn/

My code is as follows:

function update (activeAnchor) {     var group       = activeAnchor.getParent();     var topLeft     = group.get('.topLeft')[0];     var topRight    = group.get('.topRight')[0];     var bottomRight = group.get('.bottomRight')[0];     var bottomLeft  = group.get('.bottomLeft')[0];     var image       = group.get('.image')[0];     var stage       = group.getStage();      var anchorX     = activeAnchor.getX();     var anchorY     = activeAnchor.getY();      // update anchor positions     switch (activeAnchor.getName()) {         case 'topLeft':             topRight.setY(anchorY);             bottomLeft.setX(anchorX);             break;         case 'topRight':             topLeft.setY(anchorY);             bottomRight.setX(anchorX);             break;         case 'bottomRight':             bottomLeft.setY(anchorY);             topRight.setX(anchorX);              break;         case 'bottomLeft':             bottomRight.setY(anchorY);             topLeft.setX(anchorX);              break;     }      image.setPosition(topLeft.getPosition());      var height          = bottomLeft.attrs.y - topLeft.attrs.y;     var width           = image.getWidth()*height/image.getHeight();      topRight.attrs.x    = topLeft.attrs.x + width     topRight.attrs.y    = topLeft.attrs.y;     bottomRight.attrs.x = topLeft.attrs.x + width;     bottomRight.attrs.y = topLeft.attrs.y + height;      if (width && height) {         image.setSize(width, height);     } }  function rotate (activeAnchor) {     var group       = activeAnchor.getParent();     var topLeft     = group.get('.topLeft')[0];     var topRight    = group.get('.topRight')[0];     var bottomRight = group.get('.bottomRight')[0];     var bottomLeft  = group.get('.bottomLeft')[0];     var image       = group.get('.image')[0];     var stage       = group.getStage();      var pos         = stage.getMousePosition();     var xd          = 150 - pos.x ;     var yd          = 150 - pos.y ;     var theta       = Math.atan2(yd, xd);     var degree      = theta / (Math.PI / 180) - 45;      var height      = bottomLeft.attrs.y - topLeft.attrs.y;     var width       = image.getWidth() * height / image.getHeight();      console.log(degree);             console.log(width);     console.log(height);      image.setRotationDeg(degree);      return {         x: image.getAbsolutePosition().x,         y: image.getAbsolutePosition().y     } }  function addAnchor (group, x, y, name) {     var stage  = group.getStage();     var layer  = group.getLayer();     var anchor = new Kinetic.Circle({         x: x,         y: y,         stroke: 'transparent',         strokeWidth: 0,         radius: 20,         name: name,         draggable: false,         dragOnTop: false     });      if(name === 'topRight'){         var anchor = new Kinetic.Circle({             x: x,             y: y,             stroke: '#666',             fill: '#ddd',             strokeWidth: 2,             radius: 20,             name: name,             draggable: true,             dragOnTop: false         });      }      anchor.on('dragmove', function () {         update(this);         rotate(this);         layer.draw();     });      anchor.on('mousedown touchstart', function () {         group.setDraggable(false);         this.moveToTop();     });      anchor.on('dragend', function () {         group.setDraggable(true);         layer.draw();     });      group.add(anchor);  }      function initStage () {      var stage = new Kinetic.Stage({         container: 'container',         width: 500,         height: 800     });      var imageGroup = new Kinetic.Group({         x: 150,         y: 150,         draggable: true,     });      var layer  = new Kinetic.Layer({         width: 128,         height: 128,         offset: [64, 64]     });      layer.add(imageGroup);      var imgObj        = new Image();      var imageInstance = new Kinetic.Image({         x: 0,         y: 0,         image: imgObj,         width: 200,         height: 138,         name: 'image',     });      imgObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';      imageGroup.add(imageInstance);     addAnchor(imageGroup, 0, 0, 'topLeft');     addAnchor(imageGroup, 200, 0, 'topRight');     addAnchor(imageGroup, 200, 138, 'bottomRight');     addAnchor(imageGroup, 0, 138, 'bottomLeft');      imageGroup.on('dragstart', function() {         update(this);         rotate(this);         this.moveToTop();     });      stage.add(layer);     stage.draw(); }  function writeMessage (messageLayer, message) {     var context = messageLayer.getContext();     messageLayer.clear();     context.font = '18pt Calibri';     context.fillStyle = 'black';     context.fillText(message, 10, 25); }  //loadImages(sources, initStage); initStage(); 

It seems that updating the offset is the problem, I have tried several things to set the offset so that it stays in the middle, yet I still can't figure out how, I am really new to HTML5 and KineticJs, please help me on this.

UPDATE:

The above fiddle is no longer working due to the fillColor broken on new browsers, I have updated the fiddle, although I haven't been able to figure out the solution for this.

Thanks

Answer 1

You were very close, just using some incorrect method names, and as was said before, the cdn needs to change.

function update(activeAnchor) { var group       = activeAnchor.getParent(); var topLeft     = group.get('.topLeft')[0]; var topRight    = group.get('.topRight')[0]; var bottomRight = group.get('.bottomRight')[0]; var bottomLeft  = group.get('.bottomLeft')[0]; var image       = group.get('.image')[0]; var stage       = group.getStage();  var anchorX = activeAnchor.getX(); var anchorY = activeAnchor.getY();  switch (activeAnchor.getName()) {     case 'topLeft':         topRight.setY(anchorY);         bottomLeft.setX(anchorX);         break;     case 'topRight':         topLeft.setY(anchorY);         bottomRight.setX(anchorX);         break;     case 'bottomRight':         bottomLeft.setY(anchorY);         topRight.setX(anchorX);          break;     case 'bottomLeft':         bottomRight.setY(anchorY);         topLeft.setX(anchorX);          break; } image.setPosition(topLeft.getPosition());  var height = bottomLeft.attrs.y - topLeft.attrs.y; var width  = image.getWidth()*height/image.getHeight();  topRight.attrs.x = topLeft.attrs.x + width topRight.attrs.y = topLeft.attrs.y; bottomRight.attrs.x = topLeft.attrs.x + width; bottomRight.attrs.y = topLeft.attrs.y + height;  if(width && height) {     image.setSize(width, height); } }  function rotate(activeAnchor){ var group       = activeAnchor.getParent(); var topLeft     = group.get('.topLeft')[0]; var topRight    = group.get('.topRight')[0]; var bottomRight = group.get('.bottomRight')[0]; var bottomLeft  = group.get('.bottomLeft')[0]; var image       = group.get('.image')[0]; var stage       = group.getStage();  var pos     = stage.getPointerPosition(); var xd      = 150 - pos.x ; var yd      = 150 - pos.y ; var theta   = Math.atan2(yd, xd); var degree  = theta / (Math.PI / 180) - 45;  var height  = bottomLeft.attrs.y - topLeft.attrs.y; var width   = image.getWidth()*height/image.getHeight();  console.log(degree);  console.log(width); console.log(height); image.setRotationDeg(degree); return {     x: image.getAbsolutePosition().x,     y: image.getAbsolutePosition().y } }  function addAnchor(group, x, y, name) { var stage = group.getStage(); var layer = group.getLayer(); var anchor = new Kinetic.Circle({     x: x,     y: y,     stroke: '#fff',     fill: '#fff',     strokeWidth: 2,     radius: 20,     name: name,     draggable: false,     dragOnTop: false });  if(name === 'topRight'){     var anchor = new Kinetic.Circle({       x: x,       y: y,       stroke: '#666',       fill: '#ddd',       strokeWidth: 2,       radius: 20,       name: name,       draggable: true,       dragOnTop: false     }); } anchor.on('dragmove', function() {     update(this);     rotate(this);     layer.draw(); }); anchor.on('mousedown touchstart', function() {     group.setDraggable(false);     this.moveToTop(); }); anchor.on('dragend', function() {     group.setDraggable(true);     layer.draw(); }); group.add(anchor); }   function initStage() {           var stage = new Kinetic.Stage({     container: 'container',     width: 500,     height: 800 });  var imageGroup = new Kinetic.Group({     x: 150,     y: 150,     draggable: true, });  var layer  = new Kinetic.Layer({     width: 128,     height: 128,     offset: [64, 64] }); layer.add(imageGroup);  var imgObj        = new Image(); var imageInstance = new Kinetic.Image({     x: 0,     y: 0,     image: imgObj,     width: 200,     height: 138,     name: 'image', }); imgObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth- vader.jpg';  imageGroup.add(imageInstance); addAnchor(imageGroup, 0, 0, 'topLeft'); addAnchor(imageGroup, 200, 0, 'topRight'); addAnchor(imageGroup, 200, 138, 'bottomRight'); addAnchor(imageGroup, 0, 138, 'bottomLeft');  imageGroup.on('dragstart', function() {     update(this);     rotate(this);     this.moveToTop(); });  stage.add(layer); stage.draw(); }  function writeMessage(messageLayer, message) { var context = messageLayer.getContext(); messageLayer.clear(); context.font = '18pt Calibri'; context.fillStyle = 'black'; context.fillText(message, 10, 25); }  loadImages(sources, initStage); initStage();