我嘗試按照教程進行操作，最后幾乎找到了解決方案。這是 stackblitz 的鏈接 - 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) {
}
但我不確定是否有任何方法可以做到這一點？期望得到建議或指導以使其發揮作用。
uj5u.com熱心網友回復：
干得好:)
所以，感謝 StackBlitz，我可以調整代碼。
主要思想：
- 開始繪圖時，請嘗試使用以前的形狀，如果
this.createdShape.x < evt.x < this.createdShape.x wthis.createdShape.y < evt.y < this.createdShape.y h
- 這意味著
this.createdShape = null當您停止繪圖時，您不應該擦除之前的形狀 ( ) - 但這會產生一個錯誤，因為它會在滑鼠移動時繼續編輯形狀。通過添加一個變數 (
isDrawing) 來解決此問題，該變數true在您開始繪制時設定為false在您停止繪制時設定為。使用此變數可防止在不繪制時重繪矩形
請嘗試自己做。這是我的版本
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/451852.html
下一篇：SVG不渲染-反應