├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── store
    │   ├── index.js
    │   └── modules
    │   │   ├── template.js
    │   │   └── material.js
    ├── main.js
    ├── router.js
    ├── App.vue
    ├── libs
    │   ├── util.js
    │   ├── config.js
    │   └── list.js
    └── components
    │   ├── MaterialStage
    │       ├── LayerFont.vue
    │       ├── index.vue
    │       └── LayerGroup.vue
    │   ├── MaterialConfig.vue
    │   ├── TemplateStage
    │       ├── LayerFont.vue
    │       ├── index.vue
    │       └── LayerGroup.vue
    │   ├── CommonSliderBar.vue
    │   ├── Material.vue
    │   ├── Template.vue
    │   └── TemplateConfig.vue
├── .gitignore
├── README.md
└── package.json


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DrLambs/vue-konva-project/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DrLambs/vue-konva-project/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     Hello Vue.js
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'home'
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 
23 | pagckage-lock.json
24 | yarn.lock
25 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import template from './modules/template'
 4 | import material from './modules/material'
 5 | 
 6 | Vue.use(Vuex)
 7 | 
 8 | export default new Vuex.Store({
 9 |   state: {
10 |     //
11 |   },
12 |   mutations: {
13 |     //
14 |   },
15 |   actions: {
16 |     //
17 |   },
18 |   modules: {
19 |     template,
20 |     material
21 |   }
22 | })
23 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import iView from 'iview'
 6 | import 'iview/dist/styles/iview.css'
 7 | import VueKonva from 'vue-konva'
 8 | 
 9 | Vue.use(iView)
10 | Vue.use(VueKonva)
11 | 
12 | Vue.config.productionTip = false
13 | 
14 | new Vue({
15 |   router,
16 |   store,
17 |   render: h => h(App)
18 | }).$mount('#app')
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-konva-project
 2 | 
 3 | ## [Vue Konva - 基于 Canvas 开发的 2d JavaScript框架库 - 使用整理【持续更新……】](https://blog.csdn.net/sansan_7957/article/details/81952061)
 4 | 
 5 | ## 注意：需要用一下命令打开谷歌以解决跨域问题
 6 | ```
 7 | open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir
 8 | ```
 9 | 
10 | ## Project setup
11 | ```
12 | yarn install
13 | ```
14 | 
15 | ### Compiles and hot-reloads for development
16 | ```
17 | yarn run serve
18 | ```
19 | 
20 | ### Compiles and minifies for production
21 | ```
22 | yarn run build
23 | ```
24 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-konva-project</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-konva-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Template from './components/Template'
 4 | import Material from './components/Material'
 5 | 
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   mode: 'history',
10 |   base: process.env.BASE_URL,
11 |   routes: [
12 |     // {
13 |     //   path: '/',
14 |     //   name: 'home',
15 |     //   component: Home
16 |     // },
17 |     {
18 |       path: '/',
19 |       name: 'template',
20 |       component: Template
21 |     },
22 |     {
23 |       path: '/material',
24 |       name: 'material',
25 |       // route level code-splitting
26 |       // this generates a separate chunk (about.[hash].js) for this route
27 |       // which is lazy-loaded when the route is visited.
28 |       component: Material
29 |     }
30 |   ]
31 | })
32 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Header class="header">
 4 |       <div class="logo">Vue-Konva-Project</div>
 5 |       <div class="nav">
 6 |         <router-link to="/">创建模板</router-link> |
 7 |         <router-link to="/material">渲染模板</router-link>
 8 |       </div>
 9 |     </Header>
10 |     <router-view/>
11 |   </div>
12 | </template>
13 | 
14 | <style>
15 | #app {
16 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
17 |   -webkit-font-smoothing: antialiased;
18 |   -moz-osx-font-smoothing: grayscale;
19 |   color: #2c3e50;
20 |   height: 100vh;
21 |   overflow: hidden;
22 | }
23 | .header {
24 |   color: #fff;
25 |   font-size: 18px;
26 |   display: flex;
27 |   justify-content: space-between;
28 | }
29 | .nav a {
30 |   color: #fff;
31 |   font-size: 14px;
32 | }
33 | .nav a:hover, .nav .router-link-exact-active {
34 |   color: #57a3f3;
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/libs/util.js:
--------------------------------------------------------------------------------
 1 | import { Message } from "iview";
 2 | const util = {};
 3 | 
 4 | /**
 5 |  * 错误提示
 6 |  * @param msg
 7 |  */
 8 | util.showError = function (msg) {
 9 |   Message.destroy()
10 |   Message.error({
11 |     content: msg,
12 |     duration: 30,
13 |     closable: true
14 |   })
15 | }
16 | /**
17 |  * 成功提示
18 |  * @param msg
19 |  */
20 | util.showSuccess = function (msg) {
21 |   Message.destroy()
22 |   Message.success({
23 |     content: msg,
24 |     duration: 5,
25 |     closable: true
26 |   })
27 | }
28 | /**
29 |  * 警告提示
30 |  * @param msg
31 |  */
32 | util.showWarning = function (msg) {
33 |   Message.destroy()
34 |   Message.warning({
35 |     content: msg,
36 |     duration: 10,
37 |     closable: true
38 |   })
39 | }
40 | /**
41 |  * 生成图片
42 |  * @param src 图片路径
43 |  */
44 | util.newImage = function (src) {
45 |   let img = new Image();
46 |   img.src = src;
47 |   return img;
48 | }
49 | 
50 | export default util;
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-konva-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "iview": "^3.3.3",
12 |     "konva": "^3.2.2",
13 |     "lodash": "^4.17.11",
14 |     "vue": "^2.6.6",
15 |     "vue-konva": "^2.0.3",
16 |     "vue-router": "^3.0.1",
17 |     "vuex": "^3.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "^3.0.5",
21 |     "@vue/cli-plugin-eslint": "^3.0.5",
22 |     "@vue/cli-service": "^3.0.5",
23 |     "babel-eslint": "^10.0.1",
24 |     "eslint": "^5.8.0",
25 |     "eslint-plugin-vue": "^5.0.0",
26 |     "less": "^3.9.0",
27 |     "less-loader": "^4.1.0",
28 |     "vue-template-compiler": "^2.5.21"
29 |   },
30 |   "eslintConfig": {
31 |     "root": true,
32 |     "env": {
33 |       "node": true
34 |     },
35 |     "extends": [
36 |       "plugin:vue/essential",
37 |       "eslint:recommended"
38 |     ],
39 |     "rules": {},
40 |     "parserOptions": {
41 |       "parser": "babel-eslint"
42 |     }
43 |   },
44 |   "postcss": {
45 |     "plugins": {
46 |       "autoprefixer": {}
47 |     }
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions",
52 |     "not ie <= 8"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/MaterialStage/LayerFont.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="layer-font">
 3 |     <v-layer>
 4 |       <v-group
 5 |         v-for="(config, index) in configs"
 6 |         :key="index"
 7 |         :config="{
 8 |             x: config.x + config.width / 2,
 9 |             y: config.y + config.height / 2,
10 |             rotation: config.rotation,
11 |             scale: {
12 |               x: (1 + config.scale / 100 ).toFixed(2),
13 |               y: (1 + config.scale / 100 ).toFixed(2)
14 |             },
15 |             offset: {
16 |               x: config.width / 2,
17 |               y: config.height / 2,
18 |             },
19 |             draggable: false
20 |           }"
21 |       >
22 |         <!-- 文字 -->
23 |         <v-text
24 |           v-if="config.type === 'font'"
25 |           :config="{
26 |               fontFamily: config.fontFamily,
27 |               fontSize: config.fontSize,
28 |               text: config.fontText,
29 |               fill: config.fontColor,
30 |               opacity: 1
31 |             }"
32 |         />
33 | 
34 |         <!-- 图片 -->
35 |         <v-image
36 |           v-if="config.type === 'image'"
37 |           :config="{
38 |               width: config.width,
39 |               height: config.height,
40 |               image: config.img,
41 |               opacity: 1
42 |             }"
43 |         />
44 |       </v-group>
45 |     </v-layer>
46 |   </div>
47 | </template>
48 | 
49 | <script>
50 | export default {
51 |   name: "LayerFont",
52 |   props: {
53 |     configs: {
54 |       type: Array,
55 |       default() {
56 |         return [];
57 |       }
58 |     }
59 |   }
60 | };
61 | </script>
62 | 


--------------------------------------------------------------------------------
/src/libs/config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   config: {
 3 |     group: {
 4 |       uniqueId: 0,
 5 |       type: 'rect',
 6 |       x: 10,
 7 |       y: 10,
 8 |       width: 188,
 9 |       height: 244,
10 |       draggable: true,
11 |       rotation: 0,
12 |       scale: 1,
13 |       disabled: false,
14 |       side: 300,
15 |       radius: 150,
16 |       stroke: 'transparent',
17 |       strokeWidth: 1,
18 |       src: 'http://uploads.5068.com/allimg/1712/151-1G204111207.jpg'
19 |     },
20 |     font: {
21 |       uniqueId: 0,
22 |       type: 'font',
23 |       x: 200,
24 |       y: 200,
25 |       width: 246,
26 |       height: 149,
27 |       draggable: true,
28 |       rotation: 0,
29 |       scale: 1,
30 |       fontText: '在这里输入文字',
31 |       fontFamily: 'Sans-serif',
32 |       fontSize: 24,
33 |       fontColor: '#70FFF5',
34 |       disabled: false,
35 |       stroke: 'transparent',
36 |       strokeWidth: 1,
37 |       src: 'http://uploads.5068.com/allimg/1712/151-1G2050U519.jpg'
38 |     }
39 |   },
40 |   initConfig: {
41 |     group: {
42 |       uniqueId: 0,
43 |       type: 'rect',
44 |       x: 10,
45 |       y: 1,
46 |       width: 188,
47 |       height: 244,
48 |       draggable: true,
49 |       rotation: 0,
50 |       scale: 1,
51 |       disabled: false,
52 |       side: 300,
53 |       radius: 150,
54 |       stroke: 'transparent',
55 |       strokeWidth: 1,
56 |       src: 'http://uploads.5068.com/allimg/1712/151-1G204111207.jpg'
57 |     },
58 |     font: {
59 |       uniqueId: 0,
60 |       type: 'font',
61 |       x: 200,
62 |       y: 200,
63 |       width: 246,
64 |       height: 149,
65 |       draggable: true,
66 |       rotation: 0,
67 |       scale: 1,
68 |       fontText: '在这里输入文字',
69 |       fontFamily: 'Sans-serif',
70 |       fontSize: 24,
71 |       fontColor: '#70FFF5',
72 |       disabled: false,
73 |       stroke: 'transparent',
74 |       strokeWidth: 1,
75 |       src: 'http://uploads.5068.com/allimg/1712/151-1G2050U519.jpg'
76 |     }
77 |   }
78 | }


--------------------------------------------------------------------------------
/src/components/MaterialConfig.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="material-config">
 3 |     <Form :model="config" :label-width="45">
 4 |       <!-- unique id -->
 5 |       <FormItem prop="uniqueId" label="ID">
 6 |         <Input type="text" v-model="config.uniqueId" disabled placeholder="已选中的模版框" />
 7 |       </FormItem>
 8 | 
 9 |       <!-- 选择图片 -->
10 |       <FormItem prop="src" label="地址">
11 |         <Input type="textarea" :rows="6" v-model="config.src" placeholder="图片地址" @on-change="changeImage" />
12 |       </FormItem>
13 | 
14 |       <!-- 坐标 X -->
15 |       <FormItem prop="x" label="X">
16 |         <InputNumber v-model="config.x"></InputNumber>
17 |       </FormItem>
18 | 
19 |       <!-- 坐标 Y -->
20 |       <FormItem prop="y" label="Y">
21 |         <InputNumber v-model="config.y"></InputNumber>
22 |       </FormItem>
23 | 
24 |       <!-- 旋转 -->
25 |       <FormItem prop="rotation" label="旋转">
26 |         <CommonSliderBar :form="config" unit="Deg"></CommonSliderBar>
27 |       </FormItem>
28 | 
29 |       <!-- 缩放 -->
30 |       <FormItem prop="scale" label="缩放">
31 |         <CommonSliderBar :form="config" unit="%"></CommonSliderBar>
32 |       </FormItem>
33 |     </Form>
34 |   </div>
35 | </template>
36 | 
37 | <script>
38 | import util from "../libs/util.js";
39 | import { mapState, mapMutations } from "vuex";
40 | import CommonSliderBar from "./CommonSliderBar";
41 | 
42 | export default {
43 |   name: "MaterialConfig",
44 |   components: {
45 |     CommonSliderBar
46 |   },
47 |   computed: {
48 |     ...mapState({
49 |       config: state => state.material.config
50 |     })
51 |   },
52 |   methods: {
53 |     ...mapMutations(['setUrl']),
54 |     changeImage() {
55 |       const img = util.newImage(this.config.src);
56 |       img.onload = () => {
57 |         this.setUrl(img);
58 |       }
59 |     }
60 |   }
61 | };
62 | </script>
63 | 
64 | <style>
65 | .material-config {
66 |   background: #f2f2f2;
67 |   border: 1px solid #dcdee2;
68 |   border-radius: 5px;
69 |   padding: 15px;
70 |   min-width: 250px;
71 |   height: 100%;
72 |   overflow: hidden auto;
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/libs/list.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   // 形状列表
  3 |   shapeList: [
  4 |     {
  5 |       label: "矩形",
  6 |       value: "rect"
  7 |     }
  8 |     // {
  9 |     //   label: '圆形',
 10 |     //   value: 'circle'
 11 |     // },
 12 |     // {
 13 |     //   label: '三角形',
 14 |     //   value: 'triangle'
 15 |     // },
 16 |     // {
 17 |     //   label: '心形',
 18 |     //   value: 'heart'
 19 |     // }
 20 |   ],
 21 |   // 装饰类型
 22 |   decorationList: [
 23 |     {
 24 |       label: "文字",
 25 |       value: "font"
 26 |     },
 27 |     {
 28 |       label: "图片",
 29 |       value: "image"
 30 |     }
 31 |   ],
 32 |   // 字体列表
 33 |   fontFamilyList: [
 34 |     {
 35 |       id: 0,
 36 |       value: "Sans-serif"
 37 |     },
 38 |     {
 39 |       id: 1,
 40 |       value: "Helvetica"
 41 |     },
 42 |     {
 43 |       id: 2,
 44 |       value: "Arial"
 45 |     },
 46 |     {
 47 |       id: 3,
 48 |       value: "Verdana"
 49 |     },
 50 |     {
 51 |       id: 4,
 52 |       value: "Tahoma"
 53 |     },
 54 |     {
 55 |       id: 5,
 56 |       value: "Lucida Grande"
 57 |     },
 58 |     {
 59 |       id: 6,
 60 |       value: "Georgia"
 61 |     },
 62 |     {
 63 |       id: 7,
 64 |       value: "Arial Black"
 65 |     }
 66 |   ],
 67 |   // 字号列表
 68 |   fontSizeList: [
 69 |     {
 70 |       id: 12,
 71 |       value: "12px"
 72 |     },
 73 |     {
 74 |       id: 14,
 75 |       value: "14px"
 76 |     },
 77 |     {
 78 |       id: 16,
 79 |       value: "16px"
 80 |     },
 81 |     {
 82 |       id: 18,
 83 |       value: "18px"
 84 |     },
 85 |     {
 86 |       id: 20,
 87 |       value: "20px"
 88 |     },
 89 |     {
 90 |       id: 24,
 91 |       value: "24px"
 92 |     },
 93 |     {
 94 |       id: 32,
 95 |       value: "32px"
 96 |     },
 97 |     {
 98 |       id: 36,
 99 |       value: "36px"
100 |     },
101 |     {
102 |       id: 44,
103 |       value: "44px"
104 |     },
105 |     {
106 |       id: 56,
107 |       value: "56px"
108 |     },
109 |     {
110 |       id: 60,
111 |       value: "60px"
112 |     },
113 |     {
114 |       id: 72,
115 |       value: "72px"
116 |     }
117 |   ]
118 | }


--------------------------------------------------------------------------------
/src/components/MaterialStage/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="stage-material">
 3 |     <!-- 舞台渲染 -->
 4 |     <v-stage
 5 |       ref="stage"
 6 |       :config="{
 7 |         width: stageConfig.width,
 8 |         height: stageConfig.height
 9 |       }"
10 |     >
11 |       <!-- 底图 -->
12 |       <v-layer>
13 |         <v-image :config="{image: image, width: stageConfig.width, height: stageConfig.height}"></v-image>
14 |       </v-layer>
15 | 
16 |       <!-- 模版框图层 -->
17 |       <LayerGroup
18 |         v-if="configList.group.length > 0"
19 |         :configs="configList.group"
20 |         @on-dragstart="dragStart"
21 |         @on-dragmove="dragMove"
22 |         @on-dragend="dragEnd"
23 |       ></LayerGroup>
24 |       <!-- 文字图层 -->
25 |       <LayerFont v-if="configList.font.length > 0 && iVisible" :configs="configList.font"></LayerFont>
26 |     </v-stage>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | import LayerGroup from "./LayerGroup";
32 | import LayerFont from "./LayerFont";
33 | import { mapMutations } from "vuex";
34 | 
35 | export default {
36 |   name: "MaterialStage",
37 |   props: {
38 |     stageConfig: {
39 |       type: Object,
40 |       default() {
41 |         return {};
42 |       }
43 |     },
44 |     configList: {
45 |       type: Object,
46 |       default() {
47 |         return {};
48 |       }
49 |     },
50 |     iVisible: {
51 |       type: Boolean,
52 |       default: true
53 |     }
54 |   },
55 |   components: {
56 |     LayerGroup,
57 |     LayerFont
58 |   },
59 |   data() {
60 |     return {
61 |       image: null
62 |     };
63 |   },
64 |   created() {
65 |     this.getStageImage();
66 |   },
67 |   methods: {
68 |     ...mapMutations(["start", "move", "end"]),
69 |     getStageImage() {
70 |       const image = new window.Image();
71 |       image.src = this.stageConfig.url;
72 |       image.onload = () => {
73 |         // set image only when it is loaded
74 |         this.image = image;
75 |       };
76 |     },
77 |     getPosition() {
78 |       let pos = this.$refs.stage.getStage().getPointerPosition();
79 |       return pos;
80 |     },
81 |     // dragsrat 鼠标位置
82 |     dragStart() {
83 |       this.start(this.getPosition());
84 |     },
85 |     // dragmove
86 |     dragMove() {
87 |       this.move(this.getPosition());
88 |     },
89 |     // dragend
90 |     dragEnd() {
91 |       this.end(this.getPosition());
92 |     }
93 |   }
94 | };
95 | </script>
96 | 


--------------------------------------------------------------------------------
/src/components/TemplateStage/LayerFont.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="layer-font">
  3 |     <v-layer>
  4 |       <v-group
  5 |         v-for="(config, index) in configs"
  6 |         :key="index"
  7 |         :config="{
  8 |           x: config.x + config.width / 2,
  9 |           y: config.y + config.height / 2,
 10 |           rotation: config.rotation,
 11 |           scale: {
 12 |             x: (1 + config.scale / 100 ).toFixed(2),
 13 |             y: (1 + config.scale / 100 ).toFixed(2)
 14 |           },
 15 |           offset: {
 16 |             x: config.width / 2,
 17 |             y: config.height / 2,
 18 |           },
 19 |           draggable: config.draggable
 20 |         }"
 21 |         @dragstart="dragStart(config.uniqueId)"
 22 |         @dragmove="dragMove"
 23 |         @dragend="dragEnd"
 24 |         @click="getCurrent(config.uniqueId)"
 25 |       >
 26 |         <!-- 文字 -->
 27 |         <v-text
 28 |           v-if="config.type === 'font'"
 29 |           :config="{
 30 |             x: 0,
 31 |             y: 0,
 32 |             fontFamily: config.fontFamily,
 33 |             fontSize: config.fontSize,
 34 |             text: config.fontText,
 35 |             fill: config.fontColor,
 36 |             opacity: config.opacity
 37 |           }"
 38 |         />
 39 | 
 40 |         <!-- 图片 -->
 41 |         <v-image
 42 |           v-if="config.type === 'image'"
 43 |           :config="{
 44 |             width: config.width,
 45 |             height: config.height,
 46 |             image: config.img,
 47 |             opacity: config.opacity
 48 |           }"
 49 |         />
 50 |       </v-group>
 51 |     </v-layer>
 52 |     <!-- layer 结束 -->
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | import { mapMutations } from "vuex";
 58 | 
 59 | export default {
 60 |   name: "LayerFont",
 61 |   props: {
 62 |     configs: {
 63 |       type: Array,
 64 |       default() {
 65 |         return [];
 66 |       }
 67 |     }
 68 |   },
 69 |   methods: {
 70 |     ...mapMutations([
 71 |       'setConfigType',
 72 |       'current'
 73 |     ]),
 74 |     // 获取当前 group
 75 |     getCurrent(index) {
 76 |       this.configs.forEach(item => {
 77 |         if (parseInt(item["uniqueId"]) === parseInt(index)) {
 78 |           item["disabled"] = true;
 79 |           this.setConfigType('font');
 80 |           this.current(item);
 81 |         }
 82 |       });
 83 |     },
 84 |     // 拖动改变位置
 85 |     dragStart(index) {
 86 |       this.getCurrent(index);
 87 |       this.$emit("on-dragstart");
 88 |     },
 89 |     // 拖动改变位置
 90 |     dragMove() {
 91 |       this.$emit("on-dragmove");
 92 |     },
 93 |     // 拖动改变位置
 94 |     dragEnd() {
 95 |       this.$emit("on-dragend");
 96 |     }
 97 |   }
 98 | };
 99 | </script>
100 | 


--------------------------------------------------------------------------------
/src/store/modules/template.js:
--------------------------------------------------------------------------------
 1 | import config from "../../libs/config";
 2 | 
 3 | const template = {
 4 | 	state: {
 5 | 		stageConfig: {
 6 | 			width: 960,
 7 | 			height: 600,
 8 | 			url: "http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1212/27/c0/16922564_1356570216970.jpg"
 9 | 		},
10 | 		// config 类型: 模板框/装饰
11 | 		configType: 'group',
12 | 		// 表单初始化
13 | 		initConfig: config.initConfig,
14 | 		// 表单
15 | 		config: config.config,
16 | 		// 配置列表
17 | 		configList: {
18 | 			group: [],
19 | 			font: []
20 | 		},
21 | 		// 记录下一开始添加时的唯一ID
22 | 		uniqueId: {
23 | 			group: 0,
24 | 			font: 0
25 | 		},
26 | 		// 当前选中的ID
27 | 		currentId: {
28 | 			group: 0,
29 | 			font: 0
30 | 		},
31 | 		// 拖动定位
32 | 		dragStartX: 0,
33 | 		dragStartY: 0
34 | 	},
35 | 	mutations: {
36 | 		// 设置当前配置类型: group/font
37 | 		setConfigType(state, type) {
38 | 			state.configType = type;
39 | 		},
40 | 		// 添加配置
41 | 		add(state, config) {
42 | 			// id 增加
43 | 			state.config[state.configType].uniqueId++;
44 | 			state.uniqueId[state.configType] = state.config[state.configType].uniqueId;
45 | 			// 添加
46 | 			state.configList[state.configType].push(config);
47 | 		},
48 | 		// 保存配置
49 | 		save(state, config) {
50 | 			state.configList[state.configType].forEach((item, index) => {
51 | 				if (parseInt(item['uniqueId']) === state.currentId[state.configType]) {
52 | 					// 替换原来的
53 | 					state.configList[state.configType].splice(index, 1, config);
54 | 				}
55 | 			});
56 | 			// 初始化
57 | 			state.initConfig[state.configType].uniqueId = state.uniqueId[state.configType];
58 | 			state.config[state.configType] = state.initConfig[state.configType];
59 | 		},
60 | 		// 删除配置
61 | 		remove(state) {
62 | 			state.configList[state.configType].forEach((item, index) => {
63 | 				if (parseInt(item['uniqueId']) === state.currentId[state.configType]) {
64 | 					// 删除
65 | 					state.configList[state.configType].splice(index, 1);
66 | 				}
67 | 			});
68 | 			// 初始化
69 | 			state.initConfig[state.configType].uniqueId = state.uniqueId[state.configType];
70 | 			state.config[state.configType] = state.initConfig[state.configType];
71 | 		},
72 | 		// 获取当前配置
73 | 		current(state, config) {
74 | 			state.configList[state.configType].forEach(item => {
75 | 				item.stroke = 'transparent';
76 | 			});
77 | 			state.config[state.configType] = config;
78 | 			state.config[state.configType].stroke = '#0051FF';
79 | 			state.currentId[state.configType] = config.uniqueId;
80 | 		},
81 | 		start(state, {x, y}) {
82 | 			state.dragStartX = x - state.config[state.configType].x;
83 | 			state.dragStartY = y - state.config[state.configType].y;
84 | 		},
85 | 		move(state, {x, y}) {
86 | 			state.config[state.configType].x = x - state.dragStartX;
87 | 			state.config[state.configType].y = y - state.dragStartY;
88 | 		},
89 | 		end(state, {x, y}) {
90 | 			state.config[state.configType].x = x - state.dragStartX;
91 | 			state.config[state.configType].y = y - state.dragStartY;
92 | 		}
93 | 	}
94 | }
95 | 
96 | export default template;
97 | 


