在画布上调整大小和重新定位图像调整大小
问题描述:
我有一个图像可以在画布上绘制其坐标。例如;在画布上调整大小和重新定位图像调整大小
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/
如何调整和重新定位的图像看起来像它的输入/输出时,画布大小被放大?
答
使用此方法获取位置值。
如果你把刚刚
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;
},
};
奖金链接: