我正在尝试使用 javascript 和 html5 canvas(没有 webGL)来模拟位图的 3d 旋转。我认为要走的路是计算 Canvas context.setTransform 方法的 2D 矩阵的项,但我无法弄清楚如何从表示所需变换或所需最终位置的通用 4x4 矩阵理想地获取该矩阵位图的像素(我可以计算所需的最终像素坐标,用 4x4 矩阵和项目 View 矩阵投影 Angular )。
在这个 fiddle 中,我一直在操纵几个 Angular (表示具有两个自由度的 3d 相机的旋转)来计算 setTransform 矩阵的剪切项,但我确实无法清楚地了解要遵循的理想程序。 http://jsfiddle.net/cesarpachon/GQvp2/
context.save();
/*alpha affects the scaley with sin
*/
var skew = Math.sin(alpha);
var scalex = 1;//(1-skew) +0.01;//Math.sin(alpha);
var scaley = 1;//Math.abs(Math.sin(alpha))+0.01;
var offx = 0;
var offy = 0;
var skewx = Math.sin(alpha);
var skewy = Math.sin(beta);
context.setTransform(scalex,skewx,skewy,scaley,offx,offy);
context.drawImage(image, 0, 0, height, width);
context.restore();
最佳答案
将 3d 投影到 2d 时的一个严重限制是 2d 变换仅使用仿射矩阵。
这意味着任何二维变换都将始终产生平行四边形。
3D 透视通常至少需要一个梯形结果(在仿射变换中无法实现)。
底线:您无法始终从 2d 变换中获得 3d 视角。
一种解决方法是使用图像切片将图像适应 3d 坐标
http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html
另一个数学上更密集的解决方法是将图像映射到透视三 Angular 形上:
http://mathworld.wolfram.com/PerspectiveTriangles.html
祝您的项目顺利! :-)
关于javascript - 基于4x4矩阵计算canvas context.setTransform矩阵,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24554526/