Блог

Главная - Вопросы по программированию - Рисование на холсте HTML5 на фоновом изображении с увеличением

Рисование на холсте HTML5 на фоновом изображении с увеличением

#html #canvas #paint

#HTML #холст #Краски

Вопрос:

как создать простой скрипт, который мог бы рисовать на фоновом изображении и увеличивать выбранную позицию. масштабирование фонового изображения вместе с рисованием с использованием холста html5

Ответ №1:

Canvas предлагает довольно простой способ увеличить масштаб до точки с помощью преобразований.

  • Переведите в нужную точку масштабирования с помощью context.translate(x,y) . Translate сбросит [0,0] начало координат холста до указанной координаты [x, y].

  • Масштабируйте холст до нужного размера с помощью context.scale(sx,sy) . Масштабирование приведет к тому, что все будущие рисунки будут изменены до указанного размера [scaleX, scaleY]. Примечание: Масштабирование происходит в текущем начале координат холста (текущее начало координат было сброшено с помощью translate выше).

  • Нарисуйте изображение и рисунки со смещением -x, -y, используя context.drawImage(image,-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>