Kinetic js drag, drop, resize and rotate image

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();

Leave a Comment