如何制作一个可以在背景图像上绘制并缩放选定位置的简单脚本。使用 html5 Canvas 缩放背景图像和绘图
最佳答案
Canvas 提供了一种相当简单的方法来使用变换缩放到一个点。
使用
context.translate(x,y)转换到所需的缩放点。 Translate 会将 Canvas 的 [0,0] 原点重置为指定的 [x,y] 坐标。使用
context.scale(sx,sy)将 Canvas 缩放到所需的大小。缩放将导致任何 future 的绘图被调整为指定的 [scaleX,scaleY] 大小。注意:缩放发生在 Canvas 的当前原点(当前原点已通过上面的翻译重置)。使用
context.drawImage(image,-x,-y)以 -x,-y 的偏移量绘制图像和图纸。在保持所需缩放点的同时重绘图像需要偏移量。
演示:http://jsfiddle.net/m1erickson/5kQHb/
在红点处缩小:
放大红点:
示例代码:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color:ivory; }
canvas{border:1px solid red;}
input.vrange1 {height:250px; -webkit-appearance: slider-vertical; writing-mode: bt-lr; }
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var PI=Math.PI;
var PI2=PI*2;
var cw,ch,imgW,imgH,mouseX,mouseY;
var scaleFactor=1.00;
$scaler=$("#scaler");
$scaler.val(scaleFactor);
$scaler.hide();
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/mapSmall.png";
function start(){
cw=canvas.width=imgW=img.width;
ch=canvas.height=imgH=img.height;
ctx.drawImage(img,0,0);
$("#canvas").mousedown(function(e){handleMouseDown(e);});
}
function dot(x,y,color,radius){
ctx.save();
ctx.beginPath();
ctx.arc(x,y,radius,0,PI2);
ctx.closePath();
ctx.fillStyle=color;
ctx.fill();
ctx.restore();
}
function draw(x,y,scale){
ctx.clearRect(0,0,cw,ch);
ctx.save();
ctx.translate(x,y);
ctx.scale(scale,scale);
ctx.drawImage(img,-x,-y);
ctx.restore();
dot(x,y,"red",3);
}
$('#scaler').on('change', function(){
scaleFactor=($(this).val());
draw(mouseX,mouseY,scaleFactor);
});
function handleMouseDown(e){
e.preventDefault();
e.stopPropagation();
if(!mouseX){
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
draw(mouseX,mouseY,1.00);
$("#instructions").text("Change the slider to zoom the map");
$scaler.show();
}
}
}); // end $(function(){});
</script>
</head>
<body>
<h4 id=instructions>Click on the map to select a zoom-point.</h4>
<input type="range" class=vrange id="scaler" value=1.00 min=0.00 max=3.00 step=0.10"><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
关于HTML5 canvas 在背景图像上绘制缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24425367/