拖动&调整CSS变换元素的大小 [英] Dragging & Resizing CSS Transformed Elements

问题描述

例如，我们在矩形上设置 -vendor-transform：rotate（40deg） css属性< div>

If for instance, we set a -vendor-transform: rotate(40deg) css attribute on a rectangle <div>, all the sudden dragging and resizing becomes very weird and flawed.

下面是一个简单的jQueryUI示例：http://jsfiddle.net/Ja4dY/1/

Here is an example with a simple jQueryUI: http://jsfiddle.net/Ja4dY/1/

您会注意到，如果您拖动或当转换时调整矩形的大小，它将向上或向下跳动，并且光标不会保留在正确的位置。在我的实际代码中，我使用自定义代码调整大小和拖动，但我遇到了同样的问题。

You will notice, that if you drag or resize that rectangle when transformed, it will jump up or down and the cursor will not remain in the correct place. In my real code I'm using custom code for resizing and dragging, however I encountered the same problems.

当然，问题元素将改变。因此，左侧可以是右侧，顶部获得底部和中间的东西，并且Javascript代码仍然处理每个方向，因为它不会被转换。

Well, of course the "problem" is that the direction of an Element will change. So left can be right, top gets bottom and something inbetween and the Javascript code still handles each direction as it would be not transformed.

，问题：我们如何补偿转换的 / 元素？元素？

So, the question: How can we compensate transformed / rotated Elements ?

推荐答案

您可以获取应用于元素的当前转换矩阵使用getComputedStyle（）。您可以使用它将当前鼠标位置转换为其在转换空间中的位置，并查看单击/拖动事件是否在元素边界和/或角内。良好的资源：

You can get the current transformation matrix that is applied to an element by using getComputedStyle(). You can use this to transform the current mouse position to its position in transformed space and see whether the click/drag events are within the element boundary and/or corners. Good resources for this:

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.eleqtriq.com/2010 / 05 / css-3d-matrix-transformations /

BTW，正如你所遇到的，这是不平凡的代码。我们必须为Sencha Animator做它，它是一个野兽。

BTW, as you're experiencing, this is non-trivial to code. We had to do it for Sencha Animator, and it was a beast.

这篇关于拖动&调整CSS变换元素的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！