删除上一个笔划（临时行）-Javascript / HTML5

问题描述 投票：6回答：1

我正在尝试制作一个简单的绘画应用程序，并且我希望线条在指定线条起点之后进行预览。相应的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。

基本上，它的作用是使线条从该点一直指向我的光标，直到再次单击，然后它停止，现在我只剩下这堆线条。

一旦单击鼠标后，从该单击的位置到我的光标，然后在第二次单击的位置放置一个永久行，如何获得“临时”行。

javascript jquery html canvas jquery-events
1个回答
6
投票

您与您的代码非常接近。这是一些可以弥补空白的调整。

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

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

清除画布还会清除用户先前绘制的任何线条，因此您必须在每次拖动时重新绘制先前的线条。为此，您必须存储有关每行的足够信息才能重绘它。

对于每一行，您将需要起点和终点（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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.