Question

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

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

Answer 1

这样做的一种方法是将所有拖动线保存在拖动线阵列中。

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

示例代码和演示：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>

在装有图像的画布上拖动鼠标拖动一条线

1 个答案: