0

このコードを更新して、2 つのクリック イベントの間にのみ線を引くにはどうすればよいですか? つまり、新しいクリックのペアの新しい開始点を設定し、ポリラインの作成を停止するにはどうすればよいですか? Click イベントではなく、Mouse-down および -Up イベント内に行を保持することもできますか?

ウェブサンプルはこちら

そしてここにコードがあります

var needFirstPoint = true;
function drawNextLine(ctx, x, y) {
if (needFirstPoint) {
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.moveTo(x, y);
    needFirstPoint = false;
}
else {
    ctx.lineTo(x, y);
    ctx.stroke();
}
 }
  $(document).ready(function(){
  var canvas = $('#myCanvas').get(0);
  if (!canvas.getContext) { return; }
  var ctx = canvas.getContext('2d');

  $('#myCanvas').on('click', function(e){
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    drawNextLine(ctx, x, y);
  });
});
4

2 に答える 2

0

私はかつてhttp://www.kolchose.org/simon/ajaximagemapcreator/に同様の関数を書き、ダブルクリックを使用してキャンバスの描画を停止しました。

于 2013-05-10T19:10:35.520 に答える
0

それは超流動的ではないので、もっと遊ぶ必要があるかもしれませんが、これは私にとってはうまくいきました:

else {
    ctx.lineTo(x, y);
    ctx.stroke();
    needFirstPoint = true;
}
于 2013-05-10T19:11:12.090 に答える