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

平行移動 (移動)、スケール、および回転はすべて変換です。

いくつかの深い変換を取得すると、算術演算で元の位置と変換された位置を追跡するのはかなり恐ろしいことになります!

舞台裏では、html キャンバスは行列演算を使用して、変換された四角形がどこに描画されるかを追跡します。

また、マトリックスの累乗を使用して、元の四角形の左上と変換後の四角形の左上との差を追跡することもできます。

行列は、実際には 6 つの数値の配列です。これは、元の変換されていない空間内の 1 点を表す「恒等行列」です。

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 に答える