JSFiddle - React, Tailwind, and code Playground
HTML
<div id="log"></div>
JavaScript
function () {
var paper = Raphael(0, 0, '100%', '100%'),
img = paper.image('http://xystral.sfblogs.net/files/2010/09/the-a-team-photo.jpg', 100, 100, 250, 250);
var dragging = false;
var rotate = false;
var start = function () {
this.ox = this.attr('x');
this.oy = this.attr('y');
this.ow = this.attr('width');
this.oh = this.attr('height');
this.toFront();
dragging = true;
},
move = function (dx, dy) {
$('#log').html('dx: '+dx+ ' dy: ' + dy + ' action: ' + this.action + ' angle: ' + this.angle);
switch(this.action) {
case 'move':
this.attr({x: this.ox + dx, y: this.oy + dy});
break;
case 'resize':
dy = dx; //aspect ratio
if(this.oh + dy > 5) {
this.attr({height: this.oh + dy});
}
if(this.ow + dx > 5) {
this.attr({width: this.ow + dx});
}
break;
case 'rotate':
this.angle = Math.atan2(dx,-dy);
this.rotate(this.angle);
$('#log').html('dx: '+dx+ ' dy: ' + dy + ' action: ' + this.action + ' angle: ' + this.angle);
break;
}
},
up = function () {
dragging = false;
this.action='';
};
img.drag(move, start, up);
img.mousemove(function(e) {
if (this.action=='rotate') {return false;}
$('#log').html('layerX: '+e.layerX+ ' layerY: ' + e.layerY + ' imgWidth: ' + this.attr('width'));
var mouseX = e.layerX,
mouseY = e.layerY,
imgX = this.attr('x'),
imgY = this.attr('y'),
imgWidth = this.attr('width'),
imgHeight = this.attr('height');
if (Math.abs(mouseX - imgX -...