使用JavaScript绘制图像在画布上拖动

我能够在HTML画布上成功绘制图像。但我需要能够在画布上拖动图像。使用JavaScript绘制图像在画布上拖动

我知道这个函数可以通过一些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>

来源

2013-02-23 Donnie Ibiyemi

要做到拖你处理3个鼠标事件：

鼠标按下 - 设置一个标志，表明该阻力已经开始。
鼠标松开 - 清除拖动标志，因为拖动结束
鼠标移动 - 如果拖拽标志被设置，清除画布和鼠标位置

绘制图像下面是一些代码：

<!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>

来源

2013-02-23 04:37:32 markE

谢谢!!但是，除此之外，这也适用于触摸设备？ – 2013-02-23 05:35:40

易于添加触摸。对于触摸，您可以处理与鼠标事件类似的3个事件：touchstart，touchend和touchmove。 – markE 2013-02-23 06:09:01

我是新手，你可以为我做这个please.i似乎很难把它在我的平板电脑上工作。 :) :) – 2013-02-23 06:32:33

markE's answer了我大部分的方式出现，但我有一些问题，它认识到位置我的鼠标WA虽然自从我与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); 
     }

来源

2015-02-14 22:06:03 cpres

我正在学习使用HTML5画布拖动图像。我对你的方法感兴趣，但是我发现了一个问题：我找不到代码中任何地方的drawImage（）函数。你能否为这个片段提供一个蹦床或小提琴？谢谢。 – asubanovsky 2016-01-21 10:50:06

您可以在这里了解drawImage函数：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage – cpres 2016-01-29 21:58:02

好的。谢谢。 – asubanovsky 2016-01-30 01:24:04

使用JavaScript绘制图像在画布上拖动

回答

相关问题