JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
</div>
JavaScript
var stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 500,
id: "myCanvas",
name: "myCanvas"
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.src = 'http://en.wikipedia.org/wiki/Main_Page#/media/File:Metallica_Damaged_Justice_Tour.jpg';
imageObj.onload = function () { layer.draw();};
var dynamicImg = new Kinetic.Image({
image: imageObj,
x: stage.getWidth() / 2 ,
y: stage.getHeight() / 2,
width: 100, //imageObj.width,
height: 100, // imageObj.height,
draggable: true,
offset: [50,50], //[(imageObj.width/2), (imageObj.height/2)]
dragBoundFunc: function (pos, evt) {
if (evt.shiftKey) {
var x = this.getX() - pos.x;
var y = this.getY() - pos.y;
var radian = Math.PI + Math.atan(y/x);
this.setRotation(radian);
return {
x: this.getX(),
y: this.getY()
}
} else {
return pos;
}
}
});
layer.add(dynamicImg);
stage.add(layer);