### 如何在 Angular 中使用 Konva.Transformer 限制元素拖动范围 为了防止 `Konva.Transformer` 拖动的元素超出指定边界，在设置变换器时可以监听节点的位置变化并加以约束。具体来说，可以通过重写 `dragmove` 或者其他相关事件来控制位置。 当检测到形状即将移出允许区域时，调整其坐标使其保持在范围内。下面是一个具体的实现方法： #### 实现代码示例 ```typescript import { Component, OnInit } from '@angular/core'; import * as Konva from 'konva'; @Component({ selector: 'app-root', template: `<div id="container"></div>` }) export class AppComponent implements OnInit { private stage: Konva.Stage; private layer: Konva.Layer; private rect: Konva.Rect; private transformer: Konva.Transformer; ngOnInit() { this.stage = new Konva.Stage({ container: 'container', // 容器ID width: window.innerWidth, height: window.innerHeight }); this.layer = new Konva.Layer(); const bounds = { top: 0, bottom: this.stage.height(), left: 0, right: this.stage.width() }; this.rect = new Konva.Rect({ x: 150, y: 90, width: 100, height: 80, fill: '#00D2FF', draggable: true }); this.transformer = new Konva.Transformer(); this.layer.add(this.rect); this.layer.add(this.transformer); this.stage.add(this.layer); this.transformer.attachTo(this.rect); this.transformer.enabledAnchors(['middle-left', 'middle-right']); this.rect.on('transformend', function () { let nodePos = this.position(); if (nodePos.x < bounds.left) { nodePos.x = bounds.left; } if (nodePos.y < bounds.top) { nodePos.y = bounds.top; } if (nodePos.x + this.width() > bounds.right) { nodePos.x = bounds.right - this.width(); } if (nodePos.y + this.height() > bounds.bottom) { nodePos.y = bounds.bottom - this.height(); } this.position(nodePos); this.getLayer().batchDraw(); }.bind(this)); } } ``` 此段代码创建了一个矩形对象，并为其绑定了一个 `Transformer` 工具用于缩放和平移操作。每当发生转换结束(`transformend`)事件时，会检查该图形的新位置是否超出了设定好的界限；如果确实越界，则立即将它拉回到合法区域内[^1]。