使用 Angular 进行元素旋转时的性能和体验不佳

Question

在 Angular 17 中，我正在构建一个板，上面放置了可以移动、调整大小和旋转的各种元素。 我会在序言中说，我对 Angular 的经验很少，并且我不排除某些方法也可能有问题，随着时间的推移，我会改进脚本，但目前就是这样。

工作正在顺利进行，虽然尚未完成，但我在轮换时遇到了可用性问题。 用户体验似乎很差，很容易失去对锚点（绿色方块）的注意力，而且旋转控制也很差，很难准确。 我尝试在旋转上添加慢动作（SLOWDOWN），但也许情况更糟。 有人对如何改进这方面有建议吗？ 旋转逻辑位于 resizeDiv 函数内部，该函数还处理 mouseevent 上的大小调整。

这里具体是旋转度数的计算，但我认为问题比这更广泛，我邀请您更广泛地了解它在整个项目中的工作原理。

var angle = this.startAngle + Math.atan2(distY, distX) * (180 / Math.PI) * this.SLOWDOWN;
angle = Math.round(angle / this.MIN_DEG) * this.MIN_DEG;

我将整个脚本带回 stackblitz： https://stackblitz.com/edit/stackblitz-starters-fr4yyk

Answer 1

将此添加到

onMouseEnter

以防止创建多个缩放器和旋转器：

if (this.isRotating || this.isResizing) {
  return;
}

SLOWDOWN

没有多大作用，删除即可。但您绝对需要放慢速度（称为 throttle）您的

resizeDiv

(

onmousemove

)。您可以查看 this 问题，了解 HostListener 的一些想法，即使它是用于去抖的。如果您不熟悉油门（以及延迟和反跳），我建议您完成本课程的所有任务。

您还需要重新考虑旋转原点。现在它是绿色方块的最后一个位置。而如果进一步旋转div并且鼠标非常接近(mouseX, mouseY)，就会得到跳跃的效果。将 div 的中心作为旋转原点更有意义。