调整纵横比角度 div 的大小答案

【问题标题】：Resize with aspect ration angular div调整纵横比角度 div 的大小
【发布时间】：2022-01-23 21:59:22
【问题描述】：

我正在尝试调整 div 的角度以保持（矩形的）纵横比。但我做不到。我无法拖动 div 的角并调整其大小。这是一个stackbliz

https://stackblitz.com/edit/icon-font-awesome-f6ydhr?file=src/app/app.component.ts

我尝试使用这个答案： https://stackoverflow.com/a/30494623/1540456

但没有成功。这是一些代码

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  width= 300;
  height= 150;
  color= 'red';
  
  dragEvent(event: MouseEvent) {
    let ratio = (16 / 10);
    let diagonal = this.height * ratio;
    this.height = this.getHeight(diagonal, ratio);
    this.width = this.getWidth(this.height, ratio);
}

getHeight(length, ratio) {
    let height = ((length) / (Math.sqrt((Math.pow(ratio, 2) + 1))));
    return Math.round(height);
}

getWidth(length, ratio) {
    let width = ((length) / (Math.sqrt((1) / (Math.pow(ratio, 2) + 1))));
    return Math.round(width);
}
}

在html中

<div class="resize" (mousedown)="dragEvent($event)">
    <p>drag</p>
</div>

【问题讨论】：

标签： angular typescript resize drag proportions

【解决方案1】：

在 mousedown 处理程序中，我在 mousemove 事件上添加了一个侦听器，并且在每次移动时，高度和宽度都将根据 event.pageX 进行调整。

我尽量保持简单和有用。如果我们总是向两者添加/减去相同的数字，我认为不需要重新计算高度和宽度。

mouseup 监听器只是移除 mousemove 监听器。

我刚刚使用我的解决方案为您的项目创建了 StackBlitz Fork。

https://stackblitz.com/edit/icon-font-awesome-m1scu4

【讨论】：

感谢您的回答！它工作得很好。有没有办法实现可拖动功能？
很高兴听到这个消息。可拖动功能是什么意思？
你也可以在页面周围拖动 div :)
当然。我只是为此使用 CdkDragDrop。我已经更新了我的 stackblitz 解决方案
嗯，它正在工作，但并不完美。但是，div 现在在调整大小时不会保持 16:9 的比例。有可能修复吗？

【解决方案2】：

您可能需要引用this post。该帖子中有一个 stackblitz 链接，您可能会发现它很有用。

【讨论】：