Question

我要使“输入”对象分别通过不同的按钮旋转和调整大小，例如，如果按“ button1”，则对象将变为可调整大小（通过查询ui resizable），如果按“ button2” ，物体将顺时针旋转90度。

但是我发现如果按下button2来旋转对象，然后按下button1来调整obj的大小，则由于obj的轴已经被“ rotate”功能改变了，所以obj调整大小的方向将发生奇怪的变化，例如，如果我将其向左缩放，则obj会向右缩放...，我不知道要解决此问题，有人可以给我一些建议吗？我感激不尽。：） < / p>

我试图同时搜索由“旋转”和“可调整大小”引起的一些错误，但是在我看来，没有任何信息可以解决此问题。

您可以尝试：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<!please import query and query ui resizable>
<script src="js檔/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="js檔\jquery-ui.custom\jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js檔\jquery-ui.custom\jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">


</head>
<body >
    <div id="1" style="position:absolute;top:150px;left:150px;border:2px black solid">
        <input id="2" type="image" src="種子社群街區/房屋切片/實際大小/房屋6(96.25X297.32px).png" style="width:150px;height:100px">
    </div>
    <button id="3" type="button">rotate</button>
    <button id="4" type="button">resize</button>

</body >
<script>
function resi(){
    $("#2").resizable();
}
function rota(){
    var w = $("#1").width();
    var h = $("#1").height();
    var di=Math.abs(h-w);
    var obj=document.getElementById("1");
    obj.style.transform="rotate(270deg) translateY("+0.5*di+"px) translateX("+-0.5*di+"px)";

}

document.getElementById("3").addEventListener("click",function(){rota()});
document.getElementById("4").addEventListener("click",function(){resi()});

</script>
</html>

您可以将所需的任何图片放在输入的“ src”中。请按“旋转”，然后按“调整大小”，然后尝试调整图片的大小，您会发现有些奇怪。

Answer 1

如果可能的话，我建议不要将本机JavaScript与jQuery混合使用。这是一个基本示例。

$(function() {
  function resi() {
    $("#el-2").resizable();
  }

  function rota() {
    var w = $("#el-1").width();
    var h = $("#el-1").height();
    var di = Math.abs(h - w);
    var obj = $("#el-1");
    obj.css("transform", "rotate(270deg) translateY(" + (0.5 * di) + "px) translateX(" + (-0.5 * di) + "px)");
  }

  $("#el-3").click(rota);
  $("#el-4").click(resi);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="el-1" style="position:absolute;top:150px;left:150px;border:2px black solid">
  <input id="el-2" type="image" src="" style="width:150px;height:100px">
</div>
<button id="el-3" type="button">rotate</button>
<button id="el-4" type="button">resize</button>

对于数学部分，最好将它们包装在(和)中，以确保首先完成数学运算，然后将其连接到字符串。

如何使用两个函数“ ui.resizable”和“ css.rotate”处理问题？

1 个答案: