使用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繪製圖像在畫布上拖動

回答

相關問題