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