I have a canvas, I want to draw dots when user clicked and draw a line when clicked and dragged.
In order to identify whether I should generate a line when mouse is moving on the canvas, I set a variable 'isDrawing' to tell if the user has clicked on the canvas before moving on it. I bind 'mousedown' event to the canvas and set 'isDrawing' to true when the event is triggered. If it is true I will start drawing a line, otherwise I will do nothing to this behavior. But the problem is when user clicked to draw dots, the 'isDrawing' is also set to true because the 'mousedown' event is triggered by the click. My question is how to differentiate the click and mousedown event so that when user just clicked somewhere the 'mousedown' event will not be triggered? thanks.
#Aaron has the start of a good idea...Add your dot in mouseup instead of mousedown.
In mouseup if the mouse has been dragged less than 5 total pixels then treat the mouseup as a click rather than a drag. (5 pixels is an example--adjust for your desired tolerances).
In mousemove, delay drawing your line until the mouse has been dragged at least 5 pixels.
Here's example code and a Demo: http://jsfiddle.net/m1erickson/ZTuKP/
<!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 lastX,lastY;
var dragHash;
function handleMouseDown(e){
e.preventDefault();
e.stopPropagation();
lastX=parseInt(e.clientX-offsetX);
lastY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
dragHash=0;
isDown=true;
}
function handleMouseUp(e){
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
if(dragHash<5){
alert("It's a click...add a dot");
}else{
alert("You've been dragging");
}
// Put your mouseup stuff here
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var dx=mouseX-lastX;
var dy=mouseY-lastY;
lastX=mouseX;
lastY=mouseY;
// accumulate the drag distance
// (used in mouseup to see if this is a drag or click)
dragHash+=Math.abs(dx)+Math.abs(dy);
if(dragHash>4){
// it's a drag operation, draw the line
}
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Here's an example using pure javascript small and compact: http://jsfiddle.net/kychan/2t97S/
function e(id) { return document.getElementById(id); }
var box = e('box'),
ctx = box.getContext('2d'),
w = box.width,
h = box.height,
mx = 0,
my = 0
;
ctx.fillStyle = '#333';
ctx.fillRect(0,0,w,h);
ctx.fillStyle = '#FF0000';
ctx.strokeStyle= '#FF0000';
box.addEventListener('mousedown', function(e) {
mx = e.pageX - box.offsetLeft,
my = e.pageY - box.offsetTop;
}, false);
// reduces dender.
function d(i,c) {
return (c-10<i && c+10>i);
}
box.addEventListener('mouseup', function(e) {
var nx = e.pageX - box.offsetLeft,
ny = e.pageY - box.offsetTop;
ctx.beginPath();
if (d(mx,nx) && d(my,ny)) {
ctx.arc(mx,my,1, 0, Math.PI*2, false);
}else{
ctx.moveTo(mx, my);
ctx.lineTo(nx, ny);
}
ctx.closePath();
ctx.stroke();
mx=nx, my=ny;
}, false);
Related
I have a canvas loaded with an image.
Now, I want to mark lines on some part of the image.
So, I wrote some code which draws a line on mouse drag.
function drawLine(x, y) {
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
canvas.onmousedown = function (e) {
ctx.save();
e.preventDefault();
e.stopPropagation();
startX = parseInt(e.clientX - offsetX);
startY = parseInt(e.clientY - offsetY);
isDown = true;
}
canvas.onmousemove = function (e) {
if (!isDown) {
return;
}
e.preventDefault();
e.stopPropagation();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
drawLine(mouseX, mouseY);
}
canvas.onmouseup = function (e) {
if (!isDown) {
return;
}
e.preventDefault();
e.stopPropagation();
isDown = false;
}
The issue now is that, the drag creates a series of lines instead of one.
I have tried to save the context before drawing and restore it after drawing, but didn't help.
Note that, I cannot clear the canvas using clearRect(), as my image data will be lost.
Here, I have used a dummy image.
I have created a fiddle.
Any help would be appreciated.
Regards,
Rohith
One way of doing it is to save all your drag-lines in an array of drag-lines.
That way you can clear the canvas and redraw the image and redraw all the accumulated lines.
Example code and a Demo: http://jsfiddle.net/m1erickson/bH38a/
The green lines are my (totally non-medical !) additions.
BTW, this example reduces the opacity of the background image so the lines are more visible (a handy technique).
<!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 canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var startX,startY,mouseX,mouseY;
var isDown=false;
var lines=[];
var imageOpacity=0.33;
var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/heart.jpg";
function start(){
canvas.width=canvas.width=img.width;
canvas.height=img.height;
ctx.strokeStyle="green";
ctx.lineWidth=3;
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseUp(e);});
// redraw the image
drawTheImage(img,imageOpacity);
}
function drawLines(toX,toY){
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// redraw the image
drawTheImage(img,imageOpacity);
// redraw all previous lines
for(var i=0;i<lines.length;i++){
drawLine(lines[i]);
}
// draw the current line
drawLine({x1:startX,y1:startY,x2:mouseX,y2:mouseY});
}
function drawTheImage(img,opacity){
ctx.globalAlpha=opacity;
ctx.drawImage(img,0,0);
ctx.globalAlpha=1.00;
}
function drawLine(line){
ctx.beginPath();
ctx.moveTo(line.x1, line.y1);
ctx.lineTo(line.x2, line.y2);
ctx.stroke();
}
function handleMouseDown(e){
e.stopPropagation();
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
startX=mouseX;
startY=mouseY;
isDown=true;
}
function handleMouseUp(e){
e.stopPropagation();
e.preventDefault();
// Put your mouseup stuff here
isDown=false;
lines.push({x1:startX,y1:startY,x2:mouseX,y2:mouseY});
}
function handleMouseMove(e){
if(!isDown){return;}
e.stopPropagation();
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
drawLines(mouseX,mouseY);
}
$("#save").click(function(){
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag-draw lines.</h4>
<button id="save">Export Image</button><br>
<canvas id="canvas"></canvas>
</body>
</html>
Basically what I have coded is the ability to type a word into a text box. When a button is pressed to submit it that word is then posted to the HTML5 canvas so people can see it. What I want to do now is to have the ability to drag that word around the HTML5 canvas. I'm having slightly difficulty in achieving this and was wondering if someone could help me with this please? Here's my code what I've done so far:
var fname;
var canvas;
var ctx;
var canvasX;
var canvasY;
var mouseIsDown;
function addTitle2() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("mousemove", mouseXY, false);
document.body.addEventListener("mouseup", mouseUp, false);
var fname = document.forms[0].fname.value;
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "35px Arial";
ctx.fillText(fname, Math.random() * 500, Math.random() * 400);
ctx.stroke();
}
function mouseUp() {
mouseIsDown = 0;
mouseXY();
}
function mouseDown() {
mouseIsDown = 1;
mouseXY();
}
function mouseXY(e) {
e.preventDefault();
canvasX = e.pageX - canvas.offsetLeft;
canvasY = e.pageY - canvas.offsetTop;
ShowPos();
}
function ShowPos() {
if(mouseIsDown) {
ctx.fillText(fname, canvasX, canvasY);
}
}
Dragging text is largely responding to mouse events.
A Demo: http://jsfiddle.net/m1erickson/9xAGa/
First create text objects to refer to
// some text objects
var texts=[];
// some test texts
texts.push({text:"Hello",x:20,y:20});
texts.push({text:"World",x:20,y:70});
In mousedown
Iterate through each text object and see if the mouse is inside.
// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
function handleMouseDown(e){
e.preventDefault();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
for(var i=0;i<texts.length;i++){
if(textHittest(startX,startY,i)){
selectedText=i;
}
}
}
// test if x,y is inside the bounding box of texts[textIndex]
function textHittest(x,y,textIndex){
var text=texts[textIndex];
return(x>=text.x &&
x<=text.x+text.width &&
y>=text.y-text.height &&
y<=text.y);
}
In mousemove
Change the selected text's x,y by the distance the mouse has been dragged:
// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
function handleMouseMove(e){
if(selectedText<0){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var dx=mouseX-startX;
var dy=mouseY-startY;
startX=mouseX;
startY=mouseY;
var text=texts[selectedText];
text.x+=dx;
text.y+=dy;
draw();
}
In mouseup
The drag is over:
// done dragging
function handleMouseUp(e){
e.preventDefault();
selectedText=-1;
}
Annotated Code:
<!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;}
#theText{width:10em;}
</style>
<script>
$(function(){
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// variables used to get mouse position on the canvas
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;
// an array to hold text objects
var texts=[];
// this var will hold the index of the hit-selected text
var selectedText=-1;
// clear the canvas & redraw all texts
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<texts.length;i++){
var text=texts[i];
ctx.fillText(text.text,text.x,text.y);
}
}
// test if x,y is inside the bounding box of texts[textIndex]
function textHittest(x,y,textIndex){
var text=texts[textIndex];
return(x>=text.x &&
x<=text.x+text.width &&
y>=text.y-text.height &&
y<=text.y);
}
// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
function handleMouseDown(e){
e.preventDefault();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
for(var i=0;i<texts.length;i++){
if(textHittest(startX,startY,i)){
selectedText=i;
}
}
}
// done dragging
function handleMouseUp(e){
e.preventDefault();
selectedText=-1;
}
// also done dragging
function handleMouseOut(e){
e.preventDefault();
selectedText=-1;
}
// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
function handleMouseMove(e){
if(selectedText<0){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var dx=mouseX-startX;
var dy=mouseY-startY;
startX=mouseX;
startY=mouseY;
var text=texts[selectedText];
text.x+=dx;
text.y+=dy;
draw();
}
// listen for mouse events
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
$("#submit").click(function(){
// calc the y coordinate for this text on the canvas
var y=texts.length*20+20;
// get the text from the input element
var text={text:$("#theText").val(),x:20,y:y};
// calc the size of this text for hit-testing purposes
ctx.font="16px verdana";
text.width=ctx.measureText(text.text).width;
text.height=16;
// put this new text in the texts array
texts.push(text);
// redraw everything
draw();
});
}); // end $(function(){});
</script>
</head>
<body>
<input id="theText" type="text">
<button id="submit">Draw text on canvas</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Create a transparent div over canvas and position it such a way that it cover only area you filled with text. Make this div draggable. On div position change clear canvas and redraw text on canvas based on new position of div.
You should repeat all fillText stuff when mouse is down, also clear the screen before every draw
function drawText() {
ctx.clearRect(0, 0, 500, 400);
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "35px Arial";
ctx.fillText(fname, canvasX, canvasY);
ctx.stroke();
}
Here's a jsfiddle
Okay so I just want to point out one problem in the following jsfiddle solution by markE
Dragging text is largely responding to mouse events
the problem is that if your page doesn't fit the window and is scrollable if you have scrolled your page and now you are dragging the text, it won't work because the mouse event will return clientY that couldn't calculate the saved coordinates.
Reproduce by giving height as
<canvas id="canvas" width=300 height=3000></canvas>
and drag text after scrolling.
Say i want to draw a rectangle on canvas. I want to be able to get the co-ordinates from user's mouse. Ideal scenario is user clicks at a point and drags down to another end like those rectangles we draw using paint. How can i draw a rectangle like we do in paint by dragging mouse? (how to get the co-ordinates of the mouse when he clicks mouse and leaves at?)
Here's a outline of how to drag-draw a rectangle on canvas:
In mousedown:
save the starting mouse position
set a flag indicating the drag has begun
In mousemove:
clear the canvas of the previous rectangle
calculate the rectangle width/height based on the starting vs current mouse position
draw a rectangle from the starting XY to the current mouse position
In mouseup:
clear the dragging flag because the drag is over
Here's example code and a Demo: http://jsfiddle.net/m1erickson/6E2yd/
<!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(){
// get references to the canvas and context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// style the context
ctx.strokeStyle = "blue";
ctx.lineWidth=3;
// calculate where the canvas is on the window
// (used to help calculate mouseX/mouseY)
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
// this flage is true when the user is dragging the mouse
var isDown=false;
// these vars will hold the starting mouse position
var startX;
var startY;
function handleMouseDown(e){
e.preventDefault();
e.stopPropagation();
// save the starting x/y of the rectangle
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// set a flag indicating the drag has begun
isDown=true;
}
function handleMouseUp(e){
e.preventDefault();
e.stopPropagation();
// the drag is over, clear the dragging flag
isDown=false;
}
function handleMouseOut(e){
e.preventDefault();
e.stopPropagation();
// the drag is over, clear the dragging flag
isDown=false;
}
function handleMouseMove(e){
e.preventDefault();
e.stopPropagation();
// if we're not dragging, just return
if(!isDown){return;}
// get the current mouse position
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// calculate the rectangle width/height based
// on starting vs current mouse position
var width=mouseX-startX;
var height=mouseY-startY;
// draw a new rect from the start position
// to the current mouse position
ctx.strokeRect(startX,startY,width,height);
}
// listen for mouse events
$("#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 the mouse to create a rectangle</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
clear the
See this, move you mouse over the square, and witness the awesomeness of Process.js
http://processingjs.org/learning/topic/pattern/
Using this function you can get the mousecoordinates
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
this function takes in the canvas object and the event.
Now you just have to add an eventHandler on mousedown and mouseup and you can get both the locations.
var canvas = document.getElementById('canvasId');
var ctx = canvas.getContext('2d');
var locA, locB;
document.addEventListener('mousedown', function(e) {
e.preventDefault();
locA = getMousePos(canvas, e);
});
document.addEventListener('mouseup', function(e) {
e.preventDefault();
locB = getMousePos(canvas, e);
ctx.fillStyle = '#000000';
ctx.fillRect(locA.x, locA.y, (locB.x - locA.x), (locB.y - locA.y));
});
function source: http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
There are still some problems surrounding canvas coordinates vs document coordinates, but I'm sure you'll be able to fix that.
In my code I am loading an image in to a canvas. Then I need to resize, rotate and drag it. I managed to implement both dragging and resizing.
How can I implement rotation(along the center of the image) using mouse on this code.
My HTML page:
<!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; padding:10px;}
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var startX;
var startY;
var isDown=false;
var pi2=Math.PI*2;
var resizerRadius=8;
var rr=resizerRadius*resizerRadius;
var draggingResizer={x:0,y:0};
var imageX=50;
var imageY=50;
var imageWidth,imageHeight,imageRight,imageBottom;
var draggingImage=false;
var startX;
var startY;
var img=new Image();
img.onload=function(){
imageWidth=img.width;
imageHeight=img.height;
imageRight=imageX+imageWidth;
imageBottom=imageY+imageHeight
draw(true,false);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
function draw(withAnchors,withBorders){
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// draw the image
ctx.drawImage(img,0,0,img.width,img.height,imageX,imageY,imageWidth,imageHeight);
// optionally draw the draggable anchors
if(withAnchors){
drawDragAnchor(imageX,imageY);
drawDragAnchor(imageRight,imageY);
drawDragAnchor(imageRight,imageBottom);
drawDragAnchor(imageX,imageBottom);
}
// optionally draw the connecting anchor lines
if(withBorders){
ctx.beginPath();
ctx.moveTo(imageX,imageY);
ctx.lineTo(imageRight,imageY);
ctx.lineTo(imageRight,imageBottom);
ctx.lineTo(imageX,imageBottom);
ctx.closePath();
ctx.stroke();
}
}
function drawDragAnchor(x,y){
ctx.beginPath();
ctx.arc(x,y,resizerRadius,0,pi2,false);
ctx.closePath();
ctx.fill();
}
function anchorHitTest(x,y){
var dx,dy;
// top-left
dx=x-imageX;
dy=y-imageY;
if(dx*dx+dy*dy<=rr){ return(0); }
// top-right
dx=x-imageRight;
dy=y-imageY;
if(dx*dx+dy*dy<=rr){ return(1); }
// bottom-right
dx=x-imageRight;
dy=y-imageBottom;
if(dx*dx+dy*dy<=rr){ return(2); }
// bottom-left
dx=x-imageX;
dy=y-imageBottom;
if(dx*dx+dy*dy<=rr){ return(3); }
return(-1);
}
function hitImage(x,y){
return(x>imageX && x<imageX+imageWidth && y>imageY && y<imageY+imageHeight);
}
function handleMouseDown(e){
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
draggingResizer=anchorHitTest(startX,startY);
draggingImage= draggingResizer<0 && hitImage(startX,startY);
}
function handleMouseUp(e){
draggingResizer=-1;
draggingImage=false;
draw(true,false);
}
function handleMouseOut(e){
handleMouseUp(e);
}
function handleMouseMove(e){
if(draggingResizer>-1){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// resize the image
switch(draggingResizer){
case 0: //top-left
imageX=mouseX;
imageWidth=imageRight-mouseX;
imageY=mouseY;
imageHeight=imageBottom-mouseY;
break;
case 1: //top-right
imageY=mouseY;
imageWidth=mouseX-imageX;
imageHeight=imageBottom-mouseY;
break;
case 2: //bottom-right
imageWidth=mouseX-imageX;
imageHeight=mouseY-imageY;
break;
case 3: //bottom-left
imageX=mouseX;
imageWidth=imageRight-mouseX;
imageHeight=mouseY-imageY;
break;
}
// enforce minimum dimensions of 25x25
if(imageWidth<25){imageWidth=25;}
if(imageHeight<25){imageHeight=25;}
// set the image right and bottom
imageRight=imageX+imageWidth;
imageBottom=imageY+imageHeight;
// redraw the image with resizing anchors
draw(true,true);
}else if(draggingImage){
imageClick=false;
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// move the image by the amount of the latest drag
var dx=mouseX-startX;
var dy=mouseY-startY;
imageX+=dx;
imageY+=dy;
imageRight+=dx;
imageBottom+=dy;
// reset the startXY for next time
startX=mouseX;
startY=mouseY;
// redraw the image with border
draw(false,true);
}
}
$("#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>
<p>Resize the image using the 4 draggable corner anchors</p>
<p>You can also drag the image</p>
<canvas id="canvas" width=350 height=350></canvas>
</body>
</html>
Here’s how to use a drag-handle to rotate an image
The mousedown event handler hit-tests if the user is starting to drag the rotation-handle.
This hit-testing is made easier with context.isPointInPath(x,y) which tests whether a specified [x,y] coordinate is inside the most recently drawn path (Conveniently, the rotation-handle is actually a path).
So mousedown activates the drag-handle like this:
Calculate the current mouseX and mouseY.
Redraw the rotation handle (required because isPointInPath hit-tests just the most recent path)
Set the isDown flag if the user did click in the rotation handle.
The mousedown code looks like this:
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
drawRotationHandle(false);
isDown=ctx.isPointInPath(mouseX,mouseY);
}
Yes...we could have simply hit-tested a circle on the end of the rotation-handle, but using isPointInPath will allow you to draw whatever fancy rotation handle you desire.
And isPointInPath has another nice benefit. When the context containing the path is rotated, isPointInPath will hit-test the rotated path for you. This means you don't have to code the math to unrotate the mouse coordinates to do the hit testing--it's done for you!
The mousemove handler redraws the rotatable image at the angle specified by the rotation-handle:
If the isDown flag is not set, just return (the user is not dragging the rotation-handle).
Calculate the current mouseX and mouseY.
Calculate the current angle of the rotation-handle.
Redraw the rotatable image at the current angle.
The mousemove code looks like this:
function handleMouseMove(e){
if(!isDown){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var dx=mouseX-cx;
var dy=mouseY-cy;
r=Math.atan2(dy,dx);
draw();
}
The image is drawn at the specified rotation using context's transform methods
function drawRect(){
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(r);
ctx.drawImage(img,0,0);
ctx.restore();
}
Finally, the mouseup and mouseout handlers stop the drag operation by clearing the isDown flag.
function handleMouseUp(e){
isDown=false;
}
function handleMouseOut(e){
isDown=false;
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/QqwKR/
<!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 canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isDown=false;
var cx=canvas.width/2;
var cy=canvas.height/2;
var w;
var h;
var r=0;
var img=new Image();
img.onload=function(){
w=img.width/2;
h=img.height/2;
draw();
}
img.src="facesSmall.png";
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawRotationHandle(true);
drawRect();
}
function drawRect(){
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(r);
ctx.drawImage(img,0,0,img.width,img.height,-w/2,-h/2,w,h);
ctx.restore();
}
function drawRotationHandle(withFill){
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(r);
ctx.beginPath();
ctx.moveTo(0,-1);
ctx.lineTo(w/2+20,-1);
ctx.lineTo(w/2+20,-7);
ctx.lineTo(w/2+30,-7);
ctx.lineTo(w/2+30,7);
ctx.lineTo(w/2+20,7);
ctx.lineTo(w/2+20,1);
ctx.lineTo(0,1);
ctx.closePath();
if(withFill){
ctx.fillStyle="blue";
ctx.fill();
}
ctx.restore();
}
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
drawRotationHandle(false);
isDown=ctx.isPointInPath(mouseX,mouseY);
console.log(isDown);
}
function handleMouseUp(e){
isDown=false;
}
function handleMouseOut(e){
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var dx=mouseX-cx;
var dy=mouseY-cy;
r=Math.atan2(dy,dx);
draw();
}
$("#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>
<p>Rotate by dragging blue rotation handle</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I am creating a multiple item drag and drop for a project and have a reached a wall.
At present I have 5 square items I have added to the canvas and also stored there x, y, width, height, bgcolour into an array called items. I have detected when the mouse selects one of these squares and can drag an item around. However my issue is that the item I am dragging around is always the same item, the first one added to the canvas. If anybody could help me work out how to detect which item specifically I have selected that would be great.
There is a'lot of code so I will try and post only the required bits.
//Items are added to canvas and values added to items[];
//a click event runs when the canvas is clicked, the following code is then run
var mouseCheck = function(e) {
var length = items.length;
var pos = $('#scalesPlatform').offset(),
top = pos.top,
left = pos.left,
mx = e.pageX - left,
my = e.pageY - top;
var imagedata = ctx.getImageData(mx, my, 1, 1);
if (imagedata.data[3] > 0) {
for (var i = length - 1; i >= 0; i--) {
var hit = items[i];
offsetX = mx - items[i].x;
offsetY = my - items[i].y;
hit.x = mx - offsetX;
hit.y = my - offsetY;
canvas.addEventListener('mousemove', function() {
move(hit, drag, items, event);
});
canvas.addEventListener('mouseup', function() {
drag = false;
move(hit, drag, event);
});
}
}
}
The issue is I need the variable hit to equal the item I have selected.
Any help would be greatly apprecaited.
Here’s how to drag/drop with multiple items
You have your squares defined in objects:
var items=[]
items.push({x:0,y:10,width:50,height:50,color:"red",isDragging:false});
items.push({x:70,y:10,width:50,height:50,color:"green",isDragging:false});
items.push({x:140,y:10,width:50,height:50,color:"blue",isDragging:false});
So you can hit test like this to detect which item(s) will be dragged:
function setDragging(x,y){
for(var i=0;i<items.length;i++){
var item=items[i];
// if x/y hit this item, set it’s isDragging flag
if(x>=item.x && x<=item.x+item.width && y>=item.y && y<=item.y+item.height){
item.isDragging=true;
}
}
}
Your mousemove handler calculates the distance of the drag.
dragX=mouseX-startX;
dragY=mouseY-startY;
Then in your draw() function you can handle both dragging and non-dragging items.
Items being dragged will be drawn at their original position plus dragX/dragY.
if(item.isDragging){
ctx.rect(item.x+dragX,item.y+dragY,item.width,item.height);
}else{
ctx.rect(item.x,item.y,item.width,item.height);
}
Here is example code and a Fiddle: http://jsfiddle.net/m1erickson/62L9q/
<!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 canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;
var startX;
var startY;
var dragX;
var dragY;
var items=[]
items.push({x:0,y:10,width:50,height:50,color:"red",isDragging:false});
items.push({x:70,y:10,width:50,height:50,color:"green",isDragging:false});
items.push({x:140,y:10,width:50,height:50,color:"blue",isDragging:false});
draw();
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<items.length;i++){
var item=items[i];
if(isMouseDown){
}
ctx.beginPath();
if(item.isDragging){
ctx.rect(item.x+dragX,item.y+dragY,item.width,item.height);
}else{
ctx.rect(item.x,item.y,item.width,item.height);
}
ctx.fillStyle=item.color
ctx.fill();
}
}
function setDragging(x,y){
for(var i=0;i<items.length;i++){
var item=items[i];
if(x>=item.x && x<=item.x+item.width && y>=item.y && y<=item.y+item.height){
item.isDragging=true;
}
}
}
function clearDragging(x,y){
for(var i=0;i<items.length;i++){
var item=items[i];
if(item.isDragging){
items[i].isDragging=false;
item.x+=dragX;
item.y+=dragY;
}
}
}
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
startX=mouseX;
startY=mouseY;
setDragging(startX,startY);
isMouseDown=true;
}
function handleMouseUp(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
isMouseDown=false;
clearDragging();
}
function handleMouseOut(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseOut stuff here
isMouseDown=false;
clearDragging();
}
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
if(isMouseDown){
dragX=mouseX-startX;
dragY=mouseY-startY;
draw(mouseX,mouseY);
}
}
$("#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=300 height=300></canvas>
</body>
</html>