按纵横比 angular div 调整大小

Question

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

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

我尝试使用这个答案：

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

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>

Answer 1

您可能需要参考 this post。 post 中有一个 stackblitz link，您可能会发现它很有用。

Answer 2

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

我尽量让它简单实用。如果我们总是 adding/subtracting 两者的数字相同，我认为不需要重新计算高度和宽度。

mouseup 侦听器只是为了移除mousemove 侦听器。

我刚刚用我的解决方案为你的项目创建了一个 StackBlitz 分支。

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

按纵横比 angular div 调整大小

Resize with aspect ration angular div

resize

drag

typescript

angular

proportions