1

HTML5で拡大縮小した後にキャンバスの一部を表示する方法

例：

var c =document.getElementById("mycanvas");
var canvas = c.getContext("2d");
canvas.scale(4,4);
    canvas.drawImage(img,0,0);
    canvas.drawImage(img,200,200);

imgいくつかの画像です。

ここで、値をスケーリングしました。これで、キャンバスの左上の領域（左上の画像のみ）が表示されますが、右下の領域（右下の画像のみ）を表示したい場合はどうなりますか？私がそれに与える座標に。どうやってやるの？

誰かplzはこれについて私を助けることができますか？とても感謝しています.....

4

2 に答える 2

0

drawImageは次のように使用できます。

drawImage(
    image,
    sourceX,
    sourceY,
    sourceWidth,
    sourceHeight,
    destinationX,
    destinationY,
    destinationWidth, 
    destinationHeight
 );

必要なソースの領域を決定し、次にそれをキャンバス上に配置する場所を決定します。

ここでいくつかの情報を見つけることができます：MDNDrawイメージのドキュメント

于 2012-10-16T08:14:38.067 に答える
0

スケーリングしている場合は、配置に使用する座標も拡大されることを覚えておく必要があり4ます。画像を単独でスケーリングするには、呼び出しと使用を使用できます...200 * 4200drawImage(img,x,y,width,height)

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
var scale = 4;
var width = img.width * scale;
var height = img.height * scale;
ctx.drawImage(img, 0, 0, width, height);
ctx.drawImage(img, 200, 200, width, height);

または、座標を倍率で割る必要があります...

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
var scale = 4;
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0);
ctx.drawImage(img, 200 / scale, 200 / scale);

クリッピングを使用して画像が象限にとどまるようにする後者のアプローチを示すフィドルをまとめましたhttp://jsfiddle.net/ujtd2/

状態スタックを使用して編集すると、自分で変換を行う必要がなくなります。

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
var scale = 4;

// add a new item to the context state stack
ctx.save();
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0);

// discard the previous state be restoring the last state
// back to normal scale
ctx.restore();

// Set translation
ctx.translate(200, 200);

// Repeat for second image
ctx.save();
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0);

私は今フォローします。特定の座標からシーンの一部をズームインして表示するには、translate を使用します。

ctx.scale(4, 4);
ctx.translate(-200, -200);
ctx.drawImage(img, 0, 0);
ctx.drawImage(img, 200, 200);

これは 4 倍に拡大し、描画座標を上下に 200 ピクセルずつ変換することで、可視部分を上下に 200 ピクセルずつ移動します。

于 2012-10-16T08:17:41.710 に答える