JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<svg></svg>
CSS
html, body {
background-color: lightgray;
}
svg {
background-color: white;
}
rect {
fill: lightblue;
}
JavaScript
var rotating = false;
var RECT_WIDTH = 100,
RECT_HEIGHT = 50;
var CTRL_WIDTH = 7,
CTRL_HEIGHT = 7;
var CTRL_X = (CTRL_WIDTH / 2),
CTRL_Y = (CTRL_HEIGHT / 2);
var svg = d3.select('svg');
svg.attr('width', 500)
.attr('height', 500);
var dragRectangle = d3.behavior.drag()
.on('dragstart', function() {
var self = d3.select(this);
if (d3.select(event.target).attr('id') == 'rotator') {
rotating = true;
}
})
.on('drag', function() {
var self = d3.select(this);
if (rotating) {
var mainRect = self.select('#mainRect');
var curX = parseInt(d3.transform(self.attr("transform")).translate[0]),
curY = parseInt(d3.transform(self.attr("transform")).translate[1]);
var curWidth = parseInt(mainRect.attr('width')),
curHeight = parseInt(mainRect.attr('height'));
var curCenter = getCenter(curX, curY, curWidth, curHeight);
var eP = {
x: d3.event.x,
y: d3.event.y
};
var newRotation = getRotation(eP, curCenter);
self.attr('transform',
'translate(' + curX + ', ' + curY + ') rotate(' + newRotation + ', 50, 25)'
);
}
})
.on('dragend', function() {
var self = d3.select(this);
rotating = false;
});
function getCenter (x, y, w, h) {
return {
x: (x + (w / 2)),
y: (y + (h / 2))
};
}
function getRotation(eP, cP) {
return toDegrees(Math.atan2((eP.y - cP.y), (eP.x - cP.x)));
}
function toDegrees(angle) {
return angle * (180 / Math.PI);
}
var newGroup = svg.append('g')
.attr('transform', 'translate(' + (250 - (RECT_WIDTH / 2)) + ', ' + (250 - (RECT_HEIGHT / 2)) + ')')
.attr('angle', 0)
.call(dragRectangle);
var newRect = newGroup.append('rect')
.attr('id', 'mainRect')
.attr('width', RECT_WIDTH)
.attr('height', RECT_HEIGHT)
var controllerGroup = newGroup.append('g');
var rotateController = controllerGroup.append('rect')
.attr('id', 'rotator')
.attr('x', ((RECT_WIDTH / 2) - CTRL_X))
.attr('y',...