这可能更多是数学问题,但是我正在寻找任何技巧/窍门来完成此操作。首先-我正在使用我们的内部图形引擎,该引擎与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可以使这项工作完美进行。我不知道为什么高度与高度有关,但是确实如此。