Hi Bubblers,
Im asking for help in creating one plugin, so that I have the knowledge to create more plugins that would be free for the community so that creating interactive apps is easier.
Here is the item I would like to create:
A box that can be rotated
The code for this is:
HTML
Rotate the box using the red handle.
<div class="box">
<div class="rotation-handle">↻</div>
</div>
Javascript
interact(‘.rotation-handle’)
.draggable({
onstart: function(event) {
var box = event.target.parentElement;
var rect = box.getBoundingClientRect();
// store the center as the element has css `transform-origin: center center`
box.setAttribute('data-center-x', rect.left + rect.width / 2);
box.setAttribute('data-center-y', rect.top + rect.height / 2);
// get the angle of the element when the drag starts
box.setAttribute('data-angle', getDragAngle(event));
},
onmove: function(event) {
var box = event.target.parentElement;
var pos = {
x: parseFloat(box.getAttribute('data-x')) || 0,
y: parseFloat(box.getAttribute('data-y')) || 0
};
var angle = getDragAngle(event);
// update transform style on dragmove
box.style.transform = 'translate(' + pos.x + 'px, ' + pos.y + 'px) rotate(' + angle + 'rad' + ')';
},
onend: function(event) {
var box = event.target.parentElement;
// save the angle on dragend
box.setAttribute('data-angle', getDragAngle(event));
},
})
function getDragAngle(event) {
var box = event.target.parentElement;
var startAngle = parseFloat(box.getAttribute('data-angle')) || 0;
var center = {
x: parseFloat(box.getAttribute('data-center-x')) || 0,
y: parseFloat(box.getAttribute('data-center-y')) || 0
};
var angle = Math.atan2(center.y - event.clientY,
center.x - event.clientX);
return angle - startAngle;
}
CSS
body {
font-family: sans-serif;
}
.box {
width: 150px;
height: 100px;
position: relative;
background-color: #4be091;
border-radius: 6px;
}
.rotation-handle {
padding: 3px 4px;
display: table;
position: absolute;
left: 50%;
right: 50%;
bottom: -35px;
background-color: #ff1661;
border-radius: 10rem;
line-height: 1;
text-align: center;
font-weight: bold;
color: #fff;
cursor: move;
}
Ideally it would make more sense to rotate a group so that you can put whatever you want inside and still have to rotational feature.
I believe if I learn how to do this it would give me the tools to create many more things like this (that would always be free to the community) but I need some help getting pointed in the right direction.
I have a background in game development and would like to implement some of the things I learned when I used to create games.
I just don’t know how to turn something like this into a plugin.
Thanks!