如何在不使用转换的情况下保持倾斜的左上角？

Question

这可能更多是数学问题，但是我正在寻找任何技巧/窍门来完成此操作。首先-我正在使用我们的内部图形引擎，该引擎与HTML和CSS非常相似，但是有严格的限制。

长问题，简短的-我如何在知道矩形的左上角，倾斜角和高度的情况下找到矩形的left属性？

我需要将线拉伸到3D曲面中。我试图简单地创建一个矩形，然后添加一个偏斜。我们有偏斜，缩放和翻译。 这就是它。 Skew似乎可以很好地显示我想要的图像，但是我无法获得原点/锚点/所需的任何内容。我认为必须对此采取数学解决方案，但我无法弄清楚。

基本上，我需要根据偏斜的角度，直线的X1属性以及所需的矩形高度，将矩形的左侧位置设置为正确的位置。我的第一个尝试是简单地使用旋转矩阵找到左下角，然后将left属性设置为该点的中点以及该行的原始X1属性。这有点不足-足以令人讨厌。

以下是相关的JS：

function hover(evt) {
    var TgmlDoc = evt.getCurrentTarget().getOwnerDocument();
    var TgmlElem = TgmlDoc.getDocumentElement();
    var rect = TgmlDoc.createElement("Rectangle");

    theLeft = evt.getCurrentTarget().getAttribute('X1');
    theTop = evt.getCurrentTarget().getAttribute('Y1');
    theWidth = evt.getCurrentTarget().getAttribute('X2') - theLeft;
    theHeight = 30;

    theLeft = (+theLeft + theLeft*Math.cos(238*Math.PI/180) - theTop*Math.sin(238*Math.PI/180))/2;

    console.log(theLeft);
    console.log(theTop);
    console.log(theWidth);
    console.log(theHeight);

    var theSkew = TgmlDoc.createElement("SkewX");
    theSkew.setAttribute("Angle","-58");
    rect.appendChild(theSkew);

    rect.setAttribute("Left", theLeft);
    rect.setAttribute("Top", theTop);
    rect.setAttribute("Width", theWidth);
    rect.setAttribute("Height", theHeight);
    rect.setAttribute('Opacity','0.5');
    rect.appendChild(theSkew);
    TgmlElem.appendChild(rect); 
}

结果（原始线为红色）略微偏离：

此外，顺便说一句-使高度等于40可以使这项工作完美进行。我不知道为什么高度与高度有关，但是确实如此。