计算画布上下文.基于4x4矩阵的setTransform矩阵

calculate canvas context.setTransform matrix based on a 4x4 matrix

本文关键字:setTransform 矩阵 4x4 上下文 基于 计算      更新时间:2023-09-26

我正在尝试使用javascript和html5画布(没有webGL)模拟位图的3d旋转。我认为我们要做的是计算画布上下文的二维矩阵的项。setTransform方法,但我无法弄清楚如何从代表所需变换的一般4x4矩阵或像素中位图的所需最终位置理想地获得该矩阵(我可以计算所需的最终坐标,以像素投影4x4矩阵和项目视图矩阵的角)。

在这个小提琴中,我一直在摆弄操纵几个角度(代表具有两个自由度的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

另一个更具数学强度的解决方法是将图像映射到透视三角形上:

http://mathworld.wolfram.com/PerspectiveTriangles.html

祝你项目顺利!: -)