--------------------------------------------------------------------------------
/src/components/TemplateStage/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="stage-template">
  3 |     <!-- 舞台渲染 -->
  4 |     <v-stage
  5 |       ref="stage"
  6 |       :config="{
  7 |         width: stageConfig.width,
  8 |         height: stageConfig.height
  9 |       }"
 10 |     >
 11 |       <!-- 底图 -->
 12 |       <v-layer>
 13 |         <v-image :config="{image: image, width: stageConfig.width, height: stageConfig.height}"></v-image>
 14 |       </v-layer>
 15 |       <!-- 模版框图层 -->
 16 |       <LayerGroup
 17 |         v-if="configList.group.length > 0"
 18 |         :configs="configList.group"
 19 |         @on-dragstart="dragStart"
 20 |         @on-dragmove="dragMove"
 21 |         @on-dragend="dragEnd"
 22 |       ></LayerGroup>
 23 |       <!-- 文字图层 -->
 24 |       <LayerFont
 25 |         v-if="configList.font.length > 0"
 26 |         :configs="configList.font"
 27 |         @on-dragstart="dragStart"
 28 |         @on-dragmove="dragMove"
 29 |         @on-dragend="dragEnd"
 30 |       ></LayerFont>
 31 |     </v-stage>
 32 |   </div>
 33 | </template>
 34 | 
 35 | <script>
 36 | import LayerGroup from "./LayerGroup";
 37 | import LayerFont from "./LayerFont";
 38 | import { mapState, mapMutations } from "vuex";
 39 | 
 40 | export default {
 41 |   name: "TemplateStage",
 42 |   components: {
 43 |     LayerGroup,
 44 |     LayerFont
 45 |   },
 46 |   props: {
 47 |     stageConfig: {
 48 |       type: Object,
 49 |       default() {
 50 |         return {};
 51 |       }
 52 |     }
 53 |   },
 54 |   data() {
 55 |     return {
 56 |       image: null
 57 |     };
 58 |   },
 59 |   computed: {
 60 |     ...mapState({
 61 |       // 配置列表
 62 |       configList: state => state.template.configList,
 63 |       // 当前 id
 64 |       currentId: state => state.template.currentId
 65 |     })
 66 |   },
 67 |   created() {
 68 |     this.getStageImage();
 69 |   },
 70 |   watch: {
 71 |     "stageConfig.url": {
 72 |       deep: true,
 73 |       handler() {
 74 |         this.getStageImage();
 75 |       }
 76 |     }
 77 |   },
 78 |   methods: {
 79 |     ...mapMutations(["start", "move", "end"]),
 80 |     getStageImage() {
 81 |       const image = new window.Image();
 82 |       image.src = this.stageConfig.url;
 83 |       image.onload = () => {
 84 |         // set image only when it is loaded
 85 |         this.image = image;
 86 |       };
 87 |     },
 88 |     getPosition() {
 89 |       let pos = this.$refs.stage.getStage().getPointerPosition();
 90 |       return pos;
 91 |     },
 92 |     dragStart() {
 93 |       this.start(this.getPosition());
 94 |     },
 95 |     dragMove() {
 96 |       this.move(this.getPosition());
 97 |     },
 98 |     dragEnd() {
 99 |       this.end(this.getPosition());
100 |     }
101 |   }
102 | };
103 | </script>
104 | 
105 | <style lang="less" scoped>
106 | .stage-template {
107 |   border: 1px solid #dcdee2;
108 |   width: 100%;
109 |   height: 100%;
110 |   max-width: 100%;
111 |   max-height: 100%;
112 |   overflow: auto;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/store/modules/material.js:
--------------------------------------------------------------------------------
  1 | import util from '../../libs/util';
  2 | 
  3 | const material = {
  4 | 	state: {
  5 | 		// 当前选中的模版
  6 | 		currentTemplate: null,
  7 | 		// 当前选中的 group
  8 | 		curId: -1,
  9 | 		// 当前选中的 v-image
 10 | 		config: {
 11 | 			x: 0,
 12 | 			y: 0,
 13 | 			rotation: 0,
 14 | 			scale: 0,
 15 | 			src: ''
 16 | 		},
 17 | 		// 拖动定位
 18 | 		dragStartX: 0,
 19 | 		dragStartY: 0
 20 | 	},
 21 | 	mutations: {
 22 | 		// 获取当前使用的模版配置
 23 | 		getCurrentTepmlate(state, config) {
 24 | 			state.currentTemplate = config;
 25 | 		},
 26 | 		// 选中的 v-image 配置与表单同步
 27 | 		setImageId(state, id) {
 28 | 			state.curId = id
 29 | 			state.currentTemplate.configList.group.forEach(item => {
 30 | 				if (item.uniqueId === id) {
 31 | 					state.config = item.vImage
 32 | 				}
 33 | 			})
 34 | 		},
 35 | 		// 创建素材-更换图片
 36 | 		setUrl(state, img) {
 37 | 			const url = img.src;
 38 | 			const width = img.width;
 39 | 			const height = img.height;
 40 | 			const originWidth = width;
 41 | 			const originHeight = height;
 42 | 			const face_x = face_x ? face_x : width / 2;
 43 | 			const face_y = face_y ? face_y : height / 2;
 44 | 
 45 | 			// 替换模板中的group图片
 46 | 			state.currentTemplate.configList.group.forEach(item => {
 47 | 				if (item.uniqueId === state.curId) {
 48 | 					item.vImage.src = url;
 49 | 
 50 | 					// 设置图片大小填充group框
 51 | 					let _img = util.newImage(url);
 52 | 					_img.onload = function () {
 53 | 						// 图片宽高比
 54 | 						const perImg = parseFloat((_img.width / _img.height).toFixed(2));
 55 | 						// group 框宽高比
 56 | 						const perGroup = parseFloat((item.width / item.height).toFixed(2));
 57 | 
 58 | 						if (perImg >= perGroup) {
 59 | 							item.vImage.height = item.height;
 60 | 							item.vImage.width = Math.ceil(item.height * perImg);
 61 | 
 62 | 							// 图片缩放比例 x
 63 | 							const perX = parseFloat((item.vImage.width / originWidth).toFixed(2));
 64 | 							// group 框中心点 x
 65 | 							const middleX = parseFloat((item.width / 2).toFixed(2));
 66 | 							// 图片缩放之后的人脸坐标
 67 | 							const faceX = parseFloat((face_x * perX).toFixed(2));
 68 | 							// 人脸居中：修改图片坐标 face_x
 69 | 							item.vImage.x = Math.floor(middleX - faceX);
 70 | 							if (item.vImage.x > 0) {
 71 | 								item.vImage.x = 0;
 72 | 							} else if (item.vImage.x < item.width - item.vImage.width) {
 73 | 								item.vImage.x = item.width - item.vImage.width;
 74 | 							}
 75 | 						} else if (perImg < perGroup) {
 76 | 							item.vImage.width = item.width;
 77 | 							item.vImage.height = Math.ceil(item.width / perImg);
 78 | 
 79 | 							// 图片缩放比例 y
 80 | 							const perY = parseFloat((item.vImage.height / originHeight).toFixed(2));
 81 | 							// group 框中心点 x
 82 | 							const middleY = parseFloat((item.height / 2).toFixed(2));
 83 | 							// 图片缩放之后的人脸坐标
 84 | 							const faceY = parseFloat((face_y * perY).toFixed(2));
 85 | 							// 人脸居中：修改图片坐标 face_y
 86 | 							item.vImage.y = Math.floor(middleY - faceY);
 87 | 							if (item.vImage.y > 0) {
 88 | 								item.vImage.y = 0;
 89 | 							} else if (item.vImage.y < item.height - item.vImage.height) {
 90 | 								item.vImage.y = item.height - item.vImage.height;
 91 | 							}
 92 | 						}
 93 | 						item.vImage.img = _img;
 94 | 					}
 95 | 				}
 96 | 			});
 97 | 		},
 98 | 		start(state, {
 99 | 			x,
100 | 			y
101 | 		}) {
102 | 			state.dragStartX = x - state.config.x;
103 | 			state.dragStartY = y - state.config.y;
104 | 		},
105 | 		move(state, {
106 | 			x,
107 | 			y
108 | 		}) {
109 | 			state.config.x = x - state.dragStartX;
110 | 			state.config.y = y - state.dragStartY;
111 | 		},
112 | 		end(state, {
113 | 			x,
114 | 			y
115 | 		}) {
116 | 			state.config.x = x - state.dragStartX;
117 | 			state.config.y = y - state.dragStartY;
118 | 		}
119 | 	}
120 | }
121 | 
122 | export default material


--------------------------------------------------------------------------------
/src/components/TemplateStage/LayerGroup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="layer-group">
  3 |     <v-layer v-if="configs.length > 0">
  4 |       <v-group
  5 |         v-for="(config, index) in configs"
  6 |         :key="index"
  7 |         :config="{
  8 |           x: config.x + config.width / 2,
  9 |           y: config.y + config.height / 2,
 10 |           offset: {
 11 |             x: config.width / 2,
 12 |             y: config.height / 2,
 13 |           },
 14 |           scale: {
 15 |             x: (1 + config.scale / 100 ).toFixed(2),
 16 |             y: (1 + config.scale / 100 ).toFixed(2)
 17 |           },
 18 |           width: config.width,
 19 |           height: config.height,
 20 |           rotation: config.rotation,
 21 |           draggable: config.draggable,
 22 |           clipFunc: function(ctx) {
 23 |             // 矩形
 24 |             if(config.type === 'rect') {
 25 |               ctx.rect(0, 0, config.width, config.height)
 26 |             }
 27 |             // 圆形 —— 参数：半径
 28 |             else if(config.type === 'circle') {
 29 |               ctx.arc(config.width / 2, config.height / 2, config.radius, 0, Math.PI * 2, false)
 30 |             }
 31 |             // 三角形 —— 正三角形
 32 |             else if(config.type === 'triangle') {
 33 |               ctx.beginPath();
 34 |               ctx.moveTo(config.side / 2, 0)
 35 |               ctx.lineTo(0, Math.sqrt(Math.pow(config.side, 2) - Math.pow(config.side / 2, 2)))
 36 |               ctx.lineTo(config.side, Math.sqrt(Math.pow(config.side, 2) - Math.pow(config.side / 2, 2)))
 37 |               ctx.closePath()
 38 |             }
 39 |             // 心形 —— 配置默认
 40 |             else if(config.type === 'heart') {
 41 |               ctx.beginPath()
 42 |               // 起始点
 43 |               ctx.moveTo(75, 40)
 44 |               // 左半边
 45 |               ctx.bezierCurveTo(75, 37, 70, 25, 50, 25)
 46 |               ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5)
 47 |               ctx.bezierCurveTo(20, 80, 40, 102, 75, 120)
 48 |               // 右半边
 49 |               ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5)
 50 |               ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25)
 51 |               ctx.bezierCurveTo(85, 25, 75, 37, 75, 40)
 52 | 
 53 |               //闭合路径
 54 |               ctx.closePath()
 55 |             }
 56 |           }
 57 |         }"
 58 |         @dragstart="dragStart(config.uniqueId)"
 59 |         @dragmove="dragMove"
 60 |         @dragend="dragEnd"
 61 |         @click="getCurrent(config.uniqueId)"
 62 |       >
 63 |         <v-image
 64 |           :config="{
 65 |             x: config.strokeWidth,
 66 |             y: config.strokeWidth,
 67 |             width: config.width - config.strokeWidth * 2,
 68 |             height: config.height - config.strokeWidth * 2,
 69 |             image: config.img,
 70 |             draggable: false,
 71 |             opacity: config.opacity,
 72 |             stroke: config.stroke,
 73 |             strokeWidth: config.strokeWidth
 74 |           }"
 75 |           @dragstart="dragStartImage"
 76 |           @dragmove="dragMoveImage"
 77 |           @dragend="dragEndImage"
 78 |         />
 79 |       </v-group>
 80 |     </v-layer>
 81 |     <!-- layer 结束 -->
 82 |   </div>
 83 | </template>
 84 | 
 85 | <script>
 86 | import { mapMutations } from "vuex";
 87 | 
 88 | export default {
 89 |   name: "LayerGroup",
 90 |   props: {
 91 |     configs: {
 92 |       type: Array,
 93 |       default() {
 94 |         return [];
 95 |       }
 96 |     }
 97 |   },
 98 |   methods: {
 99 |     ...mapMutations(["setConfigType", "current"]),
100 |     // 获取当前 group
101 |     getCurrent(index) {
102 |       this.configs.forEach(item => {
103 |         if (parseInt(item["uniqueId"]) === parseInt(index)) {
104 |           item.disabled = true;
105 |           this.setConfigType("group");
106 |           this.current(item);
107 |         }
108 |       });
109 |     },
110 |     // 拖动改变位置
111 |     dragStart(index) {
112 |       this.getCurrent(index);
113 |       this.$emit("on-dragstart");
114 |     },
115 |     // 拖动改变位置
116 |     dragMove() {
117 |       this.$emit("on-dragmove");
118 |     },
119 |     // 拖动改变位置
120 |     dragEnd() {
121 |       this.$emit("on-dragend");
122 |     },
123 |     // 阻止事件冒泡
124 |     dragStartImage(element, e) {
125 |       if (e) e.cancelBubble = true;
126 |     },
127 |     dragMoveImage(element, e) {
128 |       if (e) e.cancelBubble = true;
129 |     },
130 |     dragEndImage(element, e) {
131 |       if (e) e.cancelBubble = true;
132 |     }
133 |   }
134 | };
135 | </script>
136 | 


