transform 之后的坑 scale rotate draggable

前端之家收集整理的这篇文章主要介绍了transform 之后的坑 scale rotate draggable前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_502_0@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 之后
你就要运用数学
方法
使用外切矩形的宽高作为宽高计算

猜你在找的程序笔记相关文章