CSS3变换后获取div的实际像素坐标

Question

是否可以获得<div /> 的四个实际角坐标，该坐标已使用scale、skew 和rotate 等CSS3 属性进行转换？

示例：

在 CSS3 转换之前的坐标是

x1y1: 0,0
x1y2: 0,200
x2y1: 200,0
x2yw: 200,200

div 看起来像这样：

经过一点 CSS3 魔术transform: skew(10deg, 30deg) rotate(30deg) scale(1, 2); 它看起来像这样：

如何获取实际角（不是边界框）的坐标（使用 javascript）？ 非常感谢任何帮助。

Answer 1

您可以使用 .getBoundingClientRect() 找到元素相对于窗口的新位置

Answer 2

经过数小时尝试计算所有变换并几乎绝望地放弃后，我想出了一个简单而天才的小技巧，它非常容易获得变换后<div />的角点

我刚刚在 div 内添加了四个手柄，它们位于角落但不可见：

<div id="div">
  <div class="handle nw"></div>
  <div class="handle ne"></div>
  <div class="handle se"></div>
  <div class="handle sw"></div>
</div>

---

.handle {
    background: none;
    height: 0px;
    position: absolute;
    width: 0px;
}   
.handle.nw {
    left: 0;
    top: 0;
}   
.handle.ne {
    right: 0;
    top: 0;
}   
.handle.se {
    right: 0;
    bottom: 0;
}       
.handle.sw {
    left: 0;
    bottom: 0;
}           

现在使用 jQuery（或纯 js）检索位置是小菜一碟：

$(".handle.se").offset()

Answer 3

我向您推荐这个网站：http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/，尤其是“关于矩阵的其他有趣事实”部分...

但正如 Egor Nepomnyaschih 指出的那样，您只需为每个转换实现微积分并将它们链接起来。

我已经根据您的示例实现了一个 jsFiddle：http://jsfiddle.net/pvS8X/3/。

请注意：原点是您的图形的中间！如果你想引用左上角，你必须设置这是你的 CSS 代码：

transform-origin: 0 0;

参见。 https://developer.mozilla.org/fr/docs/CSS/transform-origin.

主要的方法是这些：

function skew(p, alpha, beta) {
    var tan_a = Math.tan(alpha * Math.PI / 180),
        tan_b = Math.tan(beta * Math.PI / 180),
        p_skewed = {};

    p_skewed.x = p.x + p.y * tan_a;
    p_skewed.y = p.x * tan_b + p.y;

    return p_skewed;
}


function rotate(p, theta) {
    var sin_th = Math.sin(theta * Math.PI / 180),
        cos_th = Math.cos(theta * Math.PI / 180),
        p_rot = {};

    p_rot.x = p.x * cos_th - p.y * sin_th;
    p_rot.y = p.x * sin_th + p.y * cos_th;

    return p_rot;
}


function scale(p, sx, sy) {
    var p_scaled = {};

    p_scaled.x = p.x * sx;
    p_scaled.y = p.y * sy;

    return p_scaled;
}

其中 p 是 { x: <some_horizontal_pos>, y: <some_vertical_pos>} 形式的对象。

Answer 4

我认为没有相应的 API。以及在 HTML5 <canvas> 中没有转换坐标的 API。但是有一种方法可以手动计算坐标。这是我的 <canvas> 库中的一个转换坐标的类：https://github.com/enepomnyaschih/jwcanvas/blob/master/jwidget/public/jwcanvas/transform.js

您可以将其用作模板。

要初始化坐标系，你应该只实例化一个JW.Canvas.Transform类的对象并应用方法complex。之后，您可以通过transform 方法将其他变换应用于坐标系。矩阵是：

• 翻译：[1, 0, 0, 1, x, y]
• 比例：[x, 0, 0, y, 0, 0]
• 顺时针旋转：[cos(a), sin(a), -sin(a), cos(a), 0, 0]
• 沿 x 倾斜：[1, 0, tan(a), 1, 0, 0]
• 沿 y 倾斜：[1, tan(a), 0, 1, 0, 0]

之后，您将能够通过convert 方法转换坐标。使用back方法计算反向转换对象。