1

キャンバスに四角形を追加するコードを以下に示します。これに関していくつか質問があります。

  • 追加した長方形を作成後に移動することはできますか?
  • 追加した長方形を削除することはできますか?

  • ボタンをクリックして、多数の長方形を追加した後、追加したすべての長方形の位置 (x、y、幅、高さ) を取得できますか?

    

    <script>
  function rect()
  {
  var canvas = document.getElementById('drawing'),
  ctx = canvas.getContext('2d'),
  rect = {},
  drag = false;
  function init() {
  canvas.addEventListener('mousedown', mouseDown, false);
  canvas.addEventListener('mouseup', mouseUp, false);
  canvas.addEventListener('mousemove', mouseMove, false);
  }
  function mouseDown(e) {
  rect.startX = e.pageX - this.offsetLeft;
  rect.startY = e.pageY - this.offsetTop;
  drag = true;
  }
  function mouseUp() {
  drag = false;
  }
  function mouseMove(e) {
  if (drag) {
  rect.w = (e.pageX - this.offsetLeft) - rect.startX;
  rect.h = (e.pageY - this.offsetTop) - rect.startY ;
  //ctx.clearRect(0,0,canvas.width,canvas.height);
  draw();
  }
  }
  function draw() {
  ctx.globalAlpha=0.5; // Half opacity
  ctx.fillStyle= "#b0c2f7";
  //ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
  ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
  }
  init();
  }
  </script>
    

    <div id="canvasDiv">
  <canvas id="drawing" width="580px" height="788px" style="border:2px solid #000; background: #FFF;"></canvas>
  </div>
  <script>
  var canvas = document.getElementById('drawing');
  var context = canvas.getContext('2d');
  var imageObj = new Image();
    

     imageObj.onload = function() {
  context.drawImage(imageObj, 69, 50);
  };
  imageObj.src = 'http://localhost/test/Images/DSC0273446.jpg';
  </script>
    

    <div id="rect"> 
  <p><button onclick="rect();">Rectangle</button></p>
  </div>

    この件に関して私が得ることができるすべての助けに本当に感謝します、ありがとう!

4

1 に答える 1

4

追加した長方形を作成後に移動することはできますか?

いいえ、いったん描画されると、それは単なるピクセルであり、canvas. 形状を '移動' する通常の方法canvasは、clearRect()(または全体canvas)に移動してから、制御されたループfillRect()内のわずかに異なる位置に移動することです。requestAnimationFrame

追加した長方形を削除することはできますか?

描いた場所を保存しておけばOKですclearRect()。これにより、オブジェクトではなくピクセルの領域がクリアされることに注意してください。以前の描画操作の結果は自動的に再表示されません。

ボタンをクリックして、多数の長方形を追加した後、追加したすべての長方形の位置 (x、y、幅、高さ) を取得できますか?

いいえ。canvasは描画オブジェクトを保存せず、ピクセル イメージ データのみを保存します。描画されたオブジェクトを追跡したい場合は、自分で行う必要があります。ピクセルの代わりに形状を操作したい場合は、fabric.jsのようなライブラリがあり、オブジェクト操作レイヤーを の上に追加するか、通常の DOM メソッドでグラフィックスを作成できる要素を代わりにcanvas使用できます。svg

于 2013-03-10T11:21:49.367 に答える