All geek questions in one place

HTML5 Canvas moves an image along a path with coordinates

Is it possible to have an array of coordinates and drag an image only along these coordinates? I would like to use only javascript and not use the javascript library. I continue to scratch my head and look for it forever and cannot find how to do it or if it is possible.

+4
source share
2 answers

Demo: http://jsfiddle.net/m1erickson/7vmML/

enter image description here

Code example:

<!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;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    var isDown=false;
    var startX;
    var startY;

    var points=[];
    points.push({x:10,y:10});
    points.push({x:75,y:100});
    points.push({x:150,y:125});
    points.push({x:125,y:200});

    var imageX=-200;
    var imageY=-200;

    var img=new Image();
    img.onload=start;
    img.crossOrigin="anonymous";
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";
    function start(){
        drawAll();
    }

    function drawAll(){

        ctx.clearRect(0,0,canvas.width,canvas.height);

        ctx.beginPath();
        ctx.moveTo(points[0].x+4,points[0].y+4)
        for(var i=1;i<points.length;i++){
            var pt=points[i];
            ctx.lineTo(pt.x+4,pt.y+4);
        }
        ctx.stroke();
        //
        for(var i=0;i<points.length;i++){
            var pt=points[i];
            ctx.fillRect(pt.x,pt.y,8,8);
        }
        //
        ctx.drawImage(img,imageX,imageY);

    }

    function handleMouseDown(e){
      e.preventDefault();
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      var minDistance=1000;
      var minPoint=-1;
      for(var i=0;i<points.length;i++){
          var pt=points[i];
          var dx=mouseX-pt.x;
          var dy=mouseY-pt.y;
          var distance=Math.sqrt(dx*dx+dy*dy);
          if(distance<minDistance){
              minDistance=distance;
              imageX=pt.x-img.width/2;
              imageY=pt.y-img.height/2;
          }
      }
      drawAll();
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Drag mouse.  Image will snap to nearest point.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Note that in this example, the code uses jQuery to listen for mouse events. If you prefer pure javascript, you can use these event bindings instead:

canvas.onmousedown=handleMouseDown;
canvas.onmouseup=handleMouseUp;
canvas.onmouseout=handleMouseOut;
canvas.onmousemove=handleMouseMove;

:

  function getMousePos(canvas,e) {
      var rect=canvas.getBoundingClientRect();
      return{ x:e.clientX-rect.left, y:e.clientY-rect.top };
  }
+3

, .

:

var points = [10,200, 50,250, 100,100, 150,120, 200,240,
              250,200, 300,120, 350,180, 400,150];

, , :

Snapshot from smooth demo

x y ( - ):

var rect = canvas.getBoundingClientRect(),
    x = e.clientX - rect.left,
    y = e.clientY - rect.top,

x y:

var i = 0,
    pIndex = -1,
    minDist = 999999999,
    dist;

/// get shortest distance
for(; i < points.length; i+=2) {

    /// get distance from current point to mouse x,y
    dist = getDistance(x, y, points[i], points[i+1]);

    /// if less than previous distance, update
    if (dist < minDist) {
        minDist = dist;  /// current low
        pIndex = i;      /// point index
    }
}

pointX = points[pIndex];
pointY = points[pIndex+1];

- , :

function getDistance(x1, y1, x2, y2) {
    var dx = x2 - x1,
        dy = y2 - y1;
    return Math.abs(Math.sqrt(dx * dx + dy * dy));
}

(pointX, pointY).

. , , , ​​ , . , ( , 0, , . ):

,

, , , , 3-4 , .

, , :

var allowMove = false;

canvas.onmousedown = function() {
    allowMove = true;
}
canvas.onmouseup = function() {
    allowMove = false;
}
canvas.onmousemove = function(e) {

    if (!allowMove) return;

    ... as before ...
+4

Source: https://habr.com/ru/post/1525311/

More articles:


All Articles