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受控循环中稍微不同的位置。

是否可以删除已添加的矩形？

只要您存储了绘制它的位置，您就可以clearRect(). 请注意，这会清除像素区域，而不是对象 - 先前绘制操作的结果不会自动重新出现。

在我添加了一堆矩形之后，我可以通过单击一个按钮来检索所有添加的矩形位置（x、y、宽度和高度）吗？

不canvas，不存储绘制的对象，只存储像素图像数据。如果要跟踪已绘制的对象，则必须自己进行。如果你想操作形状而不是像素，那么有像fabric.js这样的库，它在上面添加了一个对象操作层canvas，或者你可以使用一个svg元素来代替它，让你用普通的 DOM 方法创建图形。

于 2013-03-10T11:21:49.367 回答