如何获得可旋转 div 的四个角旋转手柄 ..？答案

【问题标题】：How to get four corners rotate handle for a rotatable div..?如何获得可旋转 div 的四个角旋转手柄 ..？
【发布时间】：2016-11-22 10:42:21
【问题描述】：

我有一个 div，使用 Jquery UI rotatable 插件来旋转 div。我怎样才能让这个带有四个绿色div角的旋转手柄旋转。？

$('.box').draggable().rotatable();

这是示例图像，在黑色圆形标记中我需要放置其他三个可旋转手柄。

Jsfiddle..!中我的示例代码

【问题讨论】：

您想要四个角上的把手？
@theblindprophet.. 是的..
基于此处的文档：github.com/godswearhats/jquery-ui-rotatable 似乎插件不支持此功能。可以通过 CSS 添加它们，但我不知道它是否能够执行旋转。可能想找到一个插件，将其作为选项或默认设置。
@ArunValaven 找到了一个可行的解决方案来添加句柄并使其响应。目前不适用于resizable()，我怀疑这是因为我使用了绝对定位。
@ArunValaven 现在也为resiable() 修复了它。

标签： jquery html css jquery-ui rotation

【解决方案1】：

这将是一个多部分的答案。首先，我们将通过 CSS 添加句柄。其次，我们添加事件绑定，以便这些句柄能够正常工作。

完整的工作示例：https://jsfiddle.net/Twisty/7zc36sug/

HTML

<div class="box-wrapper">
  <div class="box">
  </div>
</div>

我根据文档添加了一个包装器：

您还可以将此插件与内置的 jQuery UI resizable() 和 draggable() 结合使用，尽管后者在应用于其中包含可旋转对象的容器时效果最佳。有关一些示例，请参见演示页面。

CSS

.box {
  border: 2px solid black;
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 27px;
  position: relative;
}

.ui-rotatable-handle {
  background: url("https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/rotate.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 25px;
  width: 25px;
  position: absolute;
  //margin: 100px -27px;
}

.ui-rotatable-handle-sw {
  top: 102px;
  left: -27px;
}

.ui-rotatable-handle-nw {
  top: -27px;
  left: -27px;
}

.ui-rotatable-handle-se {
  top: 102px;
  left: 102px;
}

.ui-rotatable-handle-ne {
  top: -27px;
  left: 102px;
}

我们知道有一个手柄，并且我们知道我们需要 4 个处于不同位置的手柄。所以我们将.ui-rotatable-handle 设置为基本样式。由于.ui-rotatable-handle 是动态添加的，并且是基于父级的，所以我创建了.box position: relative;，然后使用绝对定位来定位句柄。

我们现在有我们的盒子和四个角的 4 个把手。

jQuery

$(function() {
  // Prepare extra handles
  var nw = $("<div>", {
    class: "ui-rotatable-handle"
  });
  var ne = nw.clone();
  var se = nw.clone();
  // Assign Draggable
  $('.box-wrapper').draggable({
    cancel: ".ui-rotatable-handle"
  });
  // Assign Rotatable
  $('.box').rotatable();
  // Assign coordinate classes to handles
  $('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
  nw.addClass("ui-rotatable-handle-nw");
  ne.addClass("ui-rotatable-handle-ne");
  se.addClass("ui-rotatable-handle-se");
  // Assign handles to box
  $(".box").append(nw, ne, se);
  // Assigning bindings for rotation event
  $(".box div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
    $('.box').rotatable("instance").startRotate(e);
  });
});

我们创建了 3 个额外的句柄。
我们使包装器可拖动，并避免我们的句柄成为盒子包装器的可拖动句柄。
我们让盒子可以旋转
添加自定义句柄
绑定每个句柄的mousedown事件触发旋转

简单吧！？哈！如果你想使用这个插件，你需要做的是让它有 4 个角手柄。如果您有任何问题，请发表评论。在实际使用中，您可能会遇到一些有趣的样式问题。

修复可调整大小

更新了 CSS 以更好地相对于改变大小进行定位：

.ui-rotatable-handle-sw {
  bottom: -27px;
  left: -27px;
}

.ui-rotatable-handle-nw {
  top: -27px;
  left: -27px;
}

.ui-rotatable-handle-se {
  bottom: -27px;
  right: -27px;
}

.ui-rotatable-handle-ne {
  top: -27px;
  right: -27px;
}

这将使每个都保持在边距中，并确保 resizable() 对框的更改保持与框大小相关的句柄。

【讨论】：