0 
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);

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

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

4

2 回答 2

0

一旦你缩放了你的画布，接下来的每一个操作都会被缩放，包括变换。
所以你的第二个翻译：

ctx.translate(-100,-100);

实际上是在原始坐标系中执行 (-75.1, -75.1) 的平移。

于 2013-05-17T15:42:43.777 回答
0

平移（移动）、缩放和旋转都是变换。

一旦你进行了一些深入的变换，用算术跟踪原始位置和变换位置就会变得非常可怕！

在幕后，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});
}

在此处输入图像描述

这是代码和小提琴：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>
于 2013-05-17T17:12:57.227 回答