在画布上调整大小和重新定位图像调整大小

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