Question

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.strokeRect(50,50,200,200);
ctx.translate(100,100);
ctx.scale(0.751,0.751);
ctx.translate(-100,-100);
ctx.strokeRect(50,50,200,200);

在画布中绘制一个矩形，缩放和翻译的矩形的起始位置与原始不同。

是否有任何计算可以找到原始矩形和缩放矩形的起始位置之间的差异。我可以得到缩放矩形的差异或起始位置

Answer 1

一旦缩放了画布，随后的每个操作都将被缩放，包括变换所以你的第二次翻译：

ctx.translate(-100,-100);

实际上是在原始坐标系中执行（-75.1，-75.1）的平移。

Answer 2

翻译（移动），缩放和旋转都是变换。

一旦你获得了一些深度变换，用算术跟踪原始变换位置变得非常可怕！

在幕后，html canvas使用矩阵数学来跟踪绘制变换矩形的位置。

您还可以使用矩阵的力量来跟踪原始矩形的左上角和变换后的矩形的左上角之间的差异。

矩阵实际上是一个包含6个数字的数组。这是“单位矩阵”，表示原始未变换空间中的一个点。

var matrix=[1,0,0,1,0,0];

假设您的原始矩形位于X / Y（在您的情况下为50/50）。

var x=50;
var y=50;

使用此包装函数来转换和矩阵跟踪，而不仅仅是ctx.translate（100,100）。

function translate(translateByX,translateByY){
    matrix[4] += matrix[0] * translateByX + matrix[2] * translateByY;
    matrix[5] += matrix[1] * translateByX + matrix[3] * translateByY;
    ctx.translate(translateByX,translateByY);
}

回到原始空间后，您已使用矩阵跟踪变换后的矩形的位置。

您可以像这样获得转换后的X / Y（但在原始空间中）的位置：

function getXY(){
    newX = x * matrix[0] + y * matrix[2] + matrix[4];
    newY = x * matrix[1] + y * matrix[3] + matrix[5];
    return({x:newX,y:newY});
}

enter image description here

这是代码和小提琴：http://jsfiddle.net/m1erickson/yuaMs/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // test values
    // objective: track this point into transformed space
    var x=50;
    var y=50;

    // a transform matrix for point x/y
    var matrix=[1,0,0,1,0,0];

    // draw the first rectangle in blue
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.strokeRect(x,y,200,200);

    // do transforms using the wrapped transform functions
    // so the matrix is also tracked
    translate(100,100);
    scale(0.751,0.751);
    translate(-100,-100);


    // draw the second rectangle (now in transformed space)
    ctx.beginPath();
    ctx.strokeStyle="green";
    ctx.strokeRect(x,y,200,200);
    ctx.restore();

    // Note: ctx.restore() has un-transformed our space

    // get our original XY which has been transformed using the matrix
    var transformed=getXY();

    // draw a dot at the transformed x/y
    ctx.beginPath();
    ctx.arc(transformed.x,transformed.y,5,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fillStyle="red";
    ctx.fill();


    // do the translate
    // but also save the translate in the matrix
    function translate(x,y){
        matrix[4] += matrix[0] * x + matrix[2] * y;
        matrix[5] += matrix[1] * x + matrix[3] * y;
        ctx.translate(x,y);
    }

    // do the scale
    // but also save the scale in the matrix
    function scale(x,y){
        matrix[0] *= x;
        matrix[1] *= x;
        matrix[2] *= y;
        matrix[3] *= y;    
        ctx.scale(x,y);
    }

    // do the rotate
    // but also save the rotate in the matrix
    function rotate(radians){
        var cos = Math.cos(radians);
        var sin = Math.sin(radians);
        var m11 = matrix[0] * cos + matrix[2] * sin;
        var m12 = matrix[1] * cos + matrix[3] * sin;
        var m21 = -matrix[0] * sin + matrix[2] * cos;
        var m22 = -matrix[1] * sin + matrix[3] * cos;
        matrix[0] = m11;
        matrix[1] = m12;
        matrix[2] = m21;
        matrix[3] = m22;   
        ctx.rotate(radians);
    }

    // get the transformed point from the matrix
    function getXY(vertex){
        newX = x * matrix[0] + y * matrix[2] + matrix[4];
        newY = x * matrix[1] + y * matrix[3] + matrix[5];
        return({x:newX,y:newY});
    }

}); // end $(function(){});
</script>

</head>

<body>
    <p>Blue=drawn in original space</p>
    <p>Green=drawn transformed space</p>
    <p>Red=drawn in original space but tracked with matrix!</p>
    <p id="newXY">Tracked x/y=</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

两个图像之间的差异在html5画布中开始

2 个答案: