可拖拽、缩放、旋转组件之 - 生成辅助线和撤销回退功能

🌈介绍

基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件

• 拖拽&区域拖拽
• 支持缩放
• 旋转
• 网格拖拽缩放

这节主要来分享如何使用es-drager，根据现有功能实现拖拽时生成辅助线、撤销重做等画布常用功能

话不多说，咱们开始吧！

画布准备工作

这里只是一个简单的画布模板

画布数据源

import { ref, CSSProperties } from 'vue' // 组件类型 type ComponentType = { component: string // 内部组件名称，自定义组件需要提前全局注册 text?: string // 文本 width?: number height?: number top?: number left?: number angle?: number style?: CSSProperties // 样式 } interface EditorState { componentList: ComponentType[] } const data = ref<EditorState>({ componentList: [ { component: 'div', text: 'div1', width: 100, height: 100, left: 0, top: 0 }, { component: 'div', text: 'div2', width: 100, height: 100, top: 100, left: 100 } ] })

循环渲染组件到画布上

html

<Drager v-for="item in data.componentList" v-bind="item" > <component :is="item.component">{
  { item.text }}</component> </Drager>

生成辅助线

当拖拽元素时，通过比较拖拽元素与画布上其他元素的位置，当某个元素与拖拽元素的距离接近时，显示辅助线

拖拽元素在垂直方向上不同对齐方式

1. 底对顶：拖拽元素的底部与对比元素的顶部对齐
2. 底对底：拖拽元素的底部与对比元素的底部对齐
3. 中对中：拖拽元素的中部与对比元素的中部对齐
4. 顶对顶：拖拽元素的顶部与对比元素的顶部对齐
5. 顶对底：拖拽元素的顶部与对比元素的底部对齐

看下图可以清晰的理解这几种对齐方式

拖拽元素在水平方向上不同对齐方式

1. 右对左：拖拽元素的右侧与对比元素的左侧对齐
2. 右对右：拖拽元素的右侧与对比元素的右侧对齐
3. 中对中：拖拽元素的水平中心与对比元素的水平中心对齐
4. 左对左：拖拽元素的左侧与对比元素的左侧对齐
5. 左对右：拖拽元素的左侧与对比元素的右侧对齐<