HTML5 画布变换与手动偏移？

Question

关于画布性能经常说的一件事是对上下文状态的更改（如平移、缩放、旋转等）是昂贵的，应该保持在最低限度（例如，通过批处理一起使用相同变换的绘制命令）。

所以我的问题是，当您没有那么多从转换中受益的命令并且您无法真正批量处理它们时，是否最好在转换上使用手动偏移？还是进行适当的转换总是更好？

例如，如果我正在绘制每个图形可能包含 1-5 个多边形的小图形，并且每个图形都需要不同的变换（例如不同的位置和旋转），那么在可能的情况下对每个图形进行完全变换似乎效率低下只需用一点三角函数计算正确的位置。

Answer 1

仅对于平移 (x,y 定位)，您也可以自己计算 x,y，因为无论如何您都必须在绘制时提供它。

对于旋转、缩放等，对单个多边形使用单独的变换——在需要时，变换并不那么昂贵。无论如何，转换主要是在更快的 GPU 上完成的) ;-)

注意：用于context.setTransform(1,0,0,1,0,0)重置单个转换而不是context.save因为context.restore将有保存/重置所有非转换上下文状态（样式等）的额外负担。

有关如何使用转换矩阵跟踪单个转换的示例，请参见下文：

Canvas 允许您context.translate，context.rotate并且context.scale为了在您需要的位置和大小上绘制您的形状。

Canvas 本身使用转换矩阵来有效地跟踪转换。

• 你可以改变画布的矩阵 context.transform
• 您可以使用单独的translate, rotate & scale命令更改 Canvas 的矩阵
• 您可以完全覆盖 Canvas 的矩阵context.setTransform，
• 但是您无法读取 Canvas 的内部转换矩阵——它是只写的。

为什么要使用变换矩阵？

转换矩阵允许您将许多单独的平移、旋转和缩放聚合到一个易于重新应用的矩阵中。

在复杂的动画过程中，您可能会对一个形状应用数十（或数百个）变换。通过使用转换矩阵，您可以（几乎）使用一行代码立即重新应用这几十个转换。

一些示例用途：

• 测试鼠标是否位于已平移、旋转和缩放的形状内

  有一个内置context.isPointInPath测试点（例如鼠标）是否在路径形状内，但与使用矩阵测试相比，这个内置测试非常慢。

  有效测试鼠标是否在形状内涉及获取浏览器报告的鼠标位置并以与形状相同的方式对其进行转换。然后，您可以应用命中测试，就好像形状没有变形一样。

• 重绘已被广泛平移、旋转和缩放的形状。

  .translate, .rotate, .scale您可以在一行代码中应用所有聚合转换，而不是重新应用多个单独的转换。

• 已平移、旋转和缩放的碰撞测试形状

  您可以使用几何学和三角学来计算构成变换形状的点，但使用变换矩阵来计算这些点会更快。

一个转换矩阵“类”

此代码反映了本机context.translate, context.rotate,context.scale转换命令。与原生画布矩阵不同，这个矩阵是可读和可重用的。

方法：

• translate, rotate,scale镜像上下文转换命令，并允许您将转换输入矩阵。矩阵有效地保存了聚合转换。

• setContextTransform获取上下文并将该上下文的矩阵设置为等于此转换矩阵。这有效地将存储在此矩阵中的所有转换重新应用于上下文。

• resetContextTransform 将上下文的转换重置为其默认状态（==未转换）。

• getTransformedPoint 取一个未转换的坐标点并将其转换为转换点。

• getScreenPoint 取一个变换的坐标点并将其转换为未变换的点。

• getMatrix 以矩阵数组的形式返回聚合转换。

代码：

