我想让一个“输入”对象分别通过不同的按钮旋转和调整大小，例如，如果我按“button1”，则该对象将变为可调整大小(通过查询 ui 可调整大小)，如果我按“button2” ，物体将顺时针旋转90度。
但是我发现如果我按下按钮2来旋转对象，然后我按下按钮1来调整obj的大小，obj调整大小的方向会奇怪地改变，因为obj的轴已经通过“旋转”功能改变了(我猜)，例如，如果我将其缩放到左侧，则 obj 会缩放到右侧...，我不知道如何处理这个问题，有人可以给我一些建议吗？我非常感谢你。:)
我尝试用谷歌搜索一些由“旋转”和“可调整大小”同时引起的错误，但在我看来，没有任何信息可以解决这个问题。
您可以尝试:
<!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”中。 请按“旋转”，然后按“调整大小”，然后尝试调整图片大小，你会发现一些奇怪的东西。
最佳答案
如果可能的话，我建议不要将原生 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>对于数学部分，最好将它们包装在 ( 和 ) 中，以确保数学首先完成，然后连接到字符串。
关于javascript - 我应该如何处理两个函数 "ui.resizable"和 "css.rotate"的问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57855835/