admin管理员组文章数量:1325236
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
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
- Unrelated but are you trying to create an image-editor? If so I would suggest that you check out paper.js – nicholaswmin Commented May 13, 2014 at 8:20
- No, This is a medical image viewer. – Rohith Commented May 13, 2014 at 8:23
- Take a look here jsfiddle/s34PL/2 – Systematix Infotech Commented May 13, 2014 at 8:50
- Thanks for the try, But, I want straight lines from the starting position to the current mouse position. – Rohith Commented May 13, 2014 at 9:04
1 Answer
Reset to default 5One 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/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./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./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>
本文标签： javascriptDraw a line on mouse drag on a canvas loaded with an imageStack Overflow
版权声明：本文标题：javascript - Draw a line on mouse drag on a canvas loaded with an image - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742169175a2426397.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论