0

我在寻找画布绘图时遇到了以下代码。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() 事件触发时 addClick() 函数通过传递 x 和 y 值来调用。（x 和 y 坐标）。没有传递var 拖动的值。

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

我的问题是

1) clikDrag[] 数组如何获取值以及当我们有 x 和 y 坐标时为什么需要它。

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]);
         }
4

1 回答 1

0

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 正在存储用户是否正在拖动。因此，如果拖动，则移动到下一个鼠标位置（clickX[i-1] 引用数组中的鼠标单击位置，因此是 -1（数组从 0 开始））

如果不拖动，代码会从数组索引 i 的结果中说 -1。我不知道这个电话的上下文，所以不能帮助你，对不起。

编辑 - - - - - - -

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

    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？

于 2012-04-20T02:43:52.210 回答