Angular 8 可绘制可移动可调整大小矩形的组件实现咨询

#

核心结论 #

针对你的需求，完全没必要引入重型依赖，基于Angular 8的原生配套能力就能搭建出符合要求的轻量方案，没有版本兼容风险，整体实现成本远低于自己从零写交互逻辑。 #

方案优先级排序 #

• 首推零额外依赖方案：Angular CDK 能力组合实现
  这是适配性最好的轻量方案，@angular/cdk 是Angular8官方配套的组件开发工具库，整体引入拖拽、调整相关模块的包增量不到20KB，完全没有peer dependency 冲突问题，三个核心需求都能稳定覆盖：
  1. 矩形绘制：仅需在画布容器上绑定原生鼠标事件，记录鼠标按下的起始坐标、移动过程中的实时坐标，动态计算矩形的相对位置与宽高，鼠标抬起时完成矩形创建即可，不需要第三方逻辑介入
  2. 矩形拖拽移动：给生成的矩形元素添加cdkDrag指令，即可获得原生拖拽能力，不需要自己计算鼠标偏移、处理拖拽过程的位置同步，CDK会自动处理拖拽状态、边界限制等细节
  3. 矩形尺寸调整：借助CDK的内置resize指令集，在矩形边缘的8个调整热区绑定对应的resize手柄，即可自动实现边角、边部的尺寸拖动调整，不需要自己写鼠标与热区的交互判断逻辑
• 次推开箱即用方案：轻量div拖拽调整组件
  如果不想手动拼接CDK指令，可以选择专门适配Angular 8的轻量拖拽调整组件，这类组件整体体积在10-20KB区间，已经内置了矩形创建、拖拽移动、尺寸调整的全流程逻辑，引入模块后直接传入配置即可用，不需要自己写交互逻辑
• 避坑提醒：不要选型过度设计的重型库
  比如基于Canvas渲染的全功能绘图库（Konva、Fabric.js等），这类库动辄数百KB的包体积，对于仅需要矩形绘制、拖拽调整的场景属于能力严重冗余，会无端增大项目打包体积，不符合轻量要求

自实现参考 #

你最初尝试的直接操作div的实现思路本身是完全可行的，只是需要补全几个交互细节就能达到成熟组件的体验，实现时注意避开几个常见踩坑点即可：

• 绘制阶段：鼠标移动时要实时修正宽高、位置的计算逻辑，避免出现鼠标往画布左上方向拖动时，矩形宽高为负值的异常情况
• 拖拽阶段：拖拽开始时要提前记录鼠标位置与矩形左上角的固定偏移量，拖动时基于这个偏移量更新矩形位置，避免出现鼠标点中矩形后矩形跳变到鼠标正下方的错位问题
• 调整阶段：给8个调整热区设置足够的点击识别区域，避免用户鼠标稍微偏一点就无法触发调整逻辑；同时给样式更新加简易节流，避免高频触发DOM重绘导致的页面卡顿

内容的提问来源于stack exchange，提问作者Maayan Hope