Сделать изображение на холсте перетаскиваемым с помощью JavaScript

19

Мне удалось успешно нарисовать изображение на холсте HTML. Но мне нужно иметь возможность перетаскивать изображение на холст.

Я знаю, что эта функция может быть легко реализована некоторыми библиотеками JavaScript, такими как KinectJS. Но я хочу просто сделать это с помощью простого JavaScript.

window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var destX = 0;
var destY = 0;
var imageObj = new Image();

imageObj.onload = function(){
  context.drawImage(imageObj, destX, destY);
};
imageObj.src = "westeros.png";
<canvas id="myCanvas" height=1024 width=360></canvas>
    
задан Donnie Ibiyemi 23.02.2013 в 03:37
источник

2 ответа

25

Для перетаскивания вы обрабатываете 3 события мыши:

  1. mousedown - установить флаг, указывающий, что началось перетаскивание.

  2. mouseup - очистить флаг перетаскивания, потому что перетаскивание завершено

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

Вот какой код:

<!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 img = new Image();
    img.onload = function(){
        ctx.drawImage(img, 0,0);
    };
    img.src = "http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg";

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var canvasWidth=canvas.width;
    var canvasHeight=canvas.height;
    var isDragging=false;

    function handleMouseDown(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      // set the drag flag
      isDragging=true;
    }

    function handleMouseUp(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      // clear the drag flag
      isDragging=false;
    }

    function handleMouseOut(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      // user has left the canvas, so clear the drag flag
      //isDragging=false;
    }

    function handleMouseMove(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      // if the drag flag is set, clear the canvas and draw the image
      if(isDragging){
          ctx.clearRect(0,0,canvasWidth,canvasHeight);
          ctx.drawImage(img,canMouseX-128/2,canMouseY-120/2,128,120);
      }
    }

    $("#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>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>
    
ответ дан markE 23.02.2013 в 05:37
  • Спасибо !! Но део это тоже работает на Touch Devices? –  Donnie Ibiyemi 23.02.2013 в 06:35
  • Легко добавить прикосновение. Для touch вы будете обрабатывать эти 3 события, подобные событиям мыши: touchstart, touchhend & touchmove. –  markE 23.02.2013 в 07:09
  • Не путайте рисунок холста с элементом DOM. Картины холста представляют собой только пиксели на поверхности холста. Поэтому они ограничены отображением внутри холста и не могут быть вытащены за пределы холста. –  markE 10.01.2014 в 23:42
  • Спасибо @markE. Вы спасли мое время :) –  Kabkee 06.03.2016 в 05:09
  • @Sid Вот предыдущие вопросы и ответы с примером, показывающим, как перетаскивать несколько изображений. Ура! –  markE 18.03.2016 в 21:29
Показать остальные комментарии
3

ответ markE дал мне большую часть пути, но у меня были некоторые проблемы с его распознаванием местоположения, в котором моя мышь была Я схожу с моим кодом, хотя, поскольку я работаю с OO JS, он будет по-разному структурирован:

    hitImage: function() {
      return (this.startX > this.imageX && this.startX < this.imageX + this.imageWidth && this.startY > this.imageY && this.startY < this.imageY + this.imageHeight);
    },

    handleMouseDown: function(e){
      this.startX = parseInt(e.clientX - this.offsetX);
      this.startY = parseInt(e.clientY - this.offsetY);
      // set the drag flag
      this.isDragging= this.hitImage;
    },

    handleMouseUp: function(e,img){
      this.startX=parseInt(e.clientX-this.offsetX);
      this.startY=parseInt(e.clientY-this.offsetY);
      // clear the drag flag
      this.isDragging=false;
      this.drawImage(e,img);
    },

    handleMouseOut: function(e,img){
      this.handleMouseUp(e,img);
    },

    handleMouseMove: function(e,img){
      // only compute new positions if in drag
      if(this.isDragging){

        this.canMouseX=parseInt(e.clientX - this.offsetX);
        this.canMouseY=parseInt(e.clientY - this.offsetY);
      // move the image by the amount of the latest drag
        var dx = this.canMouseX - this.startX;
        var dy = this.canMouseY - this.startY;

        this.imageX += dx;
        this.imageY += dy;
        // Negative image locations break the pattern in this.fillPattern
        this.imageY = Math.max(0, this.imageY);
        this.imageX = Math.max(0, this.imageX);

        // reset the startXY for next time
        this.startX = this.canMouseX;
        this.startY = this.canMouseY;

        this.drawImage(e,img);
      }
    
ответ дан cpres 14.02.2015 в 23:06
  • Я учусь перетаскивать изображение с помощью холста HTML5. Меня интересует ваш подход, но я нашел проблему: я не могу найти функцию drawImage () в любом месте вашего кода. Не могли бы вы предоставить плункер или скрипку для этого фрагмента? Спасибо. –  asubanovsky 21.01.2016 в 11:50
  • Вы можете узнать о функции drawImage здесь: developer.mozilla.org/en-US/docs/Web/API/... –  cpres 29.01.2016 в 22:58
  • Хорошо. Спасибо. –  asubanovsky 30.01.2016 в 02:24