From 08769d2bbd0da3247407b61879de9309745e8518 Mon Sep 17 00:00:00 2001 From: zxc <1171051090@qq.com> Date: Tue, 23 Jul 2024 23:40:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=8C=E6=8A=98=E7=BA=BF=E7=BA=BF?= =?UTF-8?q?=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + README_zh.md | 1 + src/configs/lines.ts | 2 ++ src/hooks/useCreateElement.ts | 1 + src/types/slides.ts | 3 +++ src/utils/element.ts | 5 +++++ src/views/Editor/Canvas/Operate/LineElementOperate.vue | 4 ++-- src/views/Editor/Canvas/hooks/useDragLineElement.ts | 7 ++++++- 8 files changed, 21 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d2ccee50..dd16cec8 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,7 @@ npm run dev - Shape format painter - Edit text (supports rich text, similar to text element’s rich text editing) #### Lines +- Straight lines, polylines, curves - Color - Width - Style diff --git a/README_zh.md b/README_zh.md index c61c517d..f1d00828 100644 --- a/README_zh.md +++ b/README_zh.md @@ -106,6 +106,7 @@ npm run dev - 形状格式刷 - 编辑文字（支持富文本，与文字元素的富文本编辑功能近似） #### 线条 +- 直线、基础折线/曲线 - 颜色 - 宽度 - 样式 diff --git a/src/configs/lines.ts b/src/configs/lines.ts index deab8ec2..be7f1f0a 100644 --- a/src/configs/lines.ts +++ b/src/configs/lines.ts @@ -6,6 +6,7 @@ export interface LinePoolItem { style: 'solid' | 'dashed' points: [LinePoint, LinePoint] isBroken?: boolean + isBroken2?: boolean isCurve?: boolean isCubic?: boolean } @@ -30,6 +31,7 @@ export const LINE_LIST: PresetLine[] = [ type: '折线、曲线', children: [ { path: 'M 0 0 L 0 20 L 20 20', style: 'solid', points: ['', 'arrow'], isBroken: true }, + { path: 'M 0 0 L 10 0 L 10 20 L 20 20', style: 'solid', points: ['', 'arrow'], isBroken2: true }, { path: 'M 0 0 Q 0 20 20 20', style: 'solid', points: ['', 'arrow'], isCurve: true }, { path: 'M 0 0 C 20 0 0 20 20 20', style: 'solid', points: ['', 'arrow'], isCubic: true }, ], diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index 5460b3b2..ab55559f 100644 --- a/src/hooks/useCreateElement.ts +++ b/src/hooks/useCreateElement.ts @@ -265,6 +265,7 @@ export default () => { width: 2, } if (data.isBroken) newElement.broken = [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] + if (data.isBroken2) newElement.broken2 = [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] if (data.isCurve) newElement.curve = [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] if (data.isCubic) newElement.cubic = [[(start[0] + end[0]) / 2, (start[1] + end[1]) / 2], [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2]] createElement(newElement) diff --git a/src/types/slides.ts b/src/types/slides.ts index ec41b8b0..03ebfcb7 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -361,6 +361,8 @@ export type LinePoint = '' | 'arrow' | 'dot' * * broken?: 折线控制点位置（[x, y]） * + * broken2?: 双折线控制点位置（[x, y]） + * * curve?: 二次曲线控制点位置（[x, y]） * * cubic?: 三次曲线控制点位置（[[x1, y1], [x2, y2]]） @@ -374,6 +376,7 @@ export interface PPTLineElement extends Omit { const mid = element.broken.join(',') return `M${start} L${mid} L${end}` } + else if (element.broken2) { + const { minX, maxX, minY, maxY } = getElementRange(element) + if (maxX - minX >= maxY - minY) return `M${start} L${element.broken2[0]},${element.start[1]} L${element.broken2[0]},${element.end[1]} ${end}` + return `M${start} L${element.start[0]},${element.broken2[1]} L${element.end[0]},${element.broken2[1]} ${end}` + } else if (element.curve) { const mid = element.curve.join(',') return `M${start} Q${mid} ${end}` diff --git a/src/views/Editor/Canvas/Operate/LineElementOperate.vue b/src/views/Editor/Canvas/Operate/LineElementOperate.vue index 68ce246a..5fa42418 100644 --- a/src/views/Editor/Canvas/Operate/LineElementOperate.vue +++ b/src/views/Editor/Canvas/Operate/LineElementOperate.vue @@ -77,8 +77,8 @@ const resizeHandlers = computed(() => { }, ] - if (props.elementInfo.curve || props.elementInfo.broken) { - const ctrlHandler = (props.elementInfo.curve || props.elementInfo.broken) as [number, number] + if (props.elementInfo.curve || props.elementInfo.broken || props.elementInfo.broken2) { + const ctrlHandler = (props.elementInfo.curve || props.elementInfo.broken || props.elementInfo.broken2) as [number, number] handlers.push({ handler: OperateLineHandlers.C, diff --git a/src/views/Editor/Canvas/hooks/useDragLineElement.ts b/src/views/Editor/Canvas/hooks/useDragLineElement.ts index 7c20a4ff..99c21388 100644 --- a/src/views/Editor/Canvas/hooks/useDragLineElement.ts +++ b/src/views/Editor/Canvas/hooks/useDragLineElement.ts @@ -79,7 +79,7 @@ export default (elementList: Ref) => { let endX = element.left + element.end[0] let endY = element.top + element.end[1] - const mid = element.broken || element.curve || [0, 0] + const mid = element.broken || element.broken2 || element.curve || [0, 0] let midX = element.left + mid[0] let midY = element.top + mid[1] @@ -192,10 +192,15 @@ export default (elementList: Ref) => { if (element.curve) newEl.curve = [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] if (element.cubic) newEl.cubic = [[(start[0] + end[0]) / 2, (start[1] + end[1]) / 2], [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2]] } + if (element.broken2) newEl.broken2 = [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] } else if (command === OperateLineHandlers.C) { if (element.broken) newEl.broken = [midX - minX, midY - minY] if (element.curve) newEl.curve = [midX - minX, midY - minY] + if (element.broken2) { + if (maxX - minX >= maxY - minY) newEl.broken2 = [midX - minX, newEl.broken2![1]] + else newEl.broken2 = [newEl.broken2![0], midY - minY] + } } else { if (element.cubic) newEl.cubic = [[c1X - minX, c1Y - minY], [c2X - minX, c2Y - minY]]