Question

我周围环顾四周，似乎无法找到我想要做的事情。

正如标题所暗示的那样，我只想用CanvasRenderingContext2D.setTransform()模拟三维正交旋转 - 没有透视，只是正交旋转。

到目前为止我已尝试过：

在2D平面中围绕45 *矢量旋转很简单，我使用

setTransform(scaleFactor, skewAngle, skewAngle, scaleFactor, 0.5*width, 0.5*height)

就像看起来一样，画布的中心，相同的x和y倾斜给出了正确的旋转，但是我无法确定比例因子，因为当倾斜变为无穷大时旋转角度（skewAngle）接近90 *。

我需要什么：围绕2D平面中的任何矢量的旋转和适当缩放，例如，基于垂直向量（mousePosition - centerCanvas） - 向鼠标光标方向移动（或远离）。

如果有人能为我打破这个，我会非常感激。如果有一篇专门解释这一点的文章，那也很棒。

提前致谢！

Answer 1

好吧，我把它解决了。不太危险。

我使用setTransform()进行了艰难的处理。

这是一个简单的例子： //使用processing.js 背景（0）;

// rotate by 5 degrees each frame
a = (a + 5) % 360;
var c = Math.cos(a * Math.PI / 180);

// processing.js provides mouseX and mouseY, width and height
var dx = mouseX - 0.5*width,
    dy = mouseY - 0.5*height;

// orthogonal to mouse position from center position
var b = Math.atan2(-dx, dy);

var ctx = this.externals.context;

ctx.save();
ctx.translate(0.5 * width, 0.5 * height);
ctx.rotate(b);
ctx.scale(1, c);
ctx.rotate(-b);
text("G", 0, 0);
ctx.restore();

ctx.save();
ctx.scale(1e-1, 1e-1);
// text size is 100px, position is centered at x, y
text("angle: " + a, 250, 50);
ctx.restore();

3d使用html画布变换的2d纹理的正交旋转

1 个答案: