在鼠标悬停时调整现有矩形的大小

Question

我试了下教程，终于找到了解决办法，差不多。这是 stackblitz 的 link - Resize SVG Rectangle

这是一个场景，使用 SVG 绘制了一个矩形，默认周长工作正常。我的要求是当我将鼠标悬停在现有矩形上时调整现有矩形的大小，如果我单击任何其他部分而不是矩形，那么它应该从头开始绘制。所以现在，无论我做什么，它都会从头开始绘图，而不是调整现有绘图的大小。

仅供参考，这就是我尝试调整大小的方法：Resize Rectangle

这些是附加到 svg 元素的事件：

//This section starts drawing rectangle from scratch
startDrawing(evt: MouseEvent) {
    this.createdShape = {
      type: this.shapeType,
      x: evt.offsetX,
      y: evt.offsetY,
      w: 0,
      h: 0,
  };

  this.shapesToDraw.fill(this.createdShape); //This fills with the created shape
}

//This does the resizing but only when I start drawing a rectangle from scratch, doesn't imply resizing for existing rectangle
keepDrawing(evt: MouseEvent) {
   this.createdShape.w = evt.offsetX - this.createdShape.x;
   this.createdShape.h = evt.offsetY - this.createdShape.y;
}

//This stops drawing and sets **createdShape** to null
stopDrawing() {
   this.createdShape = null;
}

我正在考虑检查是否有任何特定条件来检查调整大小，如下所示：

private resizeConMeet(evt: MouseEvent) {
    
}

但我不确定是否有任何方法可以做到这一点？希望得到建议或指导以使其发挥作用。

Answer 1

干得漂亮 :)

所以，感谢 StackBlitz，我可以调整代码。

主要思想：

当你开始画的时候，如果有的话尽量使用之前的形状
- this.createdShape.x < evt.x < this.createdShape.x + w
- this.createdShape.y < evt.y < this.createdShape.y + h
这意味着你不应该在停止绘制时擦除之前的形状（this.createdShape = null）
但这会产生一个错误，因为它会在鼠标移动时继续编辑形状。通过添加一个变量 (isDrawing) 来解决这个问题，当您开始绘制时将其设置为 true 并在停止绘制时设置为 false 。使用此变量可防止在不绘制时重绘矩形

请自己尝试。这里是my version

在鼠标悬停时调整现有矩形的大小

Resize An Existing Rectangle On Mouse Hover

svg

typescript

angular

svg-rect