1 scale之后
1-1元素宽高
获取元素真实宽高
原生写法
var rect = obj.getBoundingClientRect();
var pw = rect.width;
var ph = rect.height;
1-2
元素的位置
此时通过jquery position获取到的left top值要乘以scale的倍数
或者
var rect = obj.getBoundingClientRect();
var left = rect.left;
var top = rect.top;
1-3 因为transform scale之后 jquery ui 的 draggable方法失灵
1-4
transform scale 之后要translate
translate的大小为
var translateX = elem.outerWidth() * (scaleRatio - 1) / 2;
var translateY = elem.outerHeight() * (scaleRatio - 1) / 2;
1-5 translate 之后要设置margin值
"margin-left": -translateX + "px"
"margin-top": -translateY + "px"
1-6 有一个打包的问题
网上看很多人遇到了 transform : scale(2,2) translate(200px,200px);
在css中这样写之后,使用webpack打包后说是scale不再生效,建议使用transform :martix(2,2,200,200)
。
至此,踩坑结束。
2 rotate 之后
你就要运用数学方法了
使用外切矩形的宽高作为宽高计算
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。