Question

如何制作一个可以在背景图像上绘制并缩放所选位置的简单脚本。使用html5画布缩放背景图像和绘图

Answer 1

Canvas提供了一种使用变换缩放到某个点的相当简单的方法。

使用context.translate(x,y)将翻译为所需的缩放点。翻译会将画布的[0,0]原点重置为指定的[x，y]坐标。
使用context.scale(sx,sy)将画布缩放到所需大小。缩放将导致将来的任何绘图调整为指定的[scaleX，scaleY]大小。注意：缩放发生在画布的当前原点（当前原点通过上面的翻译重置）。
绘制图片＆amp;使用context.drawImage(image,-x,-y)偏移量为-x，-y的图形。在保持所需缩放点的同时重绘图像需要偏移。

演示：http://jsfiddle.net/m1erickson/5kQHb/

在红点处缩小：

enter image description here

放大红点：

enter image description here

示例代码：

<!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帆布图画与徒升

1 个答案: