0

私は HTML5 キャンバス ペインタを実行しており、描画、四角形、円、およびさまざまな色のオプションを配置するオプションがあります。私の問題は、もともとデフォルト値が「鉛筆」のvarツールを持っていて、この変数を「rect」に変更したかったことです（最初にこれを機能させたかったので、まだ円から始めていませんでした）それぞれのdivで、描画、長方形、または円のifステートメントを使用できるようにします。これは機能しませんでしたが、onclick-function に配置したアラートを受け取ったので、変数を選択しました。その後、ブール変数（pencil = true、rect = false、1つの「状態」になる）を使用しようとしましたが、それも機能しません。私はすでにif文を書き留めていますが、したがって、今の私の結論は、どういうわけかブール値を定数として持っているということです（pencil = trueがvarのデフォルト状態であるため）、これはありそうにありません。より論理的な説明は、div クリックで変数の値を正しく変更していないということです。

これが私のコードの一部です：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var color = "black";
var drawing = false;
var pencil = true;
var rect = false;



//Pencil
var pencilDiv = document.getElementById("pencil");
pencilDiv.onclick = function () {
  pencil = true;
  rect = false;
}

//Rect
var rectDiv = document.getElementById("rect");
rectDiv.onclick = function () {
  rect = true;
  pencil = false;
}

if (pencil) {
  canvas.onmousedown = function (event) {
    drawing = true;
  }

  canvas.onmousemove = function (event) {
    if (drawing) {
      draw()
    }
  }

  canvas.onmouseup = function (event) {
    drawing = false;
  }
}

if (rect) {
  canvas.onmousedown = function (event) {
    rect()
  }
}

draw 関数と rect 関数の両方が機能します。if(pencil == true && rect == false) も試しましたが、どちらも機能しません。

答えが明らかで、それが表示されない場合は申し訳ありません。Javascriptでプログラミングするのはこれが2回目です。

前もって感謝します！

4

2 に答える 2

0

マウス イベント ハンドラーの割り当てが、条件が変わるたびに暗黙的に再実行されるかのように、コードを記述しました。それはそれが機能する方法ではありません。そのコードは各「クリック」イベントで実行されるため、描画コントロールのイベント ハンドラー内のハンドラーを単純に再割り当てする必要があります。

例えば：

pencilDiv.onclick = function () {
  canvas.onmousedown = function (event) {
    drawing = true;
  }

  canvas.onmousemove = function (event) {
    if (drawing) {
      draw()
    }
  }

  canvas.onmouseup = function (event) {
    drawing = false;
  }
}

rectDiv.onclick = function () {
  canvas.onmousedown = function (event) {
    rect()
  }
  canvas.onmousemove = canvas.onmouseup = null;
}

または、マウス イベント ハンドラーのコードでフラグをチェックすることもできます。これにより、各コントロールの「クリック」イベントでイベント ハンドラーを再割り当てする必要がなくなります。

于 2012-12-15T20:21:56.127 に答える
0

変数とメソッド名は同じ rect と rect() です。JavaScript は同じ名前の変数と関数をサポートしていないため、rect() 関数によって rect 変数の値がオーバーライドされ、常に true が返されますが、期待は false です。rect の変数名または関数名を変更します。

于 2012-12-16T00:33:00.927 に答える