From 99171297dfa9be099be8810d0f11e76b50fdb867 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Wed, 20 Jan 2021 18:02:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BD=A2=E7=8A=B6=E6=B8=90?=
=?UTF-8?q?=E5=8F=98=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/types/slides.ts | 6 ++
.../ChartStylePanel/index.vue | 7 +-
.../ElementStylePanel/ShapeStylePanel.vue | 93 ++++++++++++++++++-
.../element/ShapeElement/BaseShapeElement.vue | 16 +++-
.../element/ShapeElement/GradientDefs.vue | 48 ++++++++++
.../components/element/ShapeElement/index.vue | 16 +++-
6 files changed, 177 insertions(+), 9 deletions(-)
create mode 100644 src/views/components/element/ShapeElement/GradientDefs.vue
diff --git a/src/types/slides.ts b/src/types/slides.ts
index ac091abf..de9cfe5c 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -72,6 +72,11 @@ export interface PPTImageElement {
shadow?: PPTElementShadow;
}
+export interface ShapeGradient {
+ type: 'line' | 'radial';
+ color: [string, string];
+ rotate: number;
+}
export interface PPTShapeElement {
type: 'shape';
id: string;
@@ -85,6 +90,7 @@ export interface PPTShapeElement {
path: string;
fixedRatio: boolean;
fill: string;
+ gradient?: ShapeGradient;
rotate?: number;
outline?: PPTElementOutline;
opacity?: number;
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index ecfcd297..b1f491a1 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -53,7 +53,7 @@
主题配色:
-
+
-
填充颜色:
-
+
+
+
updateFill(value)"
/>
-
+
+
+
+
+
+
起点颜色:
+
+
+ updateGradient({ color: [value, gradient.color[1]] })"
+ />
+
+
+
+
+
+
终点颜色:
+
+
+ updateGradient({ color: [gradient.color[0], value] })"
+ />
+
+
+
+
+
+
渐变角度:
+
updateGradient({ rotate: value })"
+ />
+
+
@@ -26,7 +81,7 @@
import { computed, defineComponent, ref, Ref, watch } from 'vue'
import { useStore } from 'vuex'
import { MutationTypes, State } from '@/store'
-import { PPTShapeElement } from '@/types/slides'
+import { PPTShapeElement, ShapeGradient } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ElementOpacity from '../common/ElementOpacity.vue'
@@ -47,14 +102,40 @@ export default defineComponent({
const handleElement: Ref
= computed(() => store.getters.handleElement)
const fill = ref()
+ const gradient = ref()
+ const fillType = ref('fill')
watch(handleElement, () => {
if(!handleElement.value) return
fill.value = handleElement.value.fill || '#000'
+
+ gradient.value = handleElement.value.gradient || { type: 'line', rotate: 0, color: [fill.value, '#fff'] }
+
+ fillType.value = handleElement.value.gradient ? 'gradient' : 'fill'
}, { deep: true, immediate: true })
const { addHistorySnapshot } = useHistorySnapshot()
+ const updateFillType = (type: 'gradient' | 'fill') => {
+ if(type === 'fill') {
+ store.commit(MutationTypes.REMOVE_ELEMENT_PROPS, {
+ id: handleElement.value.id,
+ propName: 'gradient',
+ })
+ }
+ else {
+ const props = { gradient: gradient.value }
+ store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+ }
+ addHistorySnapshot()
+ }
+
+ const updateGradient = (gradientProps: Partial) => {
+ const props = { gradient: { ...gradient.value, ...gradientProps } }
+ store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+ addHistorySnapshot()
+ }
+
const updateFill = (value: string) => {
const props = { fill: value }
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
@@ -63,7 +144,11 @@ export default defineComponent({
return {
fill,
+ gradient,
+ fillType,
+ updateFillType,
updateFill,
+ updateGradient,
}
},
})
diff --git a/src/views/components/element/ShapeElement/BaseShapeElement.vue b/src/views/components/element/ShapeElement/BaseShapeElement.vue
index f883e6a2..a684b02e 100644
--- a/src/views/components/element/ShapeElement/BaseShapeElement.vue
+++ b/src/views/components/element/ShapeElement/BaseShapeElement.vue
@@ -20,6 +20,15 @@
:width="elementInfo.width"
:height="elementInfo.height"
>
+
+
+
@@ -29,7 +38,7 @@
stroke-miterlimit="8"
stroke-linejoin=""
:d="elementInfo.path"
- :fill="elementInfo.fill"
+ :fill="elementInfo.gradient ? `url(#base-gradient-${elementInfo.id})` : elementInfo.fill"
:stroke="outlineColor"
:stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'"
@@ -46,8 +55,13 @@ import { PPTShapeElement } from '@/types/slides'
import useElementOutline from '@/views/components/element/hooks/useElementOutline'
import useElementShadow from '@/views/components/element/hooks/useElementShadow'
+import GradientDefs from './GradientDefs.vue'
+
export default defineComponent({
name: 'base-element-shape',
+ components: {
+ GradientDefs,
+ },
props: {
elementInfo: {
type: Object as PropType,
diff --git a/src/views/components/element/ShapeElement/GradientDefs.vue b/src/views/components/element/ShapeElement/GradientDefs.vue
new file mode 100644
index 00000000..1c58d3e1
--- /dev/null
+++ b/src/views/components/element/ShapeElement/GradientDefs.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue
index fd4c2eb0..cf956eaf 100644
--- a/src/views/components/element/ShapeElement/index.vue
+++ b/src/views/components/element/ShapeElement/index.vue
@@ -23,6 +23,15 @@
:width="elementInfo.width"
:height="elementInfo.height"
>
+
+
+
@@ -32,7 +41,7 @@
stroke-miterlimit="8"
stroke-linejoin=""
:d="elementInfo.path"
- :fill="elementInfo.fill"
+ :fill="elementInfo.gradient ? `url(#editabel-gradient-${elementInfo.id})` : elementInfo.fill"
:stroke="outlineColor"
:stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'"
@@ -50,8 +59,13 @@ import { ContextmenuItem } from '@/components/Contextmenu/types'
import useElementOutline from '@/views/components/element/hooks/useElementOutline'
import useElementShadow from '@/views/components/element/hooks/useElementShadow'
+import GradientDefs from './GradientDefs.vue'
+
export default defineComponent({
name: 'editable-element-shape',
+ components: {
+ GradientDefs,
+ },
props: {
elementInfo: {
type: Object as PropType,