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() イベントが発生すると、x 値と y 値を渡すことによって addClick() 関数が呼び出されます。(x 座標と y 座標)。var dragingの値は渡されません。

if(clickDrag[i] && i){..}次に、条件がテストされる場所で redraw() が呼び出されます。

私の質問は

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」は 3 番目のパラメータを追加していますが、指定されているのは 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 を示しています。この通話の状況がわからないので、お役に立てません。申し訳ありません。

編集 - - - - - - -

そのため、ソースをダウンロードしましたが、2 番目の質問で参照したコードが見つかりませんでした。しかし、私はこれを見つけました：

    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 に答える