在畫布上調整大小和重新定位圖像調整大小

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