--------------------------------------------------------------------------------
/src/components/MaterialStage/LayerGroup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="layer-group">
  3 |     <v-layer>
  4 |       <v-group
  5 |         v-for="(config, index) in configs"
  6 |         :key="index"
  7 |         :config="{
  8 |             x: config.x + config.width / 2,
  9 |             y: config.y + config.height / 2,
 10 |             offset: {
 11 |               x: config.width / 2,
 12 |               y: config.height / 2,
 13 |             },
 14 |             scale: {
 15 |               x: (1 + config.scale / 100 ).toFixed(2),
 16 |               y: (1 + config.scale / 100 ).toFixed(2)
 17 |             },
 18 |             width: config.width,
 19 |             height: config.height,
 20 |             rotation: config.rotation * 3.6,
 21 |             draggable: false,
 22 |             clipFunc: function(ctx) {
 23 |               // 矩形
 24 |               if(config.type === 'rect') {
 25 |                 ctx.rect(0, 0, config.width, config.height)
 26 |               }
 27 |               // 圆形 —— 参数：半径
 28 |               else if(config.type === 'circle') {
 29 |                 ctx.arc(config.width / 2, config.height / 2, config.radius, 0, Math.PI * 2, false)
 30 |               }
 31 |               // 三角形 —— 正三角形
 32 |               else if(config.type === 'triangle') {
 33 |                 ctx.beginPath();
 34 |                 ctx.moveTo(config.side / 2, 0)
 35 |                 ctx.lineTo(0, Math.sqrt(Math.pow(config.side, 2) - Math.pow(config.side / 2, 2)))
 36 |                 ctx.lineTo(config.side, Math.sqrt(Math.pow(config.side, 2) - Math.pow(config.side / 2, 2)))
 37 |                 ctx.closePath()
 38 |               }
 39 |               // 心形 —— 配置默认
 40 |               else if(config.type === 'heart') {
 41 |                 ctx.beginPath()
 42 |                 // 起始点
 43 |                 ctx.moveTo(75, 40)
 44 |                 // 左半边
 45 |                 ctx.bezierCurveTo(75, 37, 70, 25, 50, 25)
 46 |                 ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5)
 47 |                 ctx.bezierCurveTo(20, 80, 40, 102, 75, 120)
 48 |                 // 右半边
 49 |                 ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5)
 50 |                 ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25)
 51 |                 ctx.bezierCurveTo(85, 25, 75, 37, 75, 40)
 52 | 
 53 |                 //闭合路径
 54 |                 ctx.closePath()
 55 |               }
 56 |               else if(config.type === 'polygon'){
 57 |                 ctx.beginPath()
 58 |                 ctx.moveTo(config.nodelist[0][0], config.nodelist[0][1])
 59 |                 for(let i=1;i<config.nodelist.length;i++){
 60 |                   ctx.lineTo(config.nodelist[i][0], config.nodelist[i][1])
 61 |                 }
 62 |                 ctx.closePath()
 63 |               }
 64 |             }
 65 |           }"
 66 |       >
 67 |         <v-image
 68 |           :config="{
 69 |               x: config.vImage.x + config.vImage.width / 2,
 70 |               y: config.vImage.y + config.vImage.height / 2,
 71 |               offset: {
 72 |                 x: config.vImage.width / 2,
 73 |                 y: config.vImage.height / 2,
 74 |               },
 75 |               width: config.vImage.width,
 76 |               height: config.vImage.height,
 77 |               scale: {
 78 |                 x: (1 + config.vImage.scale / 100 ).toFixed(2),
 79 |                 y: (1 + config.vImage.scale / 100 ).toFixed(2)
 80 |               },
 81 |               rotation: config.vImage.rotation,
 82 |               image: config.vImage.img,
 83 |               draggable: true
 84 |             }"
 85 |           @mousedown="getCurrent(config.vImage.uniqueId)"
 86 |           @dragstart="dragStart(config.vImage.uniqueId)"
 87 |           @dragmove="dragMove"
 88 |           @dragend="dragEnd"
 89 |         />
 90 |       </v-group>
 91 |     </v-layer>
 92 |   </div>
 93 | </template>
 94 | 
 95 | <script>
 96 | import { mapMutations } from "vuex";
 97 | 
 98 | export default {
 99 |   name: "LayerGroup",
100 |   props: {
101 |     configs: {
102 |       type: Array,
103 |       default() {
104 |         return [];
105 |       }
106 |     }
107 |   },
108 |   methods: {
109 |     ...mapMutations([
110 |       'setImageId'
111 |     ]),
112 |     // 当前选择的 v-image
113 |     getCurrent(id) {
114 |       this.setImageId(id);
115 |     },
116 |     // dragsrat 鼠标位置
117 |     dragStart(id) {
118 |       this.getCurrent(id);
119 |       this.$emit("on-dragstart");
120 |     },
121 |     // dragmove
122 |     dragMove() {
123 |       this.$emit("on-dragmove");
124 |     },
125 |     // dragend
126 |     dragEnd() {
127 |       this.$emit("on-dragend");
128 |     }
129 |   }
130 | };
131 | </script>
132 | 


