Question

我在寻找画布图时遇到了下面的代码。 http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

$('#canvas').mousedown(function(e){
     var mouseX = e.pageX - this.offsetLeft;
     var mouseY = e.pageY - this.offsetTop;

     paint = true;
     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
     redraw();
   });

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}
function redraw(){
  canvas.width = canvas.width; // Clears the canvas

  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 5;

  for(var i=0; i < clickX.length; i++)
  {     
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}

当mousedown（）事件触发时，通过传递x和y值来调用addClick（）函数。（x和y合作）。 没有值传递 var拖动。

然后在测试if(clickDrag[i] && i){..}条件的地方调用redraw（）。

我的问题是

1）clikDrag []数组如何获取值以及为什么在我们有x和y co-ords时需要它。

2）以下代码实际上做了什么？ clickX[i-1] and clickX[i]-1

之间的差异

if(clickDrag[i] && i){
          context.moveTo(clickX[i-1], clickY[i-1]);
         }else{
           context.moveTo(clickX[i]-1, clickY[i]);
         }

Answer 1

1）据我所知，事实并非如此。 “clickDrag”正在添加第三个参数，但只给出了2个。

// two params passed
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);

function addClick(x, y, dragging) {
    ...
    clickDrag.push(dragging);
}

我猜测addClick函数也在其他地方调用，使用此参数

2）我的猜测是，如果用户正在拖动，则clickDrag正在存储。因此，如果拖动，移动到下一个鼠标pos（clickX [i-1]引用数组中的鼠标单击位置，因此-1（数组从0开始））

如果不拖动，则代码从数组索引i的结果中说-1。我不知道这个电话的背景，所以无法帮助你，抱歉。

EDIT -------------

所以我下载了源代码，但在第二个问题中找不到您引用的代码。我找到了这个，但是：

    context.beginPath();
    if(clickDrag[i] && i){
        context.moveTo(clickX[i-1], clickY[i-1]);
    }else{
        context.moveTo(clickX[i], clickY[i]);
    }
    context.lineTo(clickX[i], clickY[i]);
    context.closePath();

您是否有可能意外添加-1？

画布绘图 - 当我们有x和y合作时，为什么需要clickDrag.push（拖动）？

1 个答案: