Hello I'm trying to create a brush size slider for my Canvas drawing app, would anyone be able to assist in how to go about this?? A few of the approaches I have found weren't compatible with my Jquery library that I have running my app.
thank you :)
Your question is a bit brief on details :-O
Here's how to use an input-type-range to change context.lineWidth.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var isDown=false;
var startX,startY;
ctx.lineCap='round';
var linewidth=5;
ctx.lineWidth=linewidth;
$myslider=$('#myslider');
$myslider.attr({min:1,max:25}).val(linewidth);
$myslider.on('input change',function(){
linewidth=ctx.lineWidth=parseInt($(this).val());
});
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUpOut(e);});
$("#canvas").mouseout(function(e){handleMouseUpOut(e);});
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
isDown=true;
}
function handleMouseUpOut(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// Put your mouseup stuff here
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
startX=mouseX;
startY=mouseY;
}
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag mouse to draw variable width line.</h4>
Line Width:  <input id=myslider type=range><br>
<canvas id="canvas" width=300 height=300></canvas>
Easy:
Create an input element of type range:
<input type=range min=1 max=100 id=brushSize>
Read its value and apply to lineWidth of the context:
$("#brushSize").on("input", function(e) {
ctx.lineWidth = $(this).val()
});
$("#brushSize").on("input", function(e) {
var v = $(this).val(); // brush size value, example usage:
//ctx.lineWidth = v; // context line-width
$("#val").html($(this).val()); // textual repr.
$("#val").width(v).height(v); // brush size rep.
});
#val {
display:inline-block;
border-radius:50%;
background:#000;
color:#f00;
width:50px;
height:50px;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=range min=1 max=100 id=brushSize> <span id=val>50</span>
Related
if I enter a position on lineTo() and moveTo() i have a line but if i give the touchstart and touchmove position nothing happens and i have bot console erreur to help me
touchStart(e){
this.touchDessiner(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
console.log(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}
touchMove(e){
e.preventDefault();
this.touchDessiner(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
console.log(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
}
touchDessiner(x, y){
this.cont.lineWidth = 2;
this.cont.strokeStyle = "#000";
this.cont.beginPath();
this.cont.moveTo(x, y);
this.cont.lineTo(x, y);
this.cont.stroke();
}
thanks for your help
Here is the correct order to draw lines:
On TouchStart:
1. start a new path (lift the pen from the canvas)
2. move the pen here
On TouchMove:
3. with the pen still touching the canvas, move the pen here
canvas = document.getElementById("can");
cont = canvas.getContext("2d");
function touchStart(e){
this.cont.beginPath();
this.cont.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}
function touchMove(e){
e.preventDefault();
this.touchDessiner(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
}
function touchDessiner(x, y){
this.cont.lineWidth = 2;
this.cont.strokeStyle = "#000";
this.cont.lineTo(x, y);
this.cont.stroke();
}
window.addEventListener("touchstart", touchStart);
window.addEventListener("touchmove", touchMove);
<!DOCTYPE html>
<html>
<body>
canvas
<canvas id = "can" style = "border: 1px solid black; position:absolute; left:0px; top:0px;"> </canvas>
</body>
</html>
I draw a polygon with the following code:
var canvas = document.getElementById("polyCanvas");
var c2 = canvas.getContext("2d");
var coords = '';
c2.clearRect(0, 0, 2000, 2000);
$("fdel").remove();
$("#eliminar" + todelete).remove();
c2.beginPath();
var first = true;
var points = 1;
var done = false;
$("#vertexcontainer .vertex").each(function() {
var position = $(this).position();
var x = 2+position.left;
var y = 2+position.top;
if (!done){
if (first) {
c2.moveTo(x, y);
first = false;
} else {
c2.lineTo(x, y);
}
}
if(points > cpoints){
done = true;
}
points = points + 1;
coords = coords + x + ',' + y + ' ';
});
$('#coordinates').val(coords);;
c2.closePath();
c2.lineWidth = 2;
c2.strokeStyle = '#ff0000';
c2.stroke();
c2.fillStyle = "rgb(0, 100, 200)";
c2.fill();
It runs smoothly, but i'd like to be able to drag the polygon around, or to use mouse events with it. Is that possible?
My naive attempt to do c2.hover(function..., and c2.addeventlistener... have not been successful.
You cannot actually move any drawings you've made on the canvas.
But...you can create the illusion that something is moving.
You create the illusion of movement by repeatedly erasing the canvas and redrawing the shapes in their new positions.
To drag a shape you need to listen to 4 mouse events.
In mousedown: Check if the mouse is over the shape, and, if yes, set a flag indicating a drag has begun. To check if the mouse is over the shape, you can use canvas context's isPointInPath method which tests if an [x,y] point is inside the most recently drawn path.
In mousemove: If the dragging flag is set (indicating a drag is in process), change the position of the selected text by the distance the user has dragged and redraw the shape in its new position
In mouseup or in mouseout: The drag is over so clear the dragging flag.
Here's a example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var isDown=false;
var startX,startY;
var poly={
x:0,
y:0,
points:[{x:50,y:50},{x:75,y:25},{x:100,y:50},{x:75,y:125},{x:50,y:50}],
}
ctx.fillStyle='skyblue';
ctx.strokeStyle='gray';
ctx.lineWidth=3;
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);});
function draw(){
ctx.clearRect(0,0,cw,ch);
define();
ctx.fill();
ctx.stroke()
}
function define(){
ctx.beginPath();
ctx.moveTo(poly.points[0].x+poly.x,poly.points[0].y+poly.y);
for(var i=0;i<poly.points.length;i++){
ctx.lineTo(poly.points[i].x+poly.x,poly.points[i].y+poly.y);
}
ctx.closePath();
}
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
define();
if(ctx.isPointInPath(startX,startY)){
isDown=true;
}
}
function handleMouseUp(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
isDown=false;
}
function handleMouseOut(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseOut stuff here
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
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;
poly.x+=dx;
poly.y+=dy;
draw();
}
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag the polygon</h4>
<canvas id="canvas" width=300 height=300></canvas>
I am trying to pan the canvas when the user presses the mouse and moves it but it doesn't seem to be working for some reason I cannot see. Any ideas?
canvas.addEventListener('mousedown', onMouseDown, false);
function onMouseDown(event){
var mousePos = new Vector(event.clientX, event.clientY);
mousedown = true;
}
canvas.addEventListener('mouseup', onMouseUp, false);
function onMouseUp(event){
mousedown = false;
}
canvas.addEventListener('mousemove', onMouseMove, false);
function onMouseMove(event){
mousePos = new Vector(event.clientX, event.clientY);
if(onMouseDown){
var difference = mousePos.subtract(previousMousePosition);
pan.add(difference);
}
previousMousePosition = mousePos;
}
pan = new Vector(0, 0);
I am also getting an error saying that Vector is not defined and also one for mousePos.subtract. This is my vector.js:
var Vector = (function () {
function Vector(pX, pY) {
this.setX(pX);
this.setY(pY);
};
Vector.prototype.getX = function() {
return this.mX;
};
Vector.prototype.setX = function (pX) {
this.mX = pX;
};
Vector.prototype.getY = function() {
return this.mY;
};
Vector.prototype.setY = function(pY) {
this.mY = pY;
};
return Vector;
})();
You can pan the canvas content using the translate transformation.
context.translate(x,y) will move the canvas origin horizontally by x pixels and vertically by y pixels.
So to "pan right" by 5 pixels you can context.translate(-5,0).
The nice thing about using transformations is that you don't have to alter your existing drawing code -- translate will automatically "shift" all your drawings in the specified directions.
[ Addition: show how to get net-panning from users mouse drags ]
function log(){console.log.apply(console,arguments);}
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var isDown=false;
var startX,startY;
var netPanningX=0;
var netPanningY=0;
var $results=$('#results');
for(var x=0;x<100;x++){ ctx.fillText(x,x*20+netPanningX,ch/2); }
for(var y=-50;y<50;y++){ ctx.fillText(y,cw/2,y*20+netPanningY); }
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
isDown=true;
}
function handleMouseUp(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
isDown=false;
}
function handleMouseOut(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseOut stuff here
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// dx & dy are the distance the mouse has moved since
// the last mousemove event
var dx=mouseX-startX;
var dy=mouseY-startY;
startX=mouseX;
startY=mouseY;
// accumulate the net panning done
netPanningX+=dx;
netPanningY+=dy;
$results.text('Net change in panning: x:'+netPanningX+', y:'+netPanningY);
ctx.clearRect(0,0,cw,ch);
for(var x=-50;x<50;x++){ ctx.fillText(x,x*20+netPanningX,ch/2); }
for(var y=-50;y<50;y++){ ctx.fillText(y,cw/2,y*20+netPanningY); }
}
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4 id=results>Drag the mouse to see net panning in x,y directions</h4>
<canvas id="canvas" width=300 height=300></canvas>
I am trying to add different layers (i.e two parallel lines to canvas). I implemented the code with one pair of parallel lines of one color. Now I need to add different color lines without removing the previous lines. Attached is the js fiddle. Please help. After clicking layers. you can draw layers on the canvas.
var oImageBuffer = document.createElement('img');
var oCanvas=document.getElementById("SetupImageCanvas");
var o2DContext=oCanvas.getContext("2d");
var oRect = {};
var oROI = {};
var oLayers = new Array();
var bDragging = false;
var bSetROI = false;
var bSetLayers = false;
InitMouseEvents();
var oSelect = document.getElementById("ImageList");
oSelect.onchange=function() {
changeCanvasImage(oSelect[oSelect.selectedIndex].value);
}
// Canvas event handlers (listeners).
function InitMouseEvents() {
oCanvas.addEventListener('mousedown', MouseDownEvent, false);
oCanvas.addEventListener('mouseup', MouseUpEvent, false);
oCanvas.addEventListener('mousemove', MouseMoveEvent, false);
oCanvas.addEventListener('mouseout', MouseOutEvent, false);
}
function MouseDownEvent(e) {
oRect.startX = e.pageX - this.offsetLeft;
oRect.startY = e.pageY - this.offsetTop;
bDragging = true;
}
function MouseUpEvent() {
bDragging = false;
}
function MouseOutEvent() {
document.getElementById("MouseCoords").innerHTML="";
}
function MouseMoveEvent(e) {
if (bDragging) {
oRect.w = (e.pageX - this.offsetLeft) - oRect.startX;
oRect.h = (e.pageY - this.offsetTop) - oRect.startY;
oCanvas.getContext('2d').clearRect(0,0,oCanvas.width, oCanvas.height);
var oROI = document.getElementById("btnROI");
if (oROI.checked) {
SetROI();
}
var oLayer = document.getElementById("btnLAYER");
if (oLayer.checked) {
SetLayer();
}
}
if (bSetROI) {
DrawROI();
}
if (bSetLayers) {
DrawLayers();
}
// Display the current mouse coordinates.
ShowCoordinates(e);
}
function ShowCoordinates(e) {
x=e.clientX;
y=e.clientY;
document.getElementById("MouseCoords").innerHTML="(" + x + "," + y + ") " + document.getElementById('txtPatchCount').value;
}
// Interactively draw ROI rectangle(s) on the canvas.
function SetROI() {
bSetROI = true;
oROI.startX = oRect.startX;
oROI.startY = oRect.startY;
oROI.w = oRect.w;
oROI.h = oRect.h;
}
function DrawROI() {
o2DContext.lineWidth=1.5;
o2DContext.strokeStyle = '#0F0';
o2DContext.strokeRect(oROI.startX, oROI.startY, oROI.w, oROI.h);
var iPatches = document.getElementById('txtPatchCount').value;
o2DContext.beginPath();
var iTop = oROI.startY;
var iBottom = oROI.startY + oROI.h;
var iLeft = oROI.startX;
var iX = iLeft;
for (var iPatch=1; iPatch<iPatches; ++iPatch) {
iX = iLeft + iPatch*oROI.w/iPatches;
o2DContext.moveTo(iX, iTop);
o2DContext.lineTo(iX, iBottom);
}
o2DContext.lineWidth=0.25;
o2DContext.stroke();
}
// Interactively draw layer boundaries on the canvas.
function SetLayer() {
bSetLayers = true;
oLayers.length = 0;
oLayers.push(oRect.startY);
oLayers.push(oRect.startY + oRect.h);
}
function DrawLayers() {
o2DContext.lineWidth=0.25;
o2DContext.strokeStyle = '#F00';
o2DContext.beginPath();
var iY = oLayers[0];
var iLeft = 0;
var iRight = oCanvas.width;
for (var iLayer=0; iLayer<oLayers.length; ++iLayer) {
iY = oLayers[iLayer];
o2DContext.moveTo(iLeft, iY);
o2DContext.lineTo(iRight, iY);
o2DContext.stroke();
}
}
http://jsfiddle.net/AhdJr/30/
Create an array to save each new layer and draw all the saved layers.
Demo: http://jsfiddle.net/m1erickson/UfuDX/
mousedown
set the isDown flag to indicate the user is dragging
save the "Y" position where the drag started
mouseup
clear the isDown flag to indicate the drag has completed
Save the "Y" positions of both parallel lines plus the current color
mousemove
draw all the previously saved parallel lines
draw the current (temporary) parallel line
Here's 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;}
</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 startY;
var layers=[];
var currentColor="black";
function handleMouseDown(e){
e.preventDefault();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
currentColor=randomColor();
isDown=true;
}
function handleMouseUp(e){
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
isDown=false;
layers.push({y1:startY,y2:mouseY,color:currentColor});
}
function handleMouseOut(e){
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
isDown=false;
layers.push({y1:startY,y2:mouseY,color:currentColor});
}
function handleMouseMove(e){
if(!isDown){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
drawAll();
hLine(startY,currentColor);
hLine(mouseY,currentColor);
}
function drawAll(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<layers.length;i++){
layer=layers[i];
hLine(layer.y1,layer.color);
hLine(layer.y2,layer.color);
}
}
function hLine(y,color){
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(canvas.width,y);
ctx.strokeStyle=color;
ctx.stroke();
}
function randomColor(){
return('#'+Math.floor(Math.random()*16777215).toString(16));
}
$("#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>
I am building a HTML5 canvas image editor. After uploading an image in to the canvas i need to Dragg and resize it over the canvas.
I managed to upload an image and make it draggable on the canvas. But i need to make it resizable also along the canvas. Thanks in advance.
var Img = new Image();
Img.src = file;
Img.onload = function () {
context.drawImage(Img, 50, 0, 200, 200);
}
mouseMove = function (event){
if (down)
{
context.clearRect(0,0,800,500);
context.translate(0, -50);
context.drawImage(Img, (event.clientX - offsetX),
(event.clientY - offsetY), 200, 200);
context.translate(0, 50);
}
}
mouseUp = function () {
down = false;
}
mouseDown = function () {
down = true;
}
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove',mouseMove, false);
I tried with kinetics js but it is not suitable with canvas.
Here's example code to allow you to drag and resize an image using Canvas.
Resizing
How to resize an image with 4 draggable anchors
Draw a draggable anchor on each corner of an image.
If the user mousedown’s one if the anchors, start dragging that anchor.
In the mousemove handler, resize the image using the dragging anchor’s position(Note below).
As the last act in mousemove, redraw the resized image and 4 new anchors.
On mouseup, stop the anchor’s drag.
Note on the math used to resize the image:
The resized width is the difference between the mouseX position and the opposite corner’s X.
The resized height is the difference between the mouseY position and the opposite corner’s Y.
Dragging
How to drag an image
If the user mousedown’s inside the image, save the mouses starting XY to begin dragging.
In the mousemove handler, move the image by the current mouseXY minus the startingXY.
Also in mousemove, reset the startingXY to the current mouseXY in preparation for continued dragging.
On mouseup, stop the image’s drag.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/LAS8L/
<!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>