在用图像加载的画布上拖动鼠标拖动一条线

我有一个画布加载了图像。
现在，我想标记图像某些部分的线条。
所以，我写了一些代码，它在鼠标拖动上绘制一条线。在用图像加载的画布上拖动鼠标拖动一条线

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; 
}

现在的问题是，拖动会创建一系列线条而不是一条线条。
我试图在绘制之前保存上下文并在绘制后将其恢复，但没有帮助。

请注意，我无法使用clearRect（）清除画布，因为我的图像数据将丢失。在这里，我使用了一个虚拟图像。

我创建了一个fiddle。

任何帮助，将不胜感激。

问候，
Rohith

来源

2014-05-13 Rohith

无关，但你想创建一个图像编辑器？如果是的话，我建议你看看paper.js –

不，这是一个医学图像查看器。 – Rohith

看看这里http://jsfiddle.net/s34PL/2/ –

一个这样做是为了节省在拖线阵列中的所有的拖线的方式。

这样你就可以清除画布并重画图像并重绘所有的累积线。

示例代码和演示：http://jsfiddle.net/m1erickson/bH38a/

绿线是我的（！完全非医疗）增加。

顺便说一下，这个例子减少了背景图像的不透明度，因此线条更加明显（一种方便的技术）。

enter image description here

<!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>

来源

2014-05-13 16:44:27 markE

感谢您的回答。是的，我在一个数组中保存形状。在这个例子中，我跳过了加载图像和绘制多个形状，以使代码变小。 – Rohith

不清除并在画布上绘制图像会影响性能？ – Rohith

重绘现有图像的速度惊人地快。这是因为发生的所有事情都是将顺序像素（内存字节）从一个位置复制到另一个位置。如果你在电脑上有图形处理单元，速度会更快......甚至更快。 – markE

在用图像加载的画布上拖动鼠标拖动一条线

回答

相关问题