--------------------------------------------------------------------------------
/src/components/CommonSliderBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="slider-box">
  3 |     <div class="slider-box-wrap">
  4 |       <input v-if="unit.toLowerCase() === 'deg'" v-model="form.rotation" type="hidden">
  5 |       <input v-if="unit.toLowerCase() === '%'" v-model="form.scale" type="hidden">
  6 |       <div class="slider-bar"></div>
  7 |       <div
  8 |         class="slider-button-wrap"
  9 |         @mouseover="iTooltip = true"
 10 |         @mouseout="iTooltip = false"
 11 |         @mousedown="getDragStart"
 12 |       >
 13 |         <div class="slider-botton"></div>
 14 |         <transition name="fade">
 15 |           <div class="tooltip" v-if="iTooltip">
 16 |             <div class="tooltip-arrow"></div>
 17 |             <div class="tooltip-content">{{ numTooltip }} {{ unit }}</div>
 18 |           </div>
 19 |         </transition>
 20 |       </div>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | export default {
 27 |   name: "CommonSliderBar",
 28 |   props: {
 29 |     form: {
 30 |       type: Object,
 31 |       default() {
 32 |         return {
 33 |           rotation: 0,
 34 |           scale: 1
 35 |         };
 36 |       }
 37 |     },
 38 |     unit: {
 39 |       type: String,
 40 |       default: 'deg'
 41 |     }
 42 |   },
 43 |   data() {
 44 |     return {
 45 |       iTooltip: false,
 46 |       numTooltip: 0,
 47 |       numTrans: 0,
 48 |       disX: 0,
 49 |       dragTarget: null,
 50 |       dragLeft: ""
 51 |     };
 52 |   },
 53 |   methods: {
 54 |     getDragStart(e) {
 55 |       this.disX = e.clientX;
 56 |       this.dragTarget = e.target.parentNode;
 57 | 
 58 |       let oSliderWidth = document.querySelector(".slider-box-wrap").clientWidth || 176;
 59 |       this.dragLeft =
 60 |         this.dragLeft === ""
 61 |           ? oSliderWidth / 2
 62 |           : parseInt(this.dragTarget.style.left);
 63 |       let oButton = e.target;
 64 |       oButton.classList.add("slider-botton-hover");
 65 | 
 66 |       document.onmousemove = e => {
 67 |         let left = e.clientX - this.disX + this.dragLeft;
 68 |         let max = oSliderWidth;
 69 |         left = left < 0 ? 0 : left;
 70 |         left = left > max ? max : left;
 71 | 
 72 |         // 旋转 numTrans  > 60 -> 180  < 60 -> -180
 73 |         if (this.unit.toLowerCase() === "deg") {
 74 |           this.numTrans =
 75 |             this.dragLeft === ""
 76 |               ? 0
 77 |               : parseInt(((left - oSliderWidth / 2) * 180) / (oSliderWidth / 2));
 78 |           this.form.rotation = this.numTrans;
 79 |           this.numTooltip = this.numTrans;
 80 |         }
 81 |         // 缩放 numTrans  > 60 -> 200%  < 60 -> 0
 82 |         else if (this.unit.toLowerCase() === "%") {
 83 |           this.numTrans =
 84 |             this.dragLeft === ""
 85 |               ? 0
 86 |               : Math.floor(
 87 |                   (left - oSliderWidth / 2) *
 88 |                     (100 / (oSliderWidth / 2)).toFixed(2)
 89 |                 );
 90 |           this.numTrans = this.numTrans < -100 ? -100 : this.numTrans;
 91 |           this.form.scale = this.numTrans;
 92 |           this.numTooltip = this.numTrans + 100;
 93 |         }
 94 |         this.dragTarget.style.left = left + "px";
 95 |       };
 96 |       document.onmouseup = () => {
 97 |         oButton.classList.remove("slider-botton-hover");
 98 |         this.iTooltip = false;
 99 |         document.onmousemove = null;
100 |         document.onmouseup = null;
101 |       };
102 |     }
103 |   }
104 | };
105 | </script>
106 | 
107 | <style>
108 | .slider-box-wrap {
109 |   position: relative;
110 | }
111 | 
112 | .slider-bar {
113 |   width: 100%;
114 |   height: 4px;
115 |   margin: 16px 0;
116 |   background-color: #e9eaec;
117 |   border-radius: 3px;
118 |   vertical-align: middle;
119 |   position: relative;
120 |   cursor: pointer;
121 | }
122 | 
123 | .slider-button-wrap {
124 |   width: 18px;
125 |   height: 18px;
126 |   text-align: center;
127 |   background-color: transparent;
128 |   position: absolute;
129 |   top: -4px;
130 |   left: 50%;
131 |   transform: translateX(-50%);
132 | }
133 | 
134 | .slider-botton {
135 |   width: 12px;
136 |   height: 12px;
137 |   border: 2px solid #47cb89;
138 |   border-radius: 50%;
139 |   background-color: #fff;
140 |   transition: all 0.2s linear;
141 |   outline: 0;
142 | }
143 | 
144 | .slider-botton:hover {
145 |   cursor: grabbing;
146 |   border-color: #19be6b;
147 |   transform: scale(1.5);
148 | }
149 | 
150 | .slider-botton-hover {
151 |   cursor: grabbing;
152 |   border-color: #19be6b;
153 |   transform: scale(1.5);
154 | }
155 | 
156 | .tooltip {
157 |   display: block;
158 |   visibility: visible;
159 |   font-size: 12px;
160 |   line-height: 1.5;
161 |   position: absolute;
162 |   z-index: 1060;
163 |   padding: 5px 0 8px;
164 |   will-change: top, left;
165 |   top: -47px;
166 |   left: -19px;
167 | }
168 | 
169 | .tooltip-arrow {
170 |   position: absolute;
171 |   width: 0;
172 |   height: 0;
173 |   border-color: transparent;
174 |   border-style: solid;
175 |   bottom: 3px;
176 |   border-width: 5px 5px 0;
177 |   border-top-color: rgba(70, 76, 91, 0.9);
178 |   left: 50%;
179 |   margin-left: -5px;
180 | }
181 | 
182 | .tooltip-content {
183 |   max-width: 250px;
184 |   min-height: 34px;
185 |   padding: 8px 12px;
186 |   color: #fff;
187 |   text-align: left;
188 |   text-decoration: none;
189 |   background-color: rgba(70, 76, 91, 0.9);
190 |   border-radius: 4px;
191 |   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
192 |   white-space: nowrap;
193 | }
194 | </style>
195 | 


