From 06fb6245b772128772380f84d67621e4ec2f9c26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Thu, 29 Aug 2024 18:29:04 +0800 Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E6=94=AF=E6=8C=81=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E8=8A=82=E7=82=B9=E8=83=8C=E6=99=AF=E6=B8=90=E5=8F=98?= =?UTF-8?q?=E6=96=B9=E5=90=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/config/en.js | 52 +++++++++++++++++ web/src/config/index.js | 14 ++++- web/src/config/zh.js | 52 +++++++++++++++++ web/src/lang/en_us.js | 3 +- web/src/lang/zh_cn.js | 3 +- web/src/pages/Edit/components/Style.vue | 75 +++++++++++++++++++++---- 6 files changed, 184 insertions(+), 15 deletions(-) diff --git a/web/src/config/en.js b/web/src/config/en.js index 5a5f0968..8ab141a5 100644 --- a/web/src/config/en.js +++ b/web/src/config/en.js @@ -557,3 +557,55 @@ export const numberLevelList = [ value: 0 } ] + +// 背景渐变方向 +export const linearGradientDirList = [ + { + name: 'Left to right', + value: '1', + start: [0, 0], + end: [1, 0] + }, + { + name: 'Right to left', + value: '2', + start: [1, 0], + end: [0, 0] + }, + { + name: 'Top to bottom', + value: '3', + start: [0, 0], + end: [0, 1] + }, + { + name: 'Bottom to top', + value: '4', + start: [0, 1], + end: [0, 0] + }, + { + name: 'Left top to right bottom', + value: '5', + start: [0, 0], + end: [1, 1] + }, + { + name: 'Left bottom to right top', + value: '6', + start: [0, 1], + end: [1, 0] + }, + { + name: 'Right top to left bottom', + value: '7', + start: [1, 0], + end: [0, 1] + }, + { + name: 'Right bottom to left top', + value: '8', + start: [1, 1], + end: [0, 0] + } +] diff --git a/web/src/config/index.js b/web/src/config/index.js index 32affc86..b8ceff17 100644 --- a/web/src/config/index.js +++ b/web/src/config/index.js @@ -21,7 +21,8 @@ import { shapeListMap as shapeListMapZh, lineStyleMap as lineStyleMapZh, numberTypeList as numberTypeListZh, - numberLevelList as numberLevelListZh + numberLevelList as numberLevelListZh, + linearGradientDirList as linearGradientDirListZh } from './zh' import { fontFamilyList as fontFamilyListEn, @@ -36,7 +37,8 @@ import { backgroundSizeList as backgroundSizeListEn, downTypeList as downTypeListEn, numberTypeList as numberTypeListEn, - numberLevelList as numberLevelListEn + numberLevelList as numberLevelListEn, + linearGradientDirList as linearGradientDirListEn } from './en' const fontFamilyList = { @@ -114,6 +116,11 @@ const numberLevelList = { en: numberLevelListEn } +const linearGradientDirList = { + zh: linearGradientDirListZh, + en: linearGradientDirListEn +} + export { fontSizeList, lineHeightList, @@ -137,5 +144,6 @@ export { sidebarTriggerList, downTypeList, numberTypeList, - numberLevelList + numberLevelList, + linearGradientDirList } diff --git a/web/src/config/zh.js b/web/src/config/zh.js index 3985d124..9b24c5c1 100644 --- a/web/src/config/zh.js +++ b/web/src/config/zh.js @@ -651,3 +651,55 @@ export const numberLevelList = [ value: 0 } ] + +// 背景渐变方向 +export const linearGradientDirList = [ + { + name: '从左到右', + value: '1', + start: [0, 0], + end: [1, 0] + }, + { + name: '从右到左', + value: '2', + start: [1, 0], + end: [0, 0] + }, + { + name: '从上到下', + value: '3', + start: [0, 0], + end: [0, 1] + }, + { + name: '从下到上', + value: '4', + start: [0, 1], + end: [0, 0] + }, + { + name: '从左上到右下', + value: '5', + start: [0, 0], + end: [1, 1] + }, + { + name: '从左下到右上', + value: '6', + start: [0, 1], + end: [1, 0] + }, + { + name: '从右上到左下', + value: '7', + start: [1, 0], + end: [0, 1] + }, + { + name: '从右下到左上', + value: '8', + start: [1, 1], + end: [0, 0] + } +] diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index d313a98e..f4f4917e 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -238,7 +238,8 @@ export default { endColor: 'End', arrowDir: 'Arrow dir', arrowDirStart: 'Start', - arrowDirEnd: 'End' + arrowDirEnd: 'End', + direction: 'Direction' }, theme: { title: 'Theme', diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index cb351c11..e7b71a59 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -236,7 +236,8 @@ export default { endColor: '结束', arrowDir: '箭头位置', arrowDirStart: '头部', - arrowDirEnd: '尾部' + arrowDirEnd: '尾部', + direction: '方向' }, theme: { title: '主题', diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue index dcbe7cfd..24950309 100644 --- a/web/src/pages/Edit/components/Style.vue +++ b/web/src/pages/Edit/components/Style.vue @@ -247,16 +247,16 @@ - - -
-
- {{ $t('style.gradientStyle') }} + {{ + $t('style.gradientStyle') + }}
+
+
{{ $t('style.startColor') }}
+
+ {{ $t('style.direction') }} + + + + +
{{ $t('style.shape') }}
@@ -458,7 +476,8 @@ import { borderRadiusList, lineHeightList, shapeList, - shapeListMap + shapeListMap, + linearGradientDirList } from '@/config' import { mapState } from 'vuex' @@ -502,7 +521,8 @@ export default { lineMarkerDir: '', gradientStyle: false, startColor: '', - endColor: '' + endColor: '', + linearGradientDir: '' } } }, @@ -522,6 +542,11 @@ export default { }, shapeListMap() { return shapeListMap[this.$i18n.locale] || shapeListMap.zh + }, + linearGradientDirList() { + return ( + linearGradientDirList[this.$i18n.locale] || linearGradientDirList.zh + ) } }, watch: { @@ -587,6 +612,24 @@ export default { ].forEach(item => { this.style[item] = this.activeNodes[0].getStyle(item, false) }) + this.initLinearGradientDir() + }, + + // 初始化渐变方向样式 + initLinearGradientDir() { + const startDir = this.activeNodes[0].getStyle('startDir', false) + const endDir = this.activeNodes[0].getStyle('endDir', false) + const target = this.linearGradientDirList.find(item => { + return ( + item.start[0] === startDir[0] && + item.start[1] === startDir[1] && + item.end[0] === endDir[0] && + item.end[1] === endDir[1] + ) + }) + if (target) { + this.style.linearGradientDir = target.value + } }, /** @@ -595,9 +638,21 @@ export default { * @Desc: 修改样式 */ update(prop) { - this.activeNodes.forEach(node => { - node.setStyle(prop, this.style[prop]) - }) + if (prop === 'linearGradientDir') { + const target = this.linearGradientDirList.find(item => { + return item.value === this.style.linearGradientDir + }) + this.activeNodes.forEach(node => { + node.setStyles({ + startDir: [...target.start], + endDir: [...target.end] + }) + }) + } else { + this.activeNodes.forEach(node => { + node.setStyle(prop, this.style[prop]) + }) + } }, /**