var TransformationMatrix=( function(){
    // private
    var self;
    var m=[1,0,0,1,0,0];
    var reset=function(){ var m=[1,0,0,1,0,0]; }
    var multiply=function(mat){
        var m0=m[0]*mat[0]+m[2]*mat[1];
        var m1=m[1]*mat[0]+m[3]*mat[1];
        var m2=m[0]*mat[2]+m[2]*mat[3];
        var m3=m[1]*mat[2]+m[3]*mat[3];
        var m4=m[0]*mat[4]+m[2]*mat[5]+m[4];
        var m5=m[1]*mat[4]+m[3]*mat[5]+m[5];
        m=[m0,m1,m2,m3,m4,m5];
    }
    var screenPoint=function(transformedX,transformedY){
        // invert
        var d =1/(m[0]*m[3]-m[1]*m[2]);
        im=[ m[3]*d, -m[1]*d, -m[2]*d, m[0]*d, d*(m[2]*m[5]-m[3]*m[4]), d*(m[1]*m[4]-m[0]*m[5]) ];
        // point
        return({
            x:transformedX*im[0]+transformedY*im[2]+im[4],
            y:transformedX*im[1]+transformedY*im[3]+im[5]
        });
    }
    var transformedPoint=function(screenX,screenY){
        return({
            x:screenX*m[0] + screenY*m[2] + m[4],
            y:screenX*m[1] + screenY*m[3] + m[5]
        });    
    }
    // public
    function TransformationMatrix(){
        self=this;
    }
    // shared methods
    TransformationMatrix.prototype.translate=function(x,y){
        var mat=[ 1, 0, 0, 1, x, y ];
        multiply(mat);
    };
    TransformationMatrix.prototype.rotate=function(rAngle){
        var c = Math.cos(rAngle);
        var s = Math.sin(rAngle);
        var mat=[ c, s, -s, c, 0, 0 ];    
        multiply(mat);
    };
    TransformationMatrix.prototype.scale=function(x,y){
        var mat=[ x, 0, 0, y, 0, 0 ];        
        multiply(mat);
    };
    TransformationMatrix.prototype.skew=function(radianX,radianY){
        var mat=[ 1, Math.tan(radianY), Math.tan(radianX), 1, 0, 0 ];
        multiply(mat);
    };
    TransformationMatrix.prototype.reset=function(){
        reset();
    }
    TransformationMatrix.prototype.setContextTransform=function(ctx){
        ctx.setTransform(m[0],m[1],m[2],m[3],m[4],m[5]);
    }
    TransformationMatrix.prototype.resetContextTransform=function(ctx){
        ctx.setTransform(1,0,0,1,0,0);
    }
    TransformationMatrix.prototype.getTransformedPoint=function(screenX,screenY){
        return(transformedPoint(screenX,screenY));
    }
    TransformationMatrix.prototype.getScreenPoint=function(transformedX,transformedY){
        return(screenPoint(transformedX,transformedY));
    }
    TransformationMatrix.prototype.getMatrix=function(){
        var clone=[m[0],m[1],m[2],m[3],m[4],m[5]];
        return(clone);
    }
    // return public
    return(TransformationMatrix);
})();

演示：

该演示使用上面的转换矩阵“类”来：

• 跟踪（==保存）一个矩形的变换矩阵。

• 不使用上下文转换命令重绘转换后的矩形。

• 测试鼠标是否在转换后的矩形内单击。