--------------------------------------------------------------------------------
/src/components/Material.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Layout class="create-material">
  3 |     <Steps :current="stepCurrent" size="small" class="step">
  4 |       <Step title="选择模板"></Step>
  5 |       <Step title="编辑图片"></Step>
  6 |       <Step title="查看素材"></Step>
  7 |     </Steps>
  8 |     <!-- 下一步 -->
  9 |     <div class="next-step">
 10 |       <Button @click="handleStep">下一步</Button>
 11 |     </div>
 12 |     <!-- 选择模板 -->
 13 |     <div class="select-template create-item" v-if="stepCurrent === 0">
 14 |       <h3 class="title">当前模板: {{ currentTemplate.name }}</h3>
 15 |       <p>由于当前只存储一个模板，默认选择这个模板。</p>
 16 |     </div>
 17 |     <!-- 编辑图片 -->
 18 |     <div class="edit-image create-item" v-if="stepCurrent === 1">
 19 |       <h3 class="title">编辑图片</h3>
 20 |       <div class="edit-image-wrap">
 21 |         <MaterialConfig></MaterialConfig>
 22 |         <Card class="stage-card">
 23 |           <p slot="title">{{ currentTemplate.name }}</p>
 24 |           <div slot="extra">
 25 |             <i-switch v-model="switchTop" style="margin-right: 10px;"/>
 26 |             <span>预览（注意：预览时不可编辑图片，编辑之前请先关闭预览）</span>
 27 |             <Button @click="handleSave">保存素材</Button>
 28 |           </div>
 29 |           <MaterialStage
 30 |             ref="MaterialStage"
 31 |             :iVisible="switchTop"
 32 |             :stageConfig="currentTemplate.stageConfig"
 33 |             :configList="currentTemplate.configList"
 34 |           ></MaterialStage>
 35 |         </Card>
 36 |       </div>
 37 |     </div>
 38 |     <!-- 查看素材 -->
 39 |     <div class="view-material create-item" v-if="stepCurrent === 2">
 40 |       <img :src="dataSrc">
 41 |     </div>
 42 |   </Layout>
 43 | </template>
 44 | 
 45 | <script>
 46 | import MaterialConfig from "./MaterialConfig";
 47 | import MaterialStage from "./MaterialStage";
 48 | import { mapState, mapMutations } from "vuex";
 49 | import _ from "lodash";
 50 | import util from "../libs/util.js";
 51 | 
 52 | export default {
 53 |   name: "Material",
 54 |   components: {
 55 |     MaterialConfig,
 56 |     MaterialStage
 57 |   },
 58 |   data() {
 59 |     return {
 60 |       stepCurrent: 0,
 61 |       switchTop: true,
 62 |       timer: null,
 63 |       dataSrc: ""
 64 |     };
 65 |   },
 66 |   computed: {
 67 |     ...mapState({
 68 |       currentTemplate: state => state.material.currentTemplate
 69 |     })
 70 |   },
 71 |   created() {
 72 |     this.handleJson();
 73 |   },
 74 |   methods: {
 75 |     ...mapMutations(["getCurrentTepmlate"]),
 76 |     handleJson() {
 77 |       // 处理 json 字符串
 78 |       const config = JSON.parse(localStorage.getItem("_stage_json"));
 79 |       config.id = 0;
 80 |       // group
 81 |       config.configList.group.forEach(item => {
 82 |         item.img = util.newImage(item.src);
 83 |         // v-image 配置跟 group 分开
 84 |         let _clone = _.cloneDeep(item);
 85 |         _clone.x = 0;
 86 |         _clone.y = 0;
 87 |         _clone.rotation = 0;
 88 |         _clone.scale = 0;
 89 |         _clone.img = util.newImage(item.src);
 90 |         item.vImage = _clone;
 91 |       });
 92 |       // font
 93 |       config.configList.font.forEach(item => {
 94 |         item.img = util.newImage(item.src);
 95 |       });
 96 |       this.getCurrentTepmlate(config);
 97 |     },
 98 |     handleStep() {
 99 |       if (localStorage.getItem("_image_dataurl")) {
100 |         this.dataSrc = localStorage.getItem("_image_dataurl");
101 |       }
102 |       if (this.stepCurrent < 2) {
103 |         this.stepCurrent += 1;
104 |       } else {
105 |         this.stepCurrent = 0;
106 |       }
107 |     },
108 |     // 保存素材
109 |     handleSave() {
110 |       const _this = this;
111 |       this.switchTop = true;
112 |       this.timer = setTimeout(function() {
113 |         const stage = _this.$refs.MaterialStage.$refs.stage.getStage();
114 |         const canvas = stage.toCanvas();
115 |         _this.dataSrc = stage.toDataURL();
116 |         canvas.toBlob(
117 |           function(blob) {
118 |             util.showSuccess(`success: ${blob}`);
119 |             localStorage.setItem("_image_dataurl", _this.dataSrc);
120 |           },
121 |           "image/jpeg",
122 |           1
123 |         );
124 |       }, 500);
125 |     }
126 |   }
127 | };
128 | </script>
129 | 
130 | <style lang="less">
131 | img {
132 |   max-width: 100%;
133 |   max-height: 100%;
134 | }
135 | .create-material {
136 |   height: ~"calc(100% - 64px)";
137 |   overflow: hidden;
138 |   padding: 30px;
139 |   position: relative;
140 | 
141 |   &.ivu-layout {
142 |     background: #fff;
143 |   }
144 |   .step {
145 |     margin-bottom: 15px;
146 |   }
147 |   .next-step {
148 |     position: absolute;
149 |     top: 24px;
150 |     right: 15%;
151 |   }
152 |   .create-item {
153 |     height: ~"calc(100% - 54px)";
154 |   }
155 |   .select-template {
156 |     text-align: center;
157 |   }
158 |   .title {
159 |     margin-bottom: 15px;
160 |   }
161 |   .selet-image {
162 |     margin-bottom: 30px;
163 | 
164 |     img {
165 |       max-width: 100%;
166 |       max-height: 100%;
167 |     }
168 |     .image-list {
169 |       display: flex;
170 | 
171 |       .ivu-checkbox-wrapper {
172 |         position: relative;
173 |       }
174 |       .ivu-checkbox {
175 |         position: absolute;
176 |         top: 20px;
177 |         right: 16px;
178 |         z-index: 9;
179 |       }
180 |     }
181 |   }
182 |   .edit-image-wrap {
183 |     display: flex;
184 |     justify-content: space-between;
185 |     height: ~"calc(100% - 36px)";
186 |   }
187 |   .stage-card {
188 |     width: ~"calc(100% - 240px)";
189 |     padding: 0;
190 | 
191 |     .ivu-card-body {
192 |       height: ~"calc(100% - 52px)";
193 |       overflow: auto;
194 |     }
195 |   }
196 | }
197 | </style>
198 | 


--------------------------------------------------------------------------------
/src/components/Template.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Layout class="create-stage">
  3 |     <!-- 创建模板: 配置 -->
  4 |     <Sider class="template-config" style="min-width: 300px; max-width: 300px; width: 300px;">
  5 |       <Collapse v-model="collapseValue" accordion>
  6 |         <Panel name="1">
  7 |           模版名称
  8 |           <div class="config-item" slot="content">
  9 |             <Form :model="stageName" :rules="nameRules" :label-width="60">
 10 |               <FormItem prop="name" label="名称">
 11 |                 <Input
 12 |                   type="text"
 13 |                   v-model="stageName.name"
 14 |                   :clearable="true"
 15 |                   placeholder="请输入模版名称"
 16 |                 />
 17 |               </FormItem>
 18 |             </Form>
 19 |           </div>
 20 |         </Panel>
 21 |         <Panel name="2">
 22 |           画布配置
 23 |           <div class="config-item" slot="content">
 24 |             <Form :model="stageConfig" :rules="stageRules" :label-width="60">
 25 |               <FormItem prop="width" label="宽">
 26 |                 <InputNumber v-model="stageConfig.width" :clearable="true" placeholder="请输入画布宽度"></InputNumber>
 27 |               </FormItem>
 28 |               <FormItem prop="height" label="高">
 29 |                 <InputNumber v-model="stageConfig.height" :clearable="true" placeholder="请输入画布高度"></InputNumber>
 30 |               </FormItem>
 31 |               <FormItem prop="url" label="URL">
 32 |                 <Input
 33 |                   type="textarea"
 34 |                   :rows="6"
 35 |                   v-model="stageConfig.url"
 36 |                   placeholder="请输入画布背景图片地址"
 37 |                 />
 38 |               </FormItem>
 39 |             </Form>
 40 |           </div>
 41 |         </Panel>
 42 |         <Panel name="3">
 43 |           模版框配置
 44 |           <div name="config-item" slot="content">
 45 |             <TemplateConfig configType="group" :typeList="shapeList"></TemplateConfig>
 46 |           </div>
 47 |         </Panel>
 48 |         <Panel name="4">
 49 |           装饰配置
 50 |           <div name="config-item" slot="content">
 51 |             <TemplateConfig configType="font" :typeList="decorationList"></TemplateConfig>
 52 |           </div>
 53 |         </Panel>
 54 |       </Collapse>
 55 |       <Button @click="saveStage" style="margin-top: 15px;">保存模版</Button>
 56 |     </Sider>
 57 |     <!-- 创建模板: 预览 -->
 58 |     <Content class="template-sences">
 59 |       <TemplateStage ref="TemplateStage" :stageConfig="stageConfig"></TemplateStage>
 60 |     </Content>
 61 |   </Layout>
 62 | </template>
 63 | 
 64 | <script>
 65 | import util from "../libs/util.js";
 66 | import list from "../libs/list.js";
 67 | import { mapState } from "vuex";
 68 | import TemplateConfig from "./TemplateConfig.vue";
 69 | import TemplateStage from "./TemplateStage";
 70 | 
 71 | export default {
 72 |   name: "Template",
 73 |   components: {
 74 |     TemplateConfig,
 75 |     TemplateStage
 76 |   },
 77 |   data() {
 78 |     // 数字
 79 |     const vInteger = (rule, value, callback) => {
 80 |       // 不为空
 81 |       if (value === "") {
 82 |         return callback(new Error("必填项"));
 83 |       }
 84 |       // 数字检测
 85 |       else if (!/^\d{1,}$/.test(value)) {
 86 |         return callback(new Error("请用数字填写（且为整数）"));
 87 |       } else {
 88 |         callback();
 89 |       }
 90 |     };
 91 |     return {
 92 |       collapseValue: "1",
 93 |       // 模版名称
 94 |       stageName: {
 95 |         id: 0,
 96 |         name: "konva_demo"
 97 |       },
 98 |       // 模版名称验证
 99 |       nameRules: {
100 |         name: [{ required: true, message: "请填写模板名称", trigger: "blur" }]
101 |       },
102 |       // stage 表单验证
103 |       stageRules: {
104 |         width: [{ required: true, validator: vInteger, trigger: "blur" }],
105 |         height: [{ required: true, validator: vInteger, trigger: "blur" }],
106 |         url: [{ type: "url", message: "链接地址不对哦", trigger: "blur" }]
107 |       },
108 |       // 形状列表
109 |       shapeList: list.shapeList,
110 |       // 装饰类型
111 |       decorationList: list.decorationList,
112 |       // stage序列化
113 |       stageJson: {}
114 |     };
115 |   },
116 |   computed: {
117 |     ...mapState({
118 |       // 底图
119 |       stageConfig: state => state.template.stageConfig,
120 |       // 配置列表
121 |       configList: state => state.template.configList
122 |     })
123 |   },
124 |   methods: {
125 |     // 保存模版
126 |     saveStage() {
127 |       // 模版配置 json
128 |       for (let prop in this.configList) {
129 |         this.configList[prop].forEach(item => (item.draggable = false));
130 |       }
131 |       this.stageJson = {
132 |         name: this.stageName.name,
133 |         stageConfig: {
134 |           width: this.stageConfig.width,
135 |           height: this.stageConfig.height,
136 |           url: this.stageConfig.url
137 |         },
138 |         configList: this.configList,
139 |         thumbnails: "" // 模板预览图片，先将创建的模板处理成图片文件发给后台，存储返回成功后的 url
140 |       };
141 | 
142 |       const canvas = this.$refs.TemplateStage.$refs.stage.getStage().toCanvas();
143 |       // 有跨域的图片 toBlob 会报错
144 |       canvas.toBlob(
145 |         function(blob) {
146 |           // 存储预览图片
147 |           util.showSuccess(`success: ${blob}`);
148 |         },
149 |         "image/jpeg",
150 |         0.95
151 |       );
152 |       // 存储配置
153 |       localStorage.setItem("_stage_json", JSON.stringify(this.stageJson));
154 |     }
155 |   }
156 | };
157 | </script>
158 | 
159 | <style lang="less">
160 | .create-stage {
161 |   display: flex;
162 |   height: ~"calc(100vh - 64px)";
163 |   overflow: hidden;
164 | 
165 |   .template-config {
166 |     background-color: #fff;
167 |     padding: 15px;
168 | 
169 |     .ivu-collapse {
170 |       max-height: 100%;
171 |       overflow: hidden;
172 | 
173 |       .ivu-collapse-content {
174 |         max-height: 360px;
175 |         overflow: hidden auto;
176 |       }
177 |     }
178 |   }
179 |   .template-sences {
180 |     height: 100%;
181 |     overflow: hidden;
182 |     padding: 15px;
183 |   }
184 | }
185 | </style>
186 | 


