【发布时间】：2018-07-17 07:04:38
【问题描述】：
我可以找到涉及 jQuery UI lib 的类似问题，或者只有 css 没有可拖动的句柄，但没有纯数学。
我尝试执行的是拥有一个可调整大小和可旋转的 div。到目前为止很容易，我可以做到。
但旋转时会变得更复杂，调整大小手柄以相反的方式进行计算：当拖离形状时它会减小而不是增加大小。
除了计算之外，我希望能够根据旋转来更改调整大小手柄的光标以始终有意义。 为此，我正在考虑检测哪个象限是调整大小句柄并应用一个类来通过 css 更改光标。
- 我不想重新发明轮子，但我想要一个轻量级的代码和简单的 UI。所以我的要求是jQuery，但没有别的。没有 jQuery UI。
- 我可以一直发展到实现这一目标，但现在它对我来说太数学化了。我很困惑，这就是为什么我需要你的帮助来检测旋转何时足以使计算反转。
如果有人有想法或更好的例子给我看，我最终会寻求 UX 改进！
这是我的代码和一个 Codepen 可以尝试：http://codepen.io/anon/pen/rrAWJA
<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>
感谢您的帮助！
【问题讨论】：
-
将鼠标位置转换为矩形的局部坐标系（通过其逆变换），最终得到基本情况，您似乎已经很好地处理了。
-
感谢您的帮助。但是你如何检测它何时必须是反向的，你必须检测我们是否在某个象限中？
-
为什么一定要检测？它将永远是相反的。如果它没有被变换（即变换是单位矩阵），那么逆矩阵也将是单位矩阵。
-
感谢您的支持，但我需要更多帮助，我编辑了我的问题并开始了赏金。你能帮我编辑我的代码或一个例子给我看吗？
标签： javascript jquery math