使在画布上绘制的图像可以使用JavaScript拖动
使在画布上绘制的图像可以使用JavaScript拖动
提问于 2013-02-23 10:37:12
我成功地在HTML画布上绘制了一幅图像。但我需要能够在画布上拖动图像。
我知道像KinectJS这样的JavaScript库可以很容易地实现这个函数。但我只想用简单的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>回答 1
Stack Overflow用户
发布于 2015-02-15 06:06:03
markE's answer把我带到了那里，但我在识别鼠标所在的位置时遇到了一些问题。我附加了我的代码，但由于我使用的是OO，所以它的结构会有所不同：
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15036386
复制相关文章
相似问题