diff --git a/README.md b/README.md index 20009122..0c317959 100644 --- a/README.md +++ b/README.md @@ -107,6 +107,7 @@ npm run serve - 重置图片 - 设置为背景图 #### 形状 +- 绘制任意多边形 - 替换形状 - 填充色 - 边框 @@ -155,7 +156,7 @@ npm run serve - 基础编辑 - 页面添加、删除、复制、备注、撤销重做 - 插入文字、图片、矩形、圆形 - - 元素通用操作:移动、缩放、复制、删除、层级调整、对齐 + - 元素通用操作:移动、缩放、旋转、复制、删除、层级调整、对齐 - 元素样式:文字(加粗、斜体、下划线、删除线、字号、颜色、对齐方向)、填充色 - 基础预览 - 播放预览 diff --git a/src/configs/shapes.ts b/src/configs/shapes.ts index 223cc6d5..a3e13318 100644 --- a/src/configs/shapes.ts +++ b/src/configs/shapes.ts @@ -11,6 +11,7 @@ export interface ShapePoolItem { pathFormula?: ShapePathFormulasKeys outlined?: boolean pptxShapeType?: string + title?: string } interface ShapeListItem { @@ -280,6 +281,11 @@ export const SHAPE_LIST: ShapeListItem[] = [ pathFormula: ShapePathFormulasKeys.ROUND_RECT_DIAGONAL, pptxShapeType: 'round2DiagRect', }, + { + viewBox: [200, 200], + path: 'M 0 80 L 60 0 L 100 40 L 180 20 L 200 120 L 160 200 L 0 200 L 60 140 Z', + title: '任意多边形', + }, ] }, diff --git a/src/store/main.ts b/src/store/main.ts index b1db3caa..04347593 100644 --- a/src/store/main.ts +++ b/src/store/main.ts @@ -23,6 +23,7 @@ export interface MainState { gridLineSize: number showRuler: boolean creatingElement: CreatingElement | null + creatingCustomShape: boolean availableFonts: typeof SYS_FONTS toolbarState: ToolbarStates clipingImageElementId: string @@ -54,6 +55,7 @@ export const useMainStore = defineStore('main', { gridLineSize: 0, // 网格线尺寸(0表示不显示网格线) showRuler: false, // 显示标尺 creatingElement: null, // 正在插入的元素信息,需要通过绘制插入的元素(文字、形状、线条) + creatingCustomShape: false, // 正在绘制任意多边形 availableFonts: SYS_FONTS, // 当前环境可用字体 toolbarState: ToolbarStates.SLIDE_DESIGN, // 右侧工具栏状态 clipingImageElementId: '', // 当前正在裁剪的图片ID @@ -139,6 +141,10 @@ export const useMainStore = defineStore('main', { this.creatingElement = element }, + setCreatingCustomShapeState(state: boolean) { + this.creatingCustomShape = state + }, + setAvailableFonts() { this.availableFonts = SYS_FONTS.filter(font => isSupportFont(font.value)) }, diff --git a/src/types/edit.ts b/src/types/edit.ts index ef236350..d4e12304 100644 --- a/src/types/edit.ts +++ b/src/types/edit.ts @@ -78,6 +78,13 @@ export interface CreateElementSelectionData { end: [number, number] } +export interface CreateCustomShapeData { + start: [number, number] + end: [number, number] + path: string + viewBox: [number, number] +} + export interface CreatingTextElement { type: 'text' vertical?: boolean diff --git a/src/views/Editor/Canvas/ShapeCreateCanvas.vue b/src/views/Editor/Canvas/ShapeCreateCanvas.vue new file mode 100644 index 00000000..611b2e54 --- /dev/null +++ b/src/views/Editor/Canvas/ShapeCreateCanvas.vue @@ -0,0 +1,154 @@ + + addPoint($event)" + @mousemove="$event => updateMousePosition($event)" + @contextmenu.stop.prevent="close()" + > + + + + + + + + + \ No newline at end of file diff --git a/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts b/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts index a9be3708..9421fa9e 100644 --- a/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts +++ b/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts @@ -89,6 +89,7 @@ export default (viewportRef: Ref) => { } return { + formatCreateSelection, insertElementFromCreateSelection, } } \ No newline at end of file diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue index bf3d5353..d957db7c 100644 --- a/src/views/Editor/Canvas/index.vue +++ b/src/views/Editor/Canvas/index.vue @@ -12,6 +12,10 @@ v-if="creatingElement" @created="data => insertElementFromCreateSelection(data)" /> + insertCustomShape(data)" + /> drawShape(shape)" /> - + @@ -142,7 +142,7 @@ import { } from 'ant-design-vue' const mainStore = useMainStore() -const { creatingElement } = storeToRefs(mainStore) +const { creatingElement, creatingCustomShape } = storeToRefs(mainStore) const { canUndo, canRedo } = storeToRefs(useSnapshotStore()) const { redo, undo } = useHistorySnapshot() @@ -193,12 +193,17 @@ const drawText = (vertical = false) => { }) } -// 绘制形状范围 +// 绘制形状范围(或绘制自定义任意多边形) const drawShape = (shape: ShapePoolItem) => { - mainStore.setCreatingElement({ - type: 'shape', - data: shape, - }) + if (shape.title === '任意多边形') { + mainStore.setCreatingCustomShapeState(true) + } + else { + mainStore.setCreatingElement({ + type: 'shape', + data: shape, + }) + } shapePoolVisible.value = false }