代码：

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;
    function reOffset(){
        var BB=canvas.getBoundingClientRect();
        offsetX=BB.left;
        offsetY=BB.top;        
    }
    var offsetX,offsetY;
    reOffset();
    window.onscroll=function(e){ reOffset(); }
    window.onresize=function(e){ reOffset(); }

    // Transformation Matrix "Class"

    var TransformationMatrix=( function(){
        // private
        var self;
        var m=[1,0,0,1,0,0];
        var reset=function(){ var m=[1,0,0,1,0,0]; }
        var multiply=function(mat){
            var m0=m[0]*mat[0]+m[2]*mat[1];
            var m1=m[1]*mat[0]+m[3]*mat[1];
            var m2=m[0]*mat[2]+m[2]*mat[3];
            var m3=m[1]*mat[2]+m[3]*mat[3];
            var m4=m[0]*mat[4]+m[2]*mat[5]+m[4];
            var m5=m[1]*mat[4]+m[3]*mat[5]+m[5];
            m=[m0,m1,m2,m3,m4,m5];
        }
        var screenPoint=function(transformedX,transformedY){
            // invert
            var d =1/(m[0]*m[3]-m[1]*m[2]);
            im=[ m[3]*d, -m[1]*d, -m[2]*d, m[0]*d, d*(m[2]*m[5]-m[3]*m[4]), d*(m[1]*m[4]-m[0]*m[5]) ];
            // point
            return({
                x:transformedX*im[0]+transformedY*im[2]+im[4],
                y:transformedX*im[1]+transformedY*im[3]+im[5]
            });
        }
        var transformedPoint=function(screenX,screenY){
            return({
                x:screenX*m[0] + screenY*m[2] + m[4],
                y:screenX*m[1] + screenY*m[3] + m[5]
            });    
        }
        // public
        function TransformationMatrix(){
            self=this;
        }
        // shared methods
        TransformationMatrix.prototype.translate=function(x,y){
            var mat=[ 1, 0, 0, 1, x, y ];
            multiply(mat);
        };
        TransformationMatrix.prototype.rotate=function(rAngle){
            var c = Math.cos(rAngle);
            var s = Math.sin(rAngle);
            var mat=[ c, s, -s, c, 0, 0 ];    
            multiply(mat);
        };
        TransformationMatrix.prototype.scale=function(x,y){
            var mat=[ x, 0, 0, y, 0, 0 ];        
            multiply(mat);
        };
        TransformationMatrix.prototype.skew=function(radianX,radianY){
            var mat=[ 1, Math.tan(radianY), Math.tan(radianX), 1, 0, 0 ];
            multiply(mat);
        };
        TransformationMatrix.prototype.reset=function(){
            reset();
        }
        TransformationMatrix.prototype.setContextTransform=function(ctx){
            ctx.setTransform(m[0],m[1],m[2],m[3],m[4],m[5]);
        }
        TransformationMatrix.prototype.resetContextTransform=function(ctx){
            ctx.setTransform(1,0,0,1,0,0);
        }
        TransformationMatrix.prototype.getTransformedPoint=function(screenX,screenY){
            return(transformedPoint(screenX,screenY));
        }
        TransformationMatrix.prototype.getScreenPoint=function(transformedX,transformedY){
            return(screenPoint(transformedX,transformedY));
        }
        TransformationMatrix.prototype.getMatrix=function(){
            var clone=[m[0],m[1],m[2],m[3],m[4],m[5]];
            return(clone);
        }
        // return public
        return(TransformationMatrix);
    })();

    // DEMO starts here

    // create a rect and add a transformation matrix
    // to track it's translations, rotations & scalings
    var rect={x:30,y:30,w:50,h:35,matrix:new TransformationMatrix()};

    // draw the untransformed rect in black
    ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
    // Demo: label
    ctx.font='11px arial';
    ctx.fillText('Untransformed Rect',rect.x,rect.y-10);

    // transform the canvas & draw the transformed rect in red
    ctx.translate(100,0);
    ctx.scale(2,2);
    ctx.rotate(Math.PI/12);
    // draw the transformed rect
    ctx.strokeStyle='red';
    ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
    ctx.font='6px arial';
    // Demo: label
    ctx.fillText('Same Rect: Translated, rotated & scaled',rect.x,rect.y-6);
    // reset the context to untransformed state
    ctx.setTransform(1,0,0,1,0,0);

    // record the transformations in the matrix
    var m=rect.matrix;
    m.translate(100,0);
    m.scale(2,2);
    m.rotate(Math.PI/12);

    // use the rect's saved transformation matrix to reposition, 
    //     resize & redraw the rect
    ctx.strokeStyle='blue';
    drawTransformedRect(rect);

    // Demo: instructions
    ctx.font='14px arial';
    ctx.fillText('Demo: click inside the blue rect',30,200);

    // redraw a rect based on it's saved transformation matrix
    function drawTransformedRect(r){
        // set the context transformation matrix using the rect's saved matrix
        m.setContextTransform(ctx);
        // draw the rect (no position or size changes needed!)
        ctx.strokeRect( r.x, r.y, r.w, r.h );
        // reset the context transformation to default (==untransformed);
        m.resetContextTransform(ctx);
    }

    // is the point in the transformed rectangle?
    function isPointInTransformedRect(r,transformedX,transformedY){
        var p=r.matrix.getScreenPoint(transformedX,transformedY);
        var x=p.x;
        var y=p.y;
        return(x>r.x && x<r.x+r.w && y>r.y && y<r.y+r.h);
    } 

    // listen for mousedown events
    canvas.onmousedown=handleMouseDown;
    function handleMouseDown(e){
        // tell the browser we're handling this event
        e.preventDefault();
        e.stopPropagation();
        // get mouse position
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
        // is the mouse inside the transformed rect?
        if(isPointInTransformedRect(rect,mouseX,mouseY)){
            alert('You clicked in the transformed Rect');
        }
    }

    // Demo: redraw transformed rect without using
    //       context transformation commands
    function drawTransformedRect(r,color){
        var m=r.matrix;
        var tl=m.getTransformedPoint(r.x,r.y);
        var tr=m.getTransformedPoint(r.x+r.w,r.y);
        var br=m.getTransformedPoint(r.x+r.w,r.y+r.h);
        var bl=m.getTransformedPoint(r.x,r.y+r.h);
        ctx.beginPath();
        ctx.moveTo(tl.x,tl.y);
        ctx.lineTo(tr.x,tr.y);
        ctx.lineTo(br.x,br.y);
        ctx.lineTo(bl.x,bl.y);
        ctx.closePath();
        ctx.strokeStyle=color;
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=512 height=250></canvas>
</body>
</html>

Answer 2

markE 的答案非常好，但这是我最终为自己确定的答案：

\n\n

虽然 - 正如 K3N 在评论中指出的 - 所有绘制操作都经过变换矩阵，但这实际上不是问题。画布状态更改（相对）昂贵 - 这当然包括 setTransform。对每件小事进行 setTransform 调用效率很低，特别是如果它不能节省任何计算（您仍然需要进行三角计算才能将它们传递给 setTransform）。仅当您使用相同的变换进行大量绘图时，性能方面的变换才会带来好处。请记住，计算机非常擅长数学。

\n\n

话虽如此，性能差异足够小，最终最好选择程序员最容易使用的/提供最好的抽象。例如，可能有一些相对于画布原点绘制的函数形式的图形，因此在每个图形之前执行 setTransform 将允许定位图形，而函数本身不需要包含旋转/定位等逻辑。即使用转换将有助于封装。

\n\n

我还想强调 Blindman67 关于如何在单个 setTransform 调用中有效地进行平移、旋转和缩放的评论：

\n\n

\n

我发现设置变换translate\n x、、yrotate r、uniform的最快方法scale如下\n xx=Math.cos(r)*scale;xy=Math.sin(r)*scale;ctx.setTransform(x\xe2\x80\x8c\xe2\x80\x8bx,xy,-xy,xx,x,y);\n这两个三角函数可能看起来很慢，但它们比\n ctx.rotate调用更快。将其用于所有渲染调用，并且您不需要\n 恢复。

\n

\n