我正在嘗試以保持縱橫比（矩形）的角度調整 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>
uj5u.com熱心網友回復：
你可能想參考這篇文章。在那篇文章中有一個 stackblitz 鏈接，您可能會發現它很有用。
uj5u.com熱心網友回復：
在 mousedown 處理程式中，我在 mousemove 事件上添加了一個偵聽器，并且在每次移動時，高度和寬度將根據 event.pageX 進行調整。
我試圖讓它盡可能簡單和有用。如果我們總是向兩者添加/減去相同的數字，我認為沒有必要重新計算高度和寬度。
mouseup 監聽器只是移除 mousemove 監聽器。
我剛剛使用我的解決方案為您的專案創建了一個 StackBlitz Fork。
https://stackblitz.com/edit/icon-font-awesome-m1scu4
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/390665.html
上一篇：【藍橋真題1】這道用了7個for回圈的藍橋真題，讓舍友哭著跑出考場【內附原題資源】
下一篇：更改行內日期選擇器角度材料的標題