イメージをキャンバスにサイズ変更して再配置するサイズ変更

Question

イメージをキャンバス上に描画し、その座標を使用しています。例えば;

var data = { 
x: 100, y: 100, // the coord when the image drawn 
src: imguri, 
scale: 1.6 // the scale when the image drawn 
} 

以下のようなズーム機能。私はキャンバスのサイズが変更されたとき、それは/アウトでズームされているように見えるように画像のサイズを変更して再位置はどうすればよい

var scale = 1.6, width = canvas.width, height = canvas.height 

function zoom(positiveOrNegative) { 
scale += positiveOrNegative * .2 
canvas.width = width * scale 
canvas.height = height * scale 
loadImage() 
} 

function loadImage() { 
var img = new Image() 
img.src = data.src; 
img.onload = function() { context.drawImage(img, data.x, data.y) } 
} 

https://jsfiddle.net/bbuv53u6/

？

Answer 1

このメソッドを使用して位置値を取得します。

は、あなただけの

var posX = 10 

この変数が固定されて置くが、場合は、変数の使用方法使用いけない場合：この場合

VIEW.W(2) // this is 2% from window width . 

をごリサイズ上の任意の計算の必要はありません。 また、ズームの効果がない場合は、カンバスのタグ要素のサイズを変更するだけです。ズーム用

手順：

//context.save(); 
    context.translate(x , y); 
    context.scale(scale, scale); 
    //context.restore(); 

相続人のオブジェクト：

var VIEW = { 

W : function(per){ 

    if (typeof per === 'undefined'){ 
     return window.innerWidth; 
    }else{ 
     return window.innerWidth/100 * per; 
    } 

}, 
H : function(per){ 

    if (typeof per === 'undefined'){ 
     return window.innerHeight; 
    } 
    else{ 
     return window.innerHeight/100 * per; 
    } 

}, 

ASPECT : function(){ 

    return window.innerWidth/window.innerHeight; 

}, 

}; 

ボーナスリンク：

Zooming with canvas