--------------------------------------------------------------------------------
/src/components/TemplateConfig.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="stage-config">
  3 |     <!-- 模版框配置 -->
  4 |     <Form :model="config" :label-width="45">
  5 |       <!-- 操作按钮 -->
  6 |       <FormItem class="group-button">
  7 |         <Button @click="addGroup">添加</Button>
  8 |         <Button @click="saveGroup" style="margin: 0 4px;">保存</Button>
  9 |         <Button @click="removeGroup">删除</Button>
 10 |       </FormItem>
 11 |       <!-- 形状/装饰 -->
 12 |       <FormItem prop="type" :label="typeText">
 13 |         <Select v-model="config.type">
 14 |           <Option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</Option>
 15 |         </Select>
 16 |       </FormItem>
 17 |       <!-- unique id -->
 18 |       <FormItem prop="uniqueId" label="ID" style="display: -none;">
 19 |         <InputNumber v-model="config.uniqueId" :disabled="true" placeholder="id"></InputNumber>
 20 |       </FormItem>
 21 |       <!-- 坐标 X -->
 22 |       <FormItem prop="x" label="X">
 23 |         <InputNumber v-model="config.x"></InputNumber>
 24 |       </FormItem>
 25 |       <!-- 坐标 Y -->
 26 |       <FormItem prop="y" label="Y">
 27 |         <InputNumber v-model="config.y"></InputNumber>
 28 |       </FormItem>
 29 |       <!-- 宽 -->
 30 |       <FormItem prop="width" label="宽" v-if="config.type === 'rect' || config.type === 'image'">
 31 |         <InputNumber v-model="config.width"></InputNumber>
 32 |       </FormItem>
 33 |       <!-- 高 -->
 34 |       <FormItem prop="height" label="高" v-if="config.type === 'rect' || config.type === 'image'">
 35 |         <InputNumber v-model="config.height"></InputNumber>
 36 |       </FormItem>
 37 |       <!-- 边长 -->
 38 |       <FormItem prop="side" label="边长" v-if="config.type === 'triangle'">
 39 |         <InputNumber v-model="config.side"></InputNumber>
 40 |       </FormItem>
 41 |       <!-- 半径 -->
 42 |       <FormItem prop="radius" label="半径" v-if="config.type === 'circle'">
 43 |         <InputNumber v-model="config.radius"></InputNumber>
 44 |       </FormItem>
 45 |       <!-- 模版图片/装饰图片 -->
 46 |       <FormItem prop="img" label="URL">
 47 |         <Input type="textarea" :rows="6" v-model="config.src" placeholder="url"/>
 48 |       </FormItem>
 49 |       <!-- 文字内容 -->
 50 |       <FormItem prop="fontText" label="文字" v-if="config.type === 'font'">
 51 |         <Input type="text" v-model="config.fontText" :clearable="true" placeholder="demo"/>
 52 |       </FormItem>
 53 |       <!-- 文字字体 -->
 54 |       <FormItem prop="fontFamily" label="字体" v-if="config.type === 'font'">
 55 |         <Select v-model="config.fontFamily">
 56 |           <Option v-for="item in fontFamilyList" :value="item.value" :key="item.id">{{ item.value }}</Option>
 57 |         </Select>
 58 |       </FormItem>
 59 |       <!-- 文字字号 -->
 60 |       <FormItem prop="fontSize" label="字号" v-if="config.type === 'font'">
 61 |         <Select v-model="config.fontSize">
 62 |           <Option v-for="item in fontSizeList" :value="item.id" :key="item.id">{{ item.value }}</Option>
 63 |         </Select>
 64 |       </FormItem>
 65 |       <!-- 文字颜色 -->
 66 |       <FormItem prop="fontColor" label="颜色" v-if="config.type === 'font'">
 67 |         <div>
 68 |           <ColorPicker v-model="config.fontColor"/>
 69 |           <Input type="text" v-model="config.fontColor" :clearable="true" style="width: 50%;"/>
 70 |         </div>
 71 |       </FormItem>
 72 |       <!-- 拖拽 -->
 73 |       <FormItem prop="draggable" label="拖拽">
 74 |         <div style="width: 160px;">
 75 |           <i-switch v-model="config.draggable">
 76 |             <span slot="open">On</span>
 77 |             <span slot="close">Off</span>
 78 |           </i-switch>
 79 |         </div>
 80 |       </FormItem>
 81 |       <!-- 旋转 -->
 82 |       <FormItem prop="rotation" label="旋转">
 83 |         <CommonSliderBar :form="config" unit="Deg"></CommonSliderBar>
 84 |       </FormItem>
 85 |       <!-- 缩放 -->
 86 |       <FormItem prop="scale" label="缩放">
 87 |         <CommonSliderBar :form="config" unit="%"></CommonSliderBar>
 88 |       </FormItem>
 89 |     </Form>
 90 |   </div>
 91 | </template>
 92 | 
 93 | <script>
 94 | import list from "../libs/list.js";
 95 | import util from "../libs/util.js";
 96 | import _ from "lodash";
 97 | import { mapMutations } from "vuex";
 98 | import CommonSliderBar from "./CommonSliderBar";
 99 | 
100 | export default {
101 |   name: "TemplateConfig",
102 |   components: {
103 |     CommonSliderBar
104 |   },
105 |   props: {
106 |     // 模板框配置/装饰配置
107 |     configType: {
108 |       type: String,
109 |       default: "group"
110 |     },
111 |     // 形状列表/装饰列表
112 |     typeList: {
113 |       type: Array,
114 |       default() {
115 |         return [];
116 |       }
117 |     }
118 |   },
119 |   data() {
120 |     return {
121 |       iClick: false,
122 |       // 字体列表
123 |       fontFamilyList: list.fontFamilyList,
124 |       // 字号列表
125 |       fontSizeList: list.fontSizeList
126 |     };
127 |   },
128 |   computed: {
129 |     // 表单
130 |     config() {
131 |       return this.$store.state.template.config[this.configType];
132 |     },
133 |     // 表单初始化
134 |     initConfig() {
135 |       return this.$store.state.template.initConfig[this.configType];
136 |     },
137 |     typeText() {
138 |       return this.configType === "group" ? "形状" : "装饰";
139 |     }
140 |   },
141 |   methods: {
142 |     ...mapMutations(["setConfigType", "add", "save", "remove"]),
143 |     // 克隆当前表单对象
144 |     getCloneConfig() {
145 |       const clone = _.cloneDeep(this.config);
146 |       clone.img = util.newImage(clone.src);
147 |       clone.stroke = "transparent";
148 |       return clone;
149 |     },
150 |     // 添加
151 |     addGroup() {
152 |       // 设置当前配置类型: group/font
153 |       this.setConfigType(this.configType);
154 |       if (this.config.disabled) {
155 |         util.showWarning("请先保存修改再添加");
156 |         return;
157 |       } else {
158 |         this.add(this.getCloneConfig());
159 |         util.showSuccess("Success!");
160 |       }
161 |     },
162 |     // 保存
163 |     saveGroup() {
164 |       // 设置当前配置类型: group/font
165 |       this.setConfigType(this.configType);
166 |       // 没选中就保存，提示警告信息
167 |       if (!this.config.disabled) {
168 |         util.showWarning("请选中要修改的图层");
169 |         return;
170 |       } else {
171 |         this.save(this.getCloneConfig());
172 |         util.showSuccess("Success!");
173 |       }
174 |     },
175 |     // 删除
176 |     removeGroup() {
177 |       // 设置当前配置类型: group/font
178 |       this.setConfigType(this.configType);
179 |       // 没选中就删除，提示警告信息
180 |       if (!this.config.disabled) {
181 |         util.showWarning("请选中要删除的图层");
182 |         return;
183 |       } else {
184 |         this.remove();
185 |         util.showSuccess("Success!");
186 |       }
187 |     }
188 |   }
189 | };
190 | </script>
191 | 


--------------------------------------------------------------------------------