Resize div mit Ziehpunkt beim Drehen
Ich konnte ähnliche Fragen zu jQuery UI lib finden, oder nur CSS ohne Ziehpunkt, aber nichts mit reiner Mathematik.
Was ich versuche durchzuführen, ist eine veränderbare und drehbare div zu haben. So weit so einfach und ich könnte es tun.
Aber es wird komplizierter, wenn es gedreht wird. Der Ziehpunkt für die Größenänderung berechnet in umgekehrter Reihenfolge: Er verkleinert die Größe, anstatt sie beim Ziehen von der Form zu vergrößern.
Abgesehen von der Berechnung möchte ich in der Lage sein, den Cursor des Ziehpunkts für die Größenänderung entsprechend der Drehung zu ändern, um immer einen Sinn zu ergeben. Zu diesem Zweck überlegte ich, in welchem Quadranten sich das Größenänderungshandle befindet, und wendete eine Klasse an, um den Cursor über CSS zu ändern.
Ich möchte das Rad nicht neu erfinden, aber ich möchte einen schlanken Code und eine einfache Benutzeroberfläche haben. Meine Anforderung ist also jQuery, aber sonst nichts. Keine jQuery-Benutzeroberfläche. Ich könnte mich entwickeln, bis dies erreicht ist, aber es wird mir jetzt zu mathematisch. Ich stecke ziemlich fest, deshalb brauche ich deine Hilfe, um festzustellen, wann die Drehung ausreicht, um die Berechnung rückgängig zu machen.Eventually Ich suche nach UX-Verbesserungen, wenn jemand eine Idee oder bessere Beispiele hat, die er mir zeigen kann!
Hier ist mein Code und ein Codepen zum Ausprobieren:http: //codepen.io/anon/pen/rrAWJ
<html>
<head>
<style>
html, body {height: 100%;}
#square {
width: 100px;
height: 100px;
margin: 20% auto;
background: orange;
position: relative;
}
.handle * {
position: absolute;
width: 20px;
height: 20px;
background: turquoise;
border-radius: 20px;
}
.resize {
bottom: -10px;
right: -10px;
cursor: nwse-resize;
}
.rotate {
top: -10px;
right: -10px;
cursor: alias;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function()
{
new resizeRotate('#square');
});
var resizeRotate = function(targetElement)
{
var self = this;
self.target = $(targetElement);
self.handles = $('<div class="handle"><div class="resize" data-position="bottom-right"></div><div class="rotate"></div></div>');
self.currentRotation = 0;
self.positions = ['bottom-right', 'bottom-left', 'top-left', 'top-right'];
self.bindEvents = function()
{
self.handles
//=============================== Resize ==============================//
.on('mousedown', '.resize', function(e)
{
// Attach mouse move event only when first clicked.
$(document).on('mousemove', function(e)
{
var topLeft = self.target.offset(),
bottomRight = {x: topLeft.left + self.target.width(), y: topLeft.top + self.target.height()},
delta = {x: e.pageX - bottomRight.x, y: e.pageY - bottomRight.y};
self.target.css({width: '+=' + delta.x, height: '+=' + delta.y});
})
.one('mouseup', function(e)
{
// When releasing handle, round up width and height values :)
self.target.css({width: parseInt(self.target.width()), height: parseInt(self.target.height())});
$(document).off('mousemove');
});
})
//============================== Rotate ===============================//
.on('mousedown', '.rotate', function(e)
{
// Attach mouse move event only when first clicked.
$(document).on('mousemove', function(e)
{
var topLeft = self.target.offset(),
center = {x: topLeft.left + self.target.width() / 2, y: topLeft.top + self.target.height() / 2},
rad = Math.atan2(e.pageX - center.x, e.pageY - center.y),
deg = (rad * (180 / Math.PI) * -1) + 135;
self.currentRotation = deg;
// console.log(rad, deg);
self.target.css({transform: 'rotate(' + (deg)+ 'deg)'});
})
.one('mouseup', function(e)
{
$(document).off('mousemove');
// console.log(self.positions[parseInt(self.currentRotation/90-45)]);
$('.handle.resize').attr('data-position', self.positions[parseInt(self.currentRotation/90-45)]);
});
});
};
self.init = function()
{
self.bindEvents();
self.target.append(self.handles.clone(true));
}();
}
</script>
</head>
<body>
<div id="all">
<div id="square"></div>
</div>
</body>
</html>
Danke für die Hilfe