一、简介
在 PPTist 项目中，画布是指幻灯片编辑区域的主要工作区，具体包括：
- 基础尺寸
- 主要功能：显示和编辑幻灯片、元素拖拽和缩放等、网格线和标尺对齐、元素的选择和多选
- 相关状态：缩放比例、画布能否被拖拽、网格线尺寸等
- 主要操作：缩放、平移、显示网格线标尺等
- 组成部分：背景层、内容层、工具层
- 画布的特点：
响应式：自适应窗口大小、保持宽高比例、支持缩放适配
交互性：支持拖拽移动、支持元素选择、支持快捷键操作
辅助功能：网格对齐、标尺显示、智能参考线
二、基础属性
画布的定义在src/store/main.ts文件，看一下接口定义，包含各个部分的编辑状态、选中状态等等
// 主状态接口定义
export interface MainState {activeElementIdList: string[] // 被选中的元素ID集合handleElementId: string // 正在操作的元素ID（如调整大小、旋转等）activeGroupElementId: string // 组合元素中被选中的子元素IDhiddenElementIdList: string[] // 被隐藏的元素ID集合canvasPercentage: number // 画布可视区域百分比canvasScale: number // 画布缩放比例（基于宽度1000px）canvasDragged: boolean // 画布是否被拖拽移动thumbnailsFocus: boolean // 左侧导航缩略图区域是否聚焦editorAreaFocus: boolean // 编辑区域是否聚焦disableHotkeys: boolean // 是否禁用快捷键gridLineSize: number // 网格线尺寸（0表示不显示网格线）showRuler: boolean // 是否显示标尺creatingElement: CreatingElement | null // 正在创建的元素信息creatingCustomShape: boolean // 是否正在绘制自定义形状availableFonts: typeof SYS_FONTS // 当前环境可用的字体列表toolbarState: ToolbarStates // 右侧工具栏状态clipingImageElementId: string // 当前正在裁剪的图片IDisScaling: boolean // 是否正在进行元素缩放richTextAttrs: TextAttrs // 富文本编辑器属性selectedTableCells: string[] // 选中的表格单元格selectedSlidesIndex: number[] // 当前选中的页面索引集合dialogForExport: DialogForExportTypes // 导出对话框类型databaseId: string // 当前应用的indexedDB数据库ID 随机数textFormatPainter: TextFormatPainter | null // 文字格式刷shapeFormatPainter: ShapeFormatPainter | null // 形状格式刷showSelectPanel: boolean // 是否显示选择面板showSearchPanel: boolean // 是否显示查找替换面板showNotesPanel: boolean // 是否显示批注面板
}
三、计算属性
// 计算属性
getters: {// 获取当前选中的元素列表activeElementList(state) {const slidesStore = useSlidesStore()const currentSlide = slidesStore.currentSlideif (!currentSlide || !currentSlide.elements) return []return currentSlide.elements.filter(element => state.activeElementIdList.includes(element.id))},// 获取当前操作的元素handleElement(state) {const slidesStore = useSlidesStore()const currentSlide = slidesStore.currentSlideif (!currentSlide || !currentSlide.elements) return nullreturn currentSlide.elements.find(element => state.handleElementId === element.id) || null},
},
四、方法
action 的定义还挺多的，但是里面的实现都比较简单，都是设置状态的值。大家肯定看一眼就明白啦
五、使用
画布状态都在哪里使用，这是一个关键的问题，以后我们在开发新功能的时候，需要知道什么时候要调用这里面的方法。
我们以 setCanvasPercentage 方法为例，这个方法是用来改变画布的缩放的百分比的，在 src/hooks/useScaleCanvas.ts 中使用
/*** 缩放画布百分比* @param command 缩放命令：放大、缩小*/
const scaleCanvas = (command: '+' | '-') => {let percentage = canvasPercentage.valueconst step = 5const max = 200const min = 30if (command === '+' && percentage <= max) percentage += stepif (command === '-' && percentage >= min) percentage -= stepmainStore.setCanvasPercentage(percentage)
}/*** 设置画布缩放比例* 但不是直接设置该值，而是通过设置画布可视区域百分比来动态计算* @param value 目标画布缩放比例*/
const setCanvasScalePercentage = (value: number) => {const percentage = Math.round(value / canvasScale.value * canvasPercentage.value) / 100mainStore.setCanvasPercentage(percentage)
}/*** 重置画布尺寸和位置*/
const resetCanvas = () => {mainStore.setCanvasPercentage(90)if (canvasDragged) mainStore.setCanvasDragged(false)
}设置完了之后呢，canvasPercentage这个属性在哪里使用呢？
是在 src/views/Editor/Canvas/hooks/useViewportSize.ts 这个文件中
// 可视区域缩放或比例变化时，重置/更新可视区域的位置watch(canvasPercentage, setViewportPosition)
监听到这个属性变化之后，会计算出画布的位置，然后执行
// 画布可视区域位置和大小的样式
const viewportStyles = computed(() => ({width: VIEWPORT_SIZE,height: VIEWPORT_SIZE * viewportRatio.value,left: viewportLeft.value,top: viewportTop.value,
}))
viewportStyles 这个属性又在 src/views/Editor/Canvas/index.vue 文件中使用
<div class="viewport-wrapper":style="{width: viewportStyles.width * canvasScale + 'px',height: viewportStyles.height * canvasScale + 'px',left: viewportStyles.left + 'px',top: viewportStyles.top + 'px',}"
>
viewport-wrapper 这个元素我们看一下是谁，就是这个编辑区域
可以看出，项目的源码分工还是很细的
如果我们要在编辑区域增加一个新的属性，就需要把属性定义到src/store/main.ts 文件中，然后通过 src/hooks/useXXX.ts 文件进行修改，并且导出模版中需要使用的属性，然后在模版中使用。