前言
在上一章中我们学习了如何实现编辑拖拽效果：
今天我们来学习如何实现辅助线与缩放效果：
学习建议： 拉取源代码到本地，启动项目并结合文章讲解进行学习。
实现辅助线效果
定义横竖辅助线
在画布区域定义横竖辅助线，实现如下：
代码位置：src/components/CanvasArea/index.tsx
定义数据状态
定义 markline 用于控制辅助线展示位置：
代码位置：src/components/CanvasArea/index.tsx
定义辅助线计算方法
在定义计算方法之前，我们先梳理清楚一个问题什么时候应该展示辅助线？
回顾一下前面展示的的图片：
不难看出在拖拽模块靠近其他模块边界的时候会展示辅助线，可能出现的情况：
梳理清楚了辅助线出现的10种情况，那么我们如何在拖拽过程控制这些辅助线的展示呢？
1、收集画布内所有模块的辅助线位置，实现如下：
我们先定义好存储辅助线信息的接口：
代码位置src/components/CanvasArea/declare/index.ts
实现计算方法：
通过聚焦元素与非聚焦元素的宽高和相对位置分别计算垂直纵线信息和水平横线信息：
计算垂直纵线：
计算水平横线：
2、监听模块拖拽事件，在监测到拖拽模块靠近这些辅助线位置的时候显示辅助线，实现如下：
实现缩放效果
实现四角和横竖缩放效果：
定义缩放模式
首先，我们在物料协议定一个字段用于区分缩放模式：
代码位置：src/components/MaterialPanel/registerConfig.tsx
鼠标悬停样式
我们先了解一下 cusor 属性几个值：
通过控制 cursor 的值来控制鼠标样式，实现以下效果：
实现如下：
代码位置：src/components/CanvasArea/Block/index.tsx
实现聚焦效果
定义缩放节点位置信息：
聚焦时展示 ui：
代码位置：src/components/CanvasArea/Block/index.tsx
实现元素缩放
监听控制四个缩放点的鼠标移动事件，根据缩放点的位置和鼠标移动距离来更新元素样式，实现如下：
代码位置：src/components/CanvasArea/Block/index.tsx
学习资料
下期将持续完善新功能，关注不迷路～
