如何处理"ui.resizable“和"css.rotate”两个函数的问题？
如何处理"ui.resizable“和"css.rotate”两个函数的问题？
提问于 2019-09-09 22:15:53
我想让“输入”对象分别通过不同的按钮旋转和调整大小，例如，如果我按"button1"，那么对象将变得可调整大小(通过查询ui可调整大小)，如果我按"button2"，对象将顺时针旋转90度。
但是我发现，如果我按button2来旋转object，再按button1来调整obj的大小，obj调整大小的方向会发生奇怪的变化，因为obj的轴已经被" rotate“功能改变了(我猜)，比如，如果我拉它向左缩放，obj就会向右缩放……，这个问题我不知道该怎么处理，有没有人能给我一些建议？：)
我试图在谷歌上搜索一些由“旋转”和“可调整大小”引起的bug，但对我来说似乎没有解决这个问题的信息。
您可以通过以下方式尝试：
<!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“处。请按“旋转”，然后按“调整大小”，并尝试调整图片的大小，你会发现一些奇怪的东西。
回答 1
Stack Overflow用户
发布于 2020-01-01 07:17:43
如果可能的话，我建议不要把原生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>
对于数学部分，最好将它们包装在(和)中，以确保首先完成数学运算，然后连接到字符串。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57855835
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号