6

我正在尝试制作一个简单的绘画应用程序，并且我希望在您指定线条起点后线条可以预览线条。对应的Javascript是这样的：

var Edges = new Array();
var Vertecies = new Array();
var Mouse = {x:0, y:0}


function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

function addEdge() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    var i=0;
    var Start = { x:0, y:0}
    var End = { x:0, y:0}
    var Line = (Start, End);
    var temp = new Array();
    $("#myCanvas").mousemove(function(e){
        console.log("mouse is movin!");
        if(i==1)
        {
          var pos = findPos(this);
          console.log("I = 1 AHHHH")
          ctx.moveTo(Start.x, Start.y);
          ctx.lineTo(e.clientX-pos.x, e.clientY-pos.y);

          ctx.stroke();

        }
        else{

        }
    })


    $("#myCanvas").click(function(event){
        var pos = findPos(this);
        var x = event.pageX - pos.x;
        var y = event.pageY - pos.y;
        if (i==0)
        {
            Start = {x:x,y:y}
            i++;
        }
        else if(i==1) {
            End = {x:x,y:y}
            ctx.moveTo(Start.x , Start.y);
            ctx.lineTo(End.x , End.y);
            ctx.stroke();
            Line = (Start, End);
            Edges.push(Line);
            i++;
        }

        while(i==2) {
            Start = {x:0, y:0};
            End = {x:0, y:0};
            i=0;
        }
    });
};

除此之外，我还有一个名为 myCanvas 的相关画布。

基本上它的作用是让线条从那个点到我的光标，直到我再次点击，然后它会停止，现在我只剩下这堆线条了。

在我点击一次从点击的位置到我的光标然后在我第二次点击的地方放置一条永久线后，如何获得一条“临时”线。

4

2 回答 2

9

你非常接近你的代码。以下是一些填补空白的调整。

[编辑以显示单个画布解决方案]

为了避免在用户拖动新线时绘制“一堆线”，您必须在每次鼠标移动期间清除画布并仅绘制最新拖动的线。

清除画布也会清除用户之前绘制的所有线条，因此您必须在每次拖动时重新绘制之前的线条。为此，您必须存储有关每条线的足够信息以重绘它。

对于每一行，您都需要起点和终点（x1/y1 和 x2/y2）。您可以将这些起点和终点放在一个对象中，并将线对象存储在一个数组中：

// an array to store previous lines
var storedLines=[];

// to store a new line
storedLines.push( { x1:10, y1:20, x2:50, y2:35 } );

此函数重绘所有之前绘制的线条

    function redrawStoredLines(){

        ctx.clearRect(0,0,canvas.width,canvas.height);

        if(storedLines.length==0){ return; }

        // redraw each stored line
        for(var i=0;i<storedLines.length;i++){
            ctx.beginPath();
            ctx.moveTo(storedLines[i].x1,storedLines[i].y1);
            ctx.lineTo(storedLines[i].x2,storedLines[i].y2);
            ctx.stroke();
        }
    }

现在显示用户的拖动线要容易得多，如下所示：

function handleMouseMove(e){

  if(!isDown){ return; }

  redrawStoredLines();

  var mouseX=parseInt(e.clientX-offsetX);
  var mouseY=parseInt(e.clientY-offsetY);

  // draw the current line
  ctx.beginPath();
  ctx.moveTo(startX,startY);
  ctx.lineTo(mouseX,mouseY);
  ctx.stroke()

}

这是代码和小提琴：http: //jsfiddle.net/m1erickson/NnZ7a/

<!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 storedLines=[];
    var startX=0;
    var startY=0;
    var isDown;

    ctx.strokeStyle="orange";
    ctx.lineWidth=3;

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});

    $("#clear").click(function(){ storedLines.length=0; redrawStoredLines(); });

    function handleMouseDown(e){
      var mouseX=parseInt(e.clientX-offsetX);
      var mouseY=parseInt(e.clientY-offsetY);

      isDown=true;
      startX=mouseX;
      startY=mouseY;

    }

    function handleMouseMove(e){

      if(!isDown){ return; }

      redrawStoredLines();

      var mouseX=parseInt(e.clientX-offsetX);
      var mouseY=parseInt(e.clientY-offsetY);

      // draw the current line
      ctx.beginPath();
      ctx.moveTo(startX,startY);
      ctx.lineTo(mouseX,mouseY);
      ctx.stroke()

    }


    function handleMouseUp(e){

      isDown=false;

      var mouseX=parseInt(e.clientX-offsetX);
      var mouseY=parseInt(e.clientY-offsetY);

      storedLines.push({x1:startX, y1:startY, x2:mouseX, y2:mouseY});

      redrawStoredLines();

    }


    function redrawStoredLines(){

        ctx.clearRect(0,0,canvas.width,canvas.height);

        if(storedLines.length==0){ return; }

        // redraw each stored line
        for(var i=0;i<storedLines.length;i++){
            ctx.beginPath();
            ctx.moveTo(storedLines[i].x1,storedLines[i].y1);
            ctx.lineTo(storedLines[i].x2,storedLines[i].y2);
            ctx.stroke();
        }
    }

}); // end $(function(){});
</script>

</head>

<body>
    <p>Drag to draw lines</p>
    <canvas id="canvas" width=300 height=300></canvas><br/>
    <button id="clear">Clear Canvas</button>
</body>
</html>
于 2013-05-08T06:31:23.940 回答
0

就我而言，我尝试过

ctx.clearRect(0, 0, canvas.width, canvas.height);

If this doesn't work and when you redraw your canvas, previous shapes appear again, try this

    ctx.beginPath();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.closePath();
于 2021-07-28T16:10:04.623 回答