├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── .DS_Store
    ├── favicon.ico
    ├── index.html
    └── static
    │   ├── 12c3946fa8c445e8a4f6de664893ae22.png
    │   ├── 3adc468aa17543e0902330f1a74c856a.92e9cd1b464643c7957426b8e2735ef8.jpg
    │   ├── 5690278ce1b44cdaab95a90684ec8803.png
    │   ├── 6acfc5f2a8f04981a8b785fde5b2a87c.png
    │   ├── 75abc05c659f4d5aa047b1c4e9bdd81a.png
    │   ├── 9206b8e038074cc9b6ff54330348cc01.png
    │   ├── c365ab6dbe274c1587df1ce13b1bbe29.png
    │   ├── f769bc0e1115441f99dc3468fe4e1db7.png
    │   └── new-pic.png
├── scripts
    ├── common.js
    ├── generateComponent
    │   ├── index.js
    │   └── template.js
    ├── generateStore
    │   ├── index.js
    │   └── template.js
    └── generateView
    │   ├── index.js
    │   └── template.js
├── src
    ├── App.vue
    ├── api
    │   ├── API.js
    │   └── index.js
    ├── assets
    │   ├── .DS_Store
    │   ├── images
    │   │   ├── lock-icon.svg
    │   │   ├── lock-open-icon.svg
    │   │   └── rotate-icon.svg
    │   ├── logo.png
    │   └── styles
    │   │   ├── base.css
    │   │   └── common.css
    ├── components
    │   ├── .DS_Store
    │   ├── MicroEdit
    │   │   ├── AddMaterials.vue
    │   │   ├── BannerEdit.vue
    │   │   ├── BottomOperate.vue
    │   │   ├── MicroLayer.vue
    │   │   ├── ParametersEdit.vue
    │   │   ├── TopOperate.vue
    │   │   ├── bannerEditCommon.js
    │   │   ├── fabricOperate.js
    │   │   ├── guideLines.js
    │   │   └── index.js
    │   └── index.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   ├── index.js
    │   └── mutationTypes.js
    ├── utils
    │   └── index.js
    └── views
    │   └── Home
    │       ├── Home.vue
    │       └── index.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | README.md
2 | src/.DS_Store
3 | /node_modules
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # onLinePS
2 | js基于canvas实现的一个类似ps的工具<br><br>
3 | 本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体,加粗,斜体,下划线,背景色等,同时支持图片已有的操作,拖动图层有辅助线功能,可对画布做放大缩小功能,多操作可撤销/回退功能,可直接导出图片,ps基本操作都已支持。
4 | 
5 | 这个是项目中做的功能,由于过程比较坎坷,fabric.js库很强大,但是中文资料很少,导致解决问题的时候花费了很多功夫,所以摘出来供需要的人使用,由于有些东西需要后端配合,所以把一部分功能砍掉了,所有代码中有一些冗余代码,大家有需要那些功能的也可以宅后台配合把这些功能也做起来,前端的逻辑都已经实现了.
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     '@vue/app'
 4 |   ],
 5 |   "env":{
 6 |     "development": {
 7 |       "plugins": ["dynamic-import-node"]
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mydemo1",
 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 |     "new:view": "node ./scripts/generateView/index",
10 |     "new:comp": "node ./scripts/generateComponent/index",
11 |     "new:store": "node ./scripts/generateStore/index"
12 |   },
13 |   "dependencies": {
14 |     "axios": "^0.21.2",
15 |     "core-js": "^2.6.5",
16 |     "element-ui": "^2.6.1",
17 |     "fabric": "^4.3.0",
18 |     "fontfaceobserver": "^2.1.0",
19 |     "glfx.js__temp": "^1.0.2",
20 |     "vue": "^2.5.2",
21 |     "vue-router": "^3.0.1",
22 |     "vuex": "^3.0.1"
23 |   },
24 |   "devDependencies": {
25 |     "@vue/cli-plugin-babel": "^3.12.1",
26 |     "@vue/cli-plugin-eslint": "^3.5.0",
27 |     "@vue/cli-service": "^5.0.8",
28 |     "babel-eslint": "^10.0.1",
29 |     "chalk": "^2.0.1",
30 |     "compression-webpack-plugin": "^2.0.0",
31 |     "css-loader": "^3.1.0",
32 |     "eslint": "^5.16.0",
33 |     "eslint-plugin-vue": "^5.0.0",
34 |     "less": "^3.9.0",
35 |     "less-loader": "^5.0.0",
36 |     "style-loader": "^0.23.1",
37 |     "uglifyjs-webpack-plugin": "^2.1.3",
38 |     "vue-template-compiler": "^2.5.21"
39 |   },
40 |   "eslintConfig": {
41 |     "root": true,
42 |     "env": {
43 |       "node": true
44 |     },
45 |     "extends": [
46 |       "plugin:vue/essential",
47 |       "eslint:recommended"
48 |     ],
49 |     "rules": {},
50 |     "parserOptions": {
51 |       "parser": "babel-eslint"
52 |     }
53 |   },
54 |   "postcss": {
55 |     "plugins": {
56 |       "autoprefixer": {}
57 |     }
58 |   },
59 |   "browserslist": [
60 |     "> 1%",
61 |     "last 2 versions"
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------
/public/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/.DS_Store


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/favicon.ico


--------------------------------------------------------------------------------
/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>onlineps</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but mydemo1 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 | 


--------------------------------------------------------------------------------
/public/static/12c3946fa8c445e8a4f6de664893ae22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/static/12c3946fa8c445e8a4f6de664893ae22.png


--------------------------------------------------------------------------------
/public/static/3adc468aa17543e0902330f1a74c856a.92e9cd1b464643c7957426b8e2735ef8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/static/3adc468aa17543e0902330f1a74c856a.92e9cd1b464643c7957426b8e2735ef8.jpg


--------------------------------------------------------------------------------
/public/static/5690278ce1b44cdaab95a90684ec8803.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/static/5690278ce1b44cdaab95a90684ec8803.png


--------------------------------------------------------------------------------
/public/static/6acfc5f2a8f04981a8b785fde5b2a87c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/static/6acfc5f2a8f04981a8b785fde5b2a87c.png


--------------------------------------------------------------------------------
/public/static/75abc05c659f4d5aa047b1c4e9bdd81a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/static/75abc05c659f4d5aa047b1c4e9bdd81a.png


--------------------------------------------------------------------------------
/public/static/9206b8e038074cc9b6ff54330348cc01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/static/9206b8e038074cc9b6ff54330348cc01.png


--------------------------------------------------------------------------------
/public/static/c365ab6dbe274c1587df1ce13b1bbe29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/static/c365ab6dbe274c1587df1ce13b1bbe29.png


--------------------------------------------------------------------------------
/public/static/f769bc0e1115441f99dc3468fe4e1db7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/static/f769bc0e1115441f99dc3468fe4e1db7.png


--------------------------------------------------------------------------------
/public/static/new-pic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/public/static/new-pic.png


--------------------------------------------------------------------------------
/scripts/common.js:
--------------------------------------------------------------------------------
 1 | const chalk = require('chalk')
 2 | const path = require('path')
 3 | const fs = require('fs')
 4 | const resolvePath = (...file) => path.resolve(__dirname, ...file)
 5 | const log = message => console.log(chalk.green(`${message}`))
 6 | const successLog = message => console.log(chalk.blue(`${message}`))
 7 | const errorLog = error => console.log(chalk.red(`${error}`))
 8 | const resolveComponentName = componentName => {
 9 |     componentName = componentName.toLowerCase();
10 |     //截取单词,按大驼峰命名拼接
11 |     let componentNameStr = componentName.split("|");
12 |     if (componentNameStr.length > 1) {
13 |         componentNameStr = componentNameStr.map((item) => {
14 |             if (item.trim()) {
15 |                 return item.substring(0, 1).toUpperCase() + item.substring(1);
16 |             }
17 |             return '';
18 |         });
19 |         return componentNameStr.join('');
20 |     } else {
21 |         errorLog('格式错误!名称各单词之间用|隔开,单个单词如home|,多个单词如home|index')
22 |         return '';
23 |     }
24 | }
25 | 
26 | // 递归创建目录
27 | const mkdirs=(directory, callback)=> {
28 |     var exists = fs.existsSync(directory)
29 |     if (exists) {
30 |         callback()
31 |     } else {
32 |         mkdirs(path.dirname(directory), function () {
33 |             fs.mkdirSync(directory)
34 |             callback()
35 |         })
36 |     }
37 | }
38 | 
39 | module.exports ={
40 |     dotExistDirectoryCreate : (directory) => {
41 |         return new Promise((resolve) => {
42 |             mkdirs(directory, function () {
43 |                 resolve(true)
44 |             })
45 |         })
46 |     },
47 |     generateFile : (path, data) => {
48 |         if (fs.existsSync(path)) {
49 |             errorLog(`${path}文件已存在`)
50 |             return
51 |         }
52 |         return new Promise((resolve, reject) => {
53 |             fs.writeFile(path, data, 'utf8', err => {
54 |                 if (err) {
55 |                     errorLog(err.message)
56 |                     reject(err)
57 |                 } else {
58 |                     resolve(true)
59 |                 }
60 |             })
61 |         })
62 |     },
63 |     path: path,
64 |     chalk: chalk,
65 |     fs: fs,
66 |     log: log,
67 |     successLog: successLog,
68 |     errorLog: errorLog,
69 |     resolvePath: resolvePath,
70 |     resolveComponentName: resolveComponentName
71 | 
72 | }


--------------------------------------------------------------------------------
/scripts/generateComponent/index.js:
--------------------------------------------------------------------------------
  1 | // index.js`
  2 | //导入公用方法
  3 | const {
  4 |     dotExistDirectoryCreate,
  5 |     generateFile,
  6 |     fs,
  7 |     log,
  8 |     resolvePath,
  9 |     successLog,
 10 |     errorLog,
 11 |     resolveComponentName
 12 | } = require('../common.js');
 13 | const {
 14 |     componentTemplate,
 15 |     entryTemplate,
 16 |     globalRegisterImportTemplate,
 17 |     globalRegisterExportTemplate
 18 | } = require('./template')
 19 | 
 20 | log('请输入要生成的组件名称、会生成在 components/目录下,如需生成全局组件，请加 g/ 前缀,名称各单词之间用|隔开,单个单词如home|,多个单词如home|index')
 21 | let componentName = ''
 22 | let isGlobal=false
 23 | process.stdin.on('data', async chunk => {
 24 |     const inputName = String(chunk).trim().toString()
 25 |     if (inputName.includes('/')) {
 26 |         const inputArr = inputName.split('/')
 27 |         componentName = inputArr[inputArr.length - 1]
 28 |         if (inputArr[0]=='g')
 29 |         {
 30 |             isGlobal=true;
 31 |         }
 32 |         else{
 33 |             isGlobal = false;
 34 |             errorLog("设置全局参数前缀错误,无法全局注册");
 35 |         }
 36 |     } else {
 37 |         componentName = inputName
 38 |     }
 39 |     //判断名字是否包含|,不包含提示错误,重新输入,包含则按大驼峰拼接
 40 |     componentName = resolveComponentName(componentName);
 41 |     if (!componentName) {
 42 |         return;
 43 |     }
 44 |     /**
 45 |      * 组件目录路径
 46 |      */
 47 |     const componentDirectory = resolvePath('../src/components', componentName)
 48 | 
 49 |     /**
 50 |      * vue组件路径
 51 |      */
 52 |     const componentVueName = resolvePath(componentDirectory, `${componentName}.vue`)
 53 |     /**
 54 |      * 入口文件路径
 55 |      */
 56 |     const entryComponentName = resolvePath(componentDirectory, 'index.js')
 57 | 
 58 |     const hasComponentDirectory = fs.existsSync(componentDirectory)
 59 |     if (hasComponentDirectory) {
 60 |         errorLog(`${componentName}组件目录已存在，请重新输入`)
 61 |         return
 62 |     } else {
 63 |         log(`正在生成 component 目录 ${componentDirectory}`)
 64 |         await dotExistDirectoryCreate(componentDirectory)
 65 |     }
 66 |     try {
 67 |         log(`正在生成 vue 文件 ${componentVueName}`)
 68 |         await generateFile(componentVueName, componentTemplate(componentName))
 69 |         log(`正在生成 entry 文件 ${entryComponentName}`)
 70 |         await generateFile(entryComponentName, entryTemplate(componentName))
 71 |         if (isGlobal)
 72 |         {
 73 |             log(`正在注册全局组件文件 ${componentName}`)
 74 |             await addGlobalComponent(componentName);
 75 |         }
 76 |         successLog('组件生成成功')
 77 |     } catch (e) {
 78 |         errorLog(e.message)
 79 |     }
 80 | 
 81 |     process.stdin.emit('end')
 82 | })
 83 | process.stdin.on('end', () => {
 84 |     log('exit')
 85 |     process.exit()
 86 | })
 87 | 
 88 | //添加全局注册
 89 | function addGlobalComponent(fileName) {
 90 |     const file = resolvePath('../src/components', 'index.js');
 91 |     return new Promise((resolve,reject)=>{
 92 |         if (fs.existsSync(file)) {
 93 |             fs.readFile(file, 'utf-8', (err, data) => {
 94 |                 if (err) {
 95 |                     errorLog(err.message);
 96 |                     reject();
 97 |                 } else {
 98 |                     let dataStr = data.toString();
 99 |                     let importStr, exportStr;
100 |                     if (!dataStr) {
101 |                         emptyComponentAdd(file, fileName).then(()=>{
102 |                             resolve();
103 |                         });
104 |                         return;
105 |                     }
106 |                     let dataList = dataStr.split("export");
107 |                     if (dataList && dataList.length == 2) {
108 |                         importStr = dataList[0];
109 |                         importStr += globalRegisterImportTemplate(fileName);
110 |                         exportStr = 'export' + dataList[1];
111 |                         exportStr = exportStr.replace(/}/, globalRegisterExportTemplate(fileName));
112 |                         let writeStr = importStr + '\n' + exportStr;
113 |                         writeDataToFile(file, writeStr).then(() => {
114 |                             resolve();
115 |                         });;
116 |                     } else {
117 |                         errorLog("components/index.js格式不规范,请调整为标准格式后重试");
118 |                         reject();
119 |                     }
120 |                 }
121 |             });
122 |         } else {
123 |             emptyComponentAdd(file, fileName).then(()=>{
124 |                 resolve();
125 |             });
126 |         }
127 |     })
128 |     
129 | 
130 |     function emptyComponentAdd(file,fileName) {
131 |         let importStr = globalRegisterImportTemplate(fileName);
132 |         let exportStr = `export default (Vue) => {\n${globalRegisterExportTemplate(fileName)}`;
133 |         let writeStr = importStr + '\n' + exportStr;
134 |         return writeDataToFile(file, writeStr);
135 |     }
136 | 
137 |     function writeDataToFile(file, data) {
138 |         return new Promise((resolve,reject)=>{
139 |             fs.writeFile(file, data, {
140 |                 'flag': 'w'
141 |             }, function (err) {
142 |                 if (err) {
143 |                     errorLog(err.message);
144 |                     reject();
145 |                 }
146 |                 successLog('全局注册成功!');
147 |                 resolve();
148 |             });
149 |         })
150 |         
151 |     }
152 | }
153 | 


--------------------------------------------------------------------------------
/scripts/generateComponent/template.js:
--------------------------------------------------------------------------------
 1 | // template.js
 2 | module.exports = {
 3 |     componentTemplate: compoentName => {
 4 |         return `<template>
 5 |     <div class="${compoentName}">
 6 |     </div>
 7 | </template>
 8 | <script>
 9 |     export default {
10 |         name: '${compoentName}'
11 |     };
12 | </script>
13 | <style lang="less" scoped>
14 | </style>`
15 |     },
16 |     entryTemplate: compoentName=> `import ${compoentName} from './${compoentName}.vue'
17 | export default ${compoentName}`,
18 |     globalRegisterImportTemplate: compoentName => `import ${compoentName} from './${compoentName}'`,
19 |     globalRegisterExportTemplate: compoentName => `Vue.component(${compoentName}.name, ${compoentName})\n}`
20 | }
21 | 


--------------------------------------------------------------------------------
/scripts/generateStore/index.js:
--------------------------------------------------------------------------------
  1 | // index.js
  2 | //导入公用方法
  3 | const {
  4 |     dotExistDirectoryCreate,
  5 |     generateFile,
  6 |     fs,
  7 |     log,
  8 |     resolvePath,
  9 |     successLog,
 10 |     errorLog,
 11 |     resolveComponentName
 12 | } = require('../common.js');
 13 | // 导入模板
 14 | const {
 15 |     storeTemplate,
 16 |     storeRegisterImportTemplate,
 17 |     storeRegisterExportTemplate
 18 | } = require('./template')
 19 | 
 20 | log('请输入要生成的store名称、会生成在 store/modules/目录下,名称各单词之间用|隔开,单个单词如home|,多个单词如home|index')
 21 | let componentName = ''
 22 | process.stdin.on('data', async chunk => {
 23 |     // store名称
 24 |     const inputName = String(chunk).trim().toString()
 25 |     // 获取要创建的store名称
 26 |     if (inputName.includes('/')) {
 27 |         const inputArr = inputName.split('/')
 28 |         componentName = inputArr[inputArr.length - 1]
 29 |     } else {
 30 |         componentName = inputName
 31 |     }
 32 |     //判断名字是否包含|,不包含提示错误,重新输入,包含则按大驼峰拼接
 33 |     componentName = resolveComponentName(componentName);
 34 |     if (!componentName) {
 35 |         return;
 36 |     }
 37 |     //store用小驼峰
 38 |     componentName = componentName.substring(0, 1).toLowerCase() + componentName.substring(1);
 39 |     // store跟页面路径
 40 |     const storePath = resolvePath('../src', "store")
 41 |     if (!fs.existsSync(storePath)) {
 42 |         log(`正在生成 store 文件夹`)
 43 |         await dotExistDirectoryCreate(storePath)
 44 |     }
 45 |     // store跟页面路径
 46 |     const componentPath = resolvePath(storePath, "modules")
 47 |     if (!fs.existsSync(componentPath)) {
 48 |         log(`正在生成 modules 文件夹`)
 49 |         await dotExistDirectoryCreate(componentPath)
 50 |     }
 51 |     // store文件
 52 |     const storeFile = resolvePath(componentPath, `${componentName}.js`)
 53 |     
 54 |     // 判断要创建的store文件是否存在
 55 |     const hasComponentExists = fs.existsSync(storeFile)
 56 |     if (hasComponentExists) {
 57 |         errorLog(`${inputName}文件已存在，请重新输入`)
 58 |         return
 59 |     } 
 60 |     try {
 61 |         log(`正在生成 store 文件 ${storeFile}`)
 62 |         await generateFile(storeFile, storeTemplate(componentName))
 63 |         log(`正在注册store文件 ${storeFile}`)
 64 |         await addStore(componentName);
 65 |         successLog('store生成成功')
 66 |     } catch (e) {
 67 |         errorLog(e.message)
 68 |     }
 69 | 
 70 |     process.stdin.emit('end')
 71 | })
 72 | process.stdin.on('end', () => {
 73 |     log('exit')
 74 |     process.exit()
 75 | })
 76 | 
 77 | function addStore(fileName) {
 78 |     const file = resolvePath('../src/store', 'index.js');
 79 |     let storeListItem;
 80 |     return new Promise((resolve,reject)=>{
 81 |         if (fs.existsSync(file)) {
 82 |             fs.readFile(file, 'utf-8', (err, data) => {
 83 |                 if (err) {
 84 |                     errorLog(err.message);
 85 |                     reject(err.message);
 86 |                 } else {
 87 |                     let dataStr = data.toString();
 88 |                     if (!dataStr) {
 89 |                         emptyIndexAdd(file, fileName).then(() => {
 90 |                             resolve();
 91 |                         });;
 92 |                     } else {
 93 |                         addStoreResgiter(dataStr, fileName).then(() => {
 94 |                             resolve();
 95 |                         });;
 96 |                     }
 97 |                 }
 98 |             });
 99 |         } else {
100 |             emptyIndexAdd(file, fileName).then(()=>{
101 |                 resolve();
102 |             });
103 |         }
104 |     })
105 | 
106 |     function addStoreResgiter(dataStr, fileName) {
107 |         return new Promise((resolve,reject)=>{
108 |             //1.根据Vue.use(Vuex)分割,0是import注册部分,1是引入部分
109 |             let storeRegisterList = dataStr.split('Vue.use(Vuex)');
110 |             if (storeRegisterList && storeRegisterList.length==2)
111 |             {
112 |                 let storeRegisterImport = storeRegisterList[0];
113 |                 storeRegisterImport +=storeRegisterImportTemplate(fileName);
114 |                 let storeRegisterUse = storeRegisterList[1];
115 |                 //匹配modules:{},往modules对象中加内容
116 |                 let reg = /(modules\s*:\s*\{)((.|\s)*?)\}/;
117 |                 let storeList = storeRegisterUse.match(reg);
118 |                 if (storeList && storeList.input) {
119 |                     storeListItem = storeList[1] + storeList[2] + (storeList[2].trim()?",":"") + storeRegisterExportTemplate(fileName) + "\n}";
120 |                     dataStr = storeRegisterUse.replace(reg, storeListItem);
121 |                     dataStr = storeRegisterImport + "\nVue.use(Vuex)" + dataStr;
122 |                     console.log(dataStr);
123 |                     writeDataToFile(file, dataStr).then(()=>{
124 |                         resolve();
125 |                     });
126 |                 } else {
127 |                     errorLog("store/index.js页面结构不正确,本次注册store失败!");
128 |                     reject();
129 |                 }
130 |             }else{
131 |                 errorLog("store/index.js页面结构不正确,本次注册store失败!");
132 |                 reject();
133 |             }
134 |         })
135 |        
136 |     }
137 | 
138 |     function emptyIndexAdd(file, fileName) {
139 |         let importStr = `import Vue from 'vue'
140 | import Vuex from 'vuex'
141 | import types from './mutationTypes'
142 | import ${fileName} from './modules/${fileName}'
143 | Vue.use(Vuex)
144 | export default new Vuex.Store({
145 |     types,
146 |     modules: {
147 |         ${fileName}
148 |     }
149 | })`;
150 |         return writeDataToFile(file, importStr);
151 |     }
152 | 
153 |     function writeDataToFile(file, data) {
154 |         return new Promise((resolve,reject)=>{
155 |             fs.writeFile(file, data, function (err) {
156 |                 console.log(err);
157 |                 if (err) {
158 |                     errorLog(err.message);
159 |                     reject(err.message);
160 |                 }
161 |                 successLog('store注册成功!');
162 |                 resolve();
163 |             });
164 |         });
165 |         
166 |     }
167 | }
168 | 


--------------------------------------------------------------------------------
/scripts/generateStore/template.js:
--------------------------------------------------------------------------------
 1 | // template.js
 2 | module.exports = {
 3 |     storeTemplate: compoenntName => {
 4 |         return `const ${compoenntName} = {
 5 |     state: {
 6 |     },
 7 |     getters: {
 8 |     },
 9 |     actions: {
10 |     },
11 |     mutations: {
12 |     }
13 | }
14 | export default {...${compoenntName}}`
15 |     },
16 |     storeRegisterImportTemplate: compoenntName => {
17 |         return `import ${compoenntName} from './modules/${compoenntName}'`;
18 |     },
19 |     storeRegisterExportTemplate: compoenntName => {
20 |         return `${compoenntName}`;
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/scripts/generateView/index.js:
--------------------------------------------------------------------------------
  1 | // index.js
  2 | //导入公用方法
  3 | const {
  4 |     dotExistDirectoryCreate,
  5 |     generateFile,
  6 |     fs,
  7 |     log,
  8 |     resolvePath,
  9 |     successLog,
 10 |     errorLog,
 11 |     resolveComponentName
 12 | } = require('../common.js');
 13 | // 导入模板
 14 | const {
 15 |     viewTemplate,
 16 |     entryTemplate,
 17 |     viewRouterTemplate
 18 | } = require('./template');
 19 | 
 20 | 
 21 | log('请输入要生成的页面名称、会生成在 views/目录下,页面名称各单词之间用|隔开,单个单词如home|,多个单词如home|index')
 22 | let componentName = ''
 23 | process.stdin.on('data', async chunk => {
 24 |     // 组件名称
 25 |     const inputName = String(chunk).trim().toString()
 26 |     // 获取组件名
 27 |     if (inputName.includes('/')) {
 28 |         const inputArr = inputName.split('/')
 29 |         componentName = inputArr[inputArr.length - 1]
 30 |     } else {
 31 |         componentName = inputName
 32 |     }
 33 |     //判断名字是否包含|,不包含提示错误,重新输入,包含则按大驼峰拼接
 34 |     componentName = resolveComponentName(componentName);
 35 |     if (!componentName)
 36 |     {
 37 |         return;
 38 |     }
 39 |     // Vue页面组件路径
 40 |     const componentPath = resolvePath('../src/views', componentName)
 41 |     // vue文件
 42 |     const vueFile = resolvePath(componentPath, `${componentName}.vue`)
 43 |     // 入口文件
 44 |     const entryFile = resolvePath(componentPath, 'index.js')
 45 |     // 判断组件文件夹是否存在
 46 |     const hasComponentExists = fs.existsSync(componentPath)
 47 |     if (hasComponentExists) {
 48 |         errorLog(`${inputName}页面组件已存在，请重新输入`)
 49 |         return
 50 |     } else {
 51 |         log(`正在生成 view 目录 ${componentPath}`)
 52 |         await dotExistDirectoryCreate(componentPath)
 53 |     }
 54 |     try {
 55 |         log(`正在生成 vue 文件 ${vueFile}`)
 56 |         await generateFile(vueFile, viewTemplate(componentName))
 57 |         log(`正在生成 entry 文件 ${entryFile}`)
 58 |         await generateFile(entryFile, entryTemplate(componentName))
 59 |         log(`正在注册路由文件 ${componentName}`)
 60 |         await addRouter(componentName);
 61 |         successLog('页面生成成功')
 62 |     } catch (e) {
 63 |         errorLog(e.message)
 64 |     }
 65 | 
 66 |     process.stdin.emit('end')
 67 | })
 68 | process.stdin.on('end', () => {
 69 |     log('exit')
 70 |     process.exit()
 71 | })
 72 | 
 73 | function addRouter(fileName) {
 74 |     const file = resolvePath('../src/router', 'index.js');
 75 |     let reg = /(routes\s*:\s*\[)((.|\s)*?)\]/;
 76 |     let routerListItem;
 77 |     return new Promise((resolve, reject) => {
 78 |         if (fs.existsSync(file)) {
 79 |                 fs.readFile(file, 'utf-8', (err, data) => {
 80 |                     if (err) {
 81 |                         errorLog(err.message);
 82 |                         reject();
 83 |                     } else {
 84 |                         let dataStr = data.toString();
 85 |                         if (!dataStr) {
 86 |                             emptyIndexAdd(file, fileName).then(()=>{
 87 |                                 resolve();
 88 |                             });
 89 |                         } else {
 90 |                             let routerList = dataStr.match(reg);
 91 |                             if (routerList && routerList.input) {
 92 |                                 routerListItem = routerList[1] + routerList[2] + (routerList[2].trim() ?
 93 |                                     "," : '') + viewRouterTemplate(fileName) + "]";
 94 |                                 dataStr = dataStr.replace(reg, routerListItem);
 95 |                                 writeDataToFile(file, dataStr).then(()=>{
 96 |                                     resolve();
 97 |                                 });
 98 |                                 
 99 |                             } else {
100 |                                 errorLog("router/index.js页面结构不正确,本次注册路由失败!");
101 |                                 reject();
102 |                             }
103 |                         }
104 |                     }
105 |             
106 |             })
107 |         } else {
108 |             emptyIndexAdd(file, fileName).then(()=>{
109 |                 resolve();
110 |             });
111 |         }
112 |     });
113 | 
114 |     function emptyIndexAdd(file, fileName) {
115 |        
116 |         let importStr = `
117 | import Vue from 'vue'
118 | import Router from 'vue-router'
119 | Vue.use(Router)
120 | let router = new Router({
121 |         mode: 'hash',
122 |         routes: [
123 |             {
124 |                 path: '/${fileName}',
125 |                 name: ${fileName},
126 |                 component: () => import("@/views/${fileName}/${fileName}") 
127 |             }
128 |         ]
129 | })
130 | router.beforeEach((to, from, next) => {
131 | next();
132 | })
133 | export default router
134 | `
135 |         return writeDataToFile(file, importStr);
136 |     }
137 | 
138 |     function writeDataToFile(file, data) {
139 |         return new Promise((resolve,reject)=>{
140 |             fs.writeFile(file, data, {
141 |                 'flag': 'w'
142 |             }, function (err) {
143 |                 if (err) {
144 |                     errorLog(err.message);
145 |                     reject(err.message);
146 |                 }
147 |                 successLog('路由注册成功!');
148 |                 resolve();
149 |             });
150 |         })
151 |         
152 |     }
153 | }
154 | 


--------------------------------------------------------------------------------
/scripts/generateView/template.js:
--------------------------------------------------------------------------------
 1 | // template.js
 2 | module.exports = {
 3 |     viewTemplate: compoenntName => {
 4 |         return `<template>
 5 | 	<div class="${compoenntName}">
 6 | 	</div>
 7 | </template>
 8 | <script>
 9 | export default {
10 | 	name: '${compoenntName}'
11 | };
12 | </script>
13 | <style lang="less" scoped>
14 | </style>`
15 |     },
16 |     entryTemplate: compoenntName => {
17 |         return `import ${compoenntName} from './${compoenntName}.vue'
18 |                 export {
19 |                     ${compoenntName}
20 |                 }`
21 |     },
22 |     viewRouterTemplate: compoenntName => `{
23 |         path: '/${compoenntName.toLocaleLowerCase?compoenntName.toLocaleLowerCase():compoenntName}',
24 |         name: '${compoenntName.toLocaleLowerCase?compoenntName.toLocaleLowerCase():compoenntName}',
25 |         component: () => import("@/views/${compoenntName}/${compoenntName}")
26 |     }\n`
27 | }
28 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | export default {
10 |   name: 'app',
11 |   components: {
12 |   }
13 | }
14 | </script>
15 | 
16 | <style>
17 | #app {
18 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
19 |   -webkit-font-smoothing: antialiased;
20 |   -moz-osx-font-smoothing: grayscale;
21 |   text-align: center;
22 |   color: #2c3e50;
23 |   margin-top: 60px;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/src/api/API.js:
--------------------------------------------------------------------------------
  1 | import axios from 'axios'
  2 | import {Message} from 'element-ui'
  3 | let errCode = ['400', '500', '502', '503', '504'];
  4 | axios.defaults.baseURL = '';
  5 | axios.defaults.timeout = 10000
  6 | axios.defaults.headers = {
  7 | }
  8 | 
  9 | // 请求拦截器
 10 | axios.interceptors.request.use(config => {
 11 |     
 12 |     // config.responseType='blob';
 13 |     return config;
 14 | }, err => {
 15 |     return Promise.reject(err);
 16 | });
 17 | 
 18 | 
 19 | // 响应拦截器
 20 | axios.interceptors.response.use(res=>{
 21 |     return res;
 22 | },err=>{
 23 |     let errStatus=err.response.status.toString();
 24 |     let errCodeStr=errCode.join(',');
 25 |     if (errCodeStr.indexOf(errStatus)>=0) {
 26 |         Message({
 27 |             messgae: '亲，当前访问服务的人太多，请稍后重试',
 28 |             type: 'warning'
 29 |         });
 30 |     }
 31 |     else if (errStatus == '403')
 32 |     {
 33 |         Message({
 34 |             messgae: '亲，您当前无权访问页面，请稍后重试',
 35 |             type: 'warning'
 36 |         });
 37 |     }
 38 |     else if (errStatus == '404') {
 39 |         Message({
 40 |             messgae: '亲，您的请求已经丢失，您可以逛逛别的页面',
 41 |             type: 'warning'
 42 |         });
 43 |     }
 44 |     return Promise.reject(err);
 45 | });
 46 | 
 47 | 
 48 | class API {
 49 |     constructor(url) {
 50 |         this.url = url
 51 |     }
 52 | 
 53 |     // 创建axios配置项
 54 |     static _createAxiosConfig({url, action, method = 'get', data, timeout, baseURL,responseType}) {
 55 |         var config = {
 56 |             method: method,
 57 |             url: url + action
 58 |         }
 59 |         if (baseURL) {
 60 |             config.baseURL = baseURL;
 61 |         }
 62 |         if (['post', 'put', 'patch'].includes(config.method)) {
 63 |             config.data = data
 64 |         } else {
 65 |             config.params = data
 66 |         }
 67 |         if (timeout!=undefined) {
 68 |             config.timeout = timeout
 69 |         }
 70 |         if(responseType)
 71 |         {
 72 |             config.responseType=responseType;
 73 |         }
 74 |         return config
 75 |     }
 76 | 
 77 |     // 请求url, data, method = 'get'
 78 |     static request(params, isAuth = true) {
 79 |         if (this instanceof API && !params.url) {
 80 |             params.url = this.url;
 81 |         } else {
 82 |             params.url = ''
 83 |         }
 84 |         return isAuth ? API._probeAuthStatusAndRequest(params) : axios(API._createAxiosConfig(params))
 85 |     }
 86 | 
 87 | 
 88 |     
 89 | 
 90 |     //此处可以加鉴权处理,或者在每次请求之前加的处理逻辑
 91 |     static _probeAuthStatusAndRequest(params) {
 92 |         var promise = new Promise((resolve, reject) => {
 93 |             //这里可以添加权限验证,登录验证等
 94 |             axios(API._createAxiosConfig(params)).then(res => {
 95 |                 return resolve(res)
 96 |             }).catch(err => {
 97 |                 return reject(err)
 98 |             })
 99 |         })
100 |         return promise
101 |     }
102 | }
103 | export default API
104 | 


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
1 | import API from './API'


--------------------------------------------------------------------------------
/src/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/src/assets/.DS_Store


--------------------------------------------------------------------------------
/src/assets/images/lock-icon.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612086727071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5920" width="22" height="22" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M742.4 409.6H716.8V332.8C716.8 205.7728 613.4272 102.4 486.4 102.4S256 205.7728 256 332.8V409.6h-25.6C188.0576 409.6 153.6 444.0576 153.6 486.4v409.6c0 42.3424 34.4576 76.8 76.8 76.8h512c42.3424 0 76.8-34.4576 76.8-76.8v-409.6c0-42.3424-34.4576-76.8-76.8-76.8zM307.2 332.8C307.2 233.984 387.584 153.6 486.4 153.6S665.6 233.984 665.6 332.8V409.6H307.2V332.8z m460.8 563.2a25.6 25.6 0 0 1-25.6 25.6h-512a25.6 25.6 0 0 1-25.6-25.6v-409.6a25.6 25.6 0 0 1 25.6-25.6h512a25.6 25.6 0 0 1 25.6 25.6v409.6z" p-id="5921" fill="#2c2c2c"></path></svg>


--------------------------------------------------------------------------------
/src/assets/images/lock-open-icon.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612086662619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4500" width="22" height="22" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M322.816 453.973333V367.274667c0-54.101333 21.248-103.253333 55.552-138.88A185.216 185.216 0 0 1 512 170.666667a185.173333 185.173333 0 0 1 133.632 57.770666 200.106667 200.106667 0 0 1 55.552 138.88 16.085333 16.085333 0 0 1-15.957333 15.957334 15.573333 15.573333 0 0 1-15.36-15.957334 167.253333 167.253333 0 0 0-46.08-116.138666c-29.013333-29.482667-68.053333-47.957333-111.786667-47.957334a154.837333 154.837333 0 0 0-111.786667 47.957334A167.210667 167.210667 0 0 0 354.133333 367.317333v86.613334h355.925334c15.957333 0 30.165333 6.784 40.789333 17.834666 10.666667 11.093333 17.152 25.813333 17.152 42.410667v279.552c0 15.957333-6.485333 31.36-17.152 42.410667-10.624 10.453333-24.832 17.194667-40.789333 17.194666H313.941333c-15.957333 0-30.762667-6.741333-40.789333-17.194666A60.586667 60.586667 0 0 1 256 793.728v-279.552c0-16.64 6.485333-31.36 17.152-42.410667a56.32 56.32 0 0 1 40.789333-17.834666h8.874667z m387.242667 32.554667H313.941333a25.770667 25.770667 0 0 0-18.944 7.978667 29.098667 29.098667 0 0 0-7.68 19.669333v279.594667c0 7.338667 2.986667 14.122667 7.68 19.072a26.88 26.88 0 0 0 18.944 7.978666h396.117334c7.082667 0 13.653333-3.072 18.944-7.978666a27.434667 27.434667 0 0 0 7.68-19.072V514.133333a29.098667 29.098667 0 0 0-7.68-19.712 27.904 27.904 0 0 0-18.944-7.936z" fill="#2c2c2c" p-id="4501"></path></svg>


--------------------------------------------------------------------------------
/src/assets/images/rotate-icon.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612087413281" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7007" width="22" height="22" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M421.12 590.506667L362.666667 648.533333a329.386667 329.386667 0 0 1 23.466666-409.173333 8.533333 8.533333 0 0 0-9.813333-13.226667 310.186667 310.186667 0 0 0-83.2 492.373334L241.92 768a17.066667 17.066667 0 0 0 11.946667 29.013333h179.2a17.066667 17.066667 0 0 0 17.066666-17.066666v-179.2a17.066667 17.066667 0 0 0-29.013333-10.24zM602.88 433.493333L661.333333 375.466667a329.386667 329.386667 0 0 1-21.333333 409.173333 8.533333 8.533333 0 0 0 9.813333 13.226667 310.186667 310.186667 0 0 0 81.066667-492.373334L782.08 256a17.066667 17.066667 0 0 0-11.946667-29.013333h-179.2a17.066667 17.066667 0 0 0-17.066666 17.066666v179.2a17.066667 17.066667 0 0 0 29.013333 10.24z" p-id="7008" fill="#2c2c2c"></path></svg>


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/styles/base.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body,
  3 | div,
  4 | span,
  5 | applet,
  6 | object,
  7 | iframe,
  8 | h1,
  9 | h2,
 10 | h3,
 11 | h4,
 12 | h5,
 13 | h6,
 14 | p,
 15 | blockquote,
 16 | pre,
 17 | a,
 18 | abbr,
 19 | acronym,
 20 | address,
 21 | big,
 22 | cite,
 23 | code,
 24 | del,
 25 | dfn,
 26 | em,
 27 | img,
 28 | ins,
 29 | kbd,
 30 | q,
 31 | s,
 32 | samp,
 33 | small,
 34 | strike,
 35 | strong,
 36 | sub,
 37 | sup,
 38 | tt,
 39 | var,
 40 | b,
 41 | u,
 42 | i,
 43 | center,
 44 | dl,
 45 | dt,
 46 | dd,
 47 | ol,
 48 | ul,
 49 | li,
 50 | fieldset,
 51 | form,
 52 | label,
 53 | legend,
 54 | table,
 55 | caption,
 56 | tbody,
 57 | tfoot,
 58 | thead,
 59 | tr,
 60 | th,
 61 | td,
 62 | article,
 63 | aside,
 64 | canvas,
 65 | details,
 66 | embed,
 67 | figure,
 68 | figcaption,
 69 | footer,
 70 | header,
 71 | menu,
 72 | nav,
 73 | output,
 74 | ruby,
 75 | section,
 76 | summary,
 77 | time,
 78 | mark,
 79 | audio,
 80 | video,
 81 | input {
 82 |   margin: 0;
 83 |   padding: 0;
 84 |   border: 0;
 85 |   font-size: 100%;
 86 |   font-weight: normal;
 87 |   vertical-align: baseline;
 88 |   box-sizing: border-box;
 89 | }
 90 | 
 91 | /* HTML5 display-role reset for older browsers */
 92 | article,
 93 | aside,
 94 | details,
 95 | figcaption,
 96 | figure,
 97 | footer,
 98 | header,
 99 | menu,
100 | nav,
101 | section {
102 |   display: block;
103 | }
104 | 
105 | body {
106 |   line-height: 1;
107 | }
108 | 
109 | blockquote,
110 | q {
111 |   quotes: none;
112 | }
113 | 
114 | blockquote:before,
115 | blockquote:after,
116 | q:before,
117 | q:after {
118 |   content: none;
119 | }
120 | 
121 | table {
122 |   border-collapse: collapse;
123 |   border-spacing: 0;
124 | }
125 | 
126 | /* custom */
127 | a {
128 |   color: #7e8c8d;
129 |   text-decoration: none;
130 |   -webkit-backface-visibility: hidden;
131 | }
132 | 
133 | li {
134 |   list-style: none;
135 | }
136 | 
137 | ::-webkit-scrollbar {
138 |   width: 5px;
139 |   height: 5px;
140 | }
141 | 
142 | ::-webkit-scrollbar-track-piece {
143 |   background-color: rgba(0, 0, 0, 0.2);
144 |   -webkit-border-radius: 6px;
145 | }
146 | 
147 | ::-webkit-scrollbar-thumb:vertical {
148 |   height: 5px;
149 |   background-color: rgba(125, 125, 125, 0.7);
150 |   -webkit-border-radius: 6px;
151 | }
152 | 
153 | ::-webkit-scrollbar-thumb:horizontal {
154 |   width: 5px;
155 |   background-color: rgba(125, 125, 125, 0.7);
156 |   -webkit-border-radius: 6px;
157 | }
158 | 
159 | html,
160 | body {
161 |   width: 100%;
162 | }
163 | 
164 | body {
165 |   -webkit-text-size-adjust: none;
166 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
167 | }


--------------------------------------------------------------------------------
/src/assets/styles/common.css:
--------------------------------------------------------------------------------
 1 | .normal_btn,.focus_btn{
 2 |     cursor: pointer;
 3 |     box-shadow: 0 6px 10px 0 rgba(66,0,193,0.24);
 4 |     border:1px solid;
 5 |     color: #1817E6;
 6 |     border-color:#5A59FF #4D1EA9;
 7 | }
 8 | .normal_btn:hover{
 9 |     opacity: 0.92;
10 |     background: #EEEDFF;
11 |     box-shadow: 0 4px 7px -2px rgba(66,0,193,0.24);
12 | }
13 | .focus_btn{
14 |     background-image: linear-gradient(-40deg,#5A59FF 0%, #6128CF 100%);
15 |     color: #fff!important;
16 | }
17 | .focus_btn:hover{
18 |     opacity: 0.8;
19 |     box-shadow: 0 6px 10px 0 rgba(66,0,193,0.10);
20 | }
21 | .cl_both:before,
22 | .cl_both:after {
23 |     content: " ";
24 |     display: table;
25 | }
26 | .cl_both:after {
27 |     clear: both;
28 | }
29 | .c_flex{
30 | display: flex;
31 | display: -webkit-flex;
32 | }
33 | .cl_l {
34 | float: left;
35 | }
36 | 
37 | .cl_r {
38 | float: right;
39 | }


--------------------------------------------------------------------------------
/src/components/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/src/components/.DS_Store


--------------------------------------------------------------------------------
/src/components/MicroEdit/AddMaterials.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="addMaterials_container">
  3 |         <div class="add_list_box">
  4 |           <div class="add_list" :class="{'active':add_list_select.id===item.id}" @click="add_list_click(item)" v-for="item in add_list_data" :key="item.icon">
  5 |             <span :class="item.icon"></span>
  6 |             {{item.text}}
  7 |           </div>
  8 |         </div>
  9 | 
 10 |         <j-dialog :width="'840px'" :z-index="1100" :visible.sync="commodity_alert_state">
 11 |             <div slot="title">
 12 |                 <div style="float:left;margin-right:10px;margin-top:-4px;" class="work_banner_pic_icon"></div>
 13 |                 选择商品主图
 14 |             </div>
 15 |             <commodity-alert :maxSelectLength="maxSelectLength" :is-select="false" @commodityAlertClose="commodity_alert_close_fun"></commodity-alert>
 16 |         </j-dialog>
 17 |         <j-dialog :width="'840px'" :z-index="1100" :visible.sync="copy_writing_alert_state">
 18 |             <div slot="title">
 19 |                 <div style="float:left;margin-right:10px;margin-top:-4px;" class="work_copy_writing_icon"></div>
 20 |                 选择文案
 21 |             </div>
 22 |             <copy-writing-alert :is-select="false" @copyWritingDialogClose="copy_writing_alert_fun"></copy-writing-alert>
 23 |         </j-dialog>
 24 |         <j-dialog :width="'840px'" :z-index="1100" :visible.sync="logo_alert_state">
 25 |             <div slot="title">
 26 |                 <div style="float:left;margin-right:10px;margin-top:-1px;" class="work_logo_icon"></div>
 27 |                 选择LOGO
 28 |             </div>
 29 |             <logo-alert :maxSelectLength="maxSelectLength" :is-select="false" @masterAlertClose="logo_alert_close_fun"></logo-alert>
 30 |         </j-dialog>
 31 |         <j-dialog :width="'840px'" :z-index="1100" :visible.sync="background_alert_state">
 32 |             <div slot="title">
 33 |                 <div style="float:left;margin-right:10px;margin-top:-1px;" class="work_background_icon"></div>
 34 |                 选择背景
 35 |             </div>
 36 |             <background-alert :is-select="false" :maxSelectLength="maxSelectLength" @masterAlertClose="background_alert_close_fun"></background-alert>
 37 |         </j-dialog>
 38 |         <j-dialog :width="'840px'" :z-index="1100" :visible.sync="explosion_sticker_alert_state">
 39 |             <div slot="title">
 40 |                 <div style="float:left;margin-right:10px;margin-top:-1px;" class="work_explosion_sticker_icon"></div>
 41 |                 选择爆炸贴
 42 |             </div>
 43 |             <explosion-sticker-alert :maxSelectLength="maxSelectLength" :is-select="false" @masterAlertClose="explosion_sticker_alert_close_fun"></explosion-sticker-alert>
 44 |         </j-dialog>
 45 |         <j-dialog :width="'840px'" :z-index="1100" :visible.sync="mongolian_layer_alert_state">
 46 |             <div slot="title">
 47 |                 <div style="float:left;margin-right:10px;margin-top:-1px;" class="work_mongolian_layer_icon"></div>
 48 |                 选择蒙层
 49 |             </div>
 50 |             <mongolian-layer-alert :defaultSelectLayerType="getMongoLayerType" ref="mongolianLayerAlert" :maxSelectLength="maxSelectLength" :is-select="false" @masterAlertClose="mongolian_layer_alert_close_fun"></mongolian-layer-alert>
 51 |         </j-dialog>
 52 |         <j-dialog :width="'840px'" :z-index="1100" :visible.sync="texture_alert_state">
 53 |             <div slot="title">
 54 |                 <div style="float:left;margin-right:10px;margin-top:-1px;" class="work_texture_icon"></div>
 55 |                 选择纹理
 56 |             </div>
 57 |             <texture-alert :defaultSelectLayerType='getTextureLayerType' ref="textureAlert" :maxSelectLength="maxSelectLength" :is-select="false" @masterAlertClose="texture_alert_close_fun"></texture-alert>
 58 |         </j-dialog>
 59 |     </div>
 60 | </template>
 61 | <script>
 62 |     import {mapGetters} from 'vuex'
 63 |     // import {getCurrentContent,getImageContent} from '@/utils/bannerDataTransform'
 64 |     export default {
 65 |         name:'AddMaterials',
 66 |         props:{
 67 |             /* 图层数组 */
 68 |             micro_layer_data:{
 69 |                 type:Array,
 70 |                 default:[]
 71 |             },
 72 |             /* 新增/替换文案回调 */
 73 |             modifyCopyright:{
 74 |                 type:Function,
 75 |                 default:function(){}
 76 |             },
 77 |             /* 替换图片回调 */
 78 |             canvasUpdate:{
 79 |                 type:Function,
 80 |                 default:function(){}
 81 |             },
 82 |             /* canvas中新增图片 */
 83 |             addImage:{
 84 |                 type:Function,
 85 |                 default:function(){}
 86 |             },
 87 |             /* 新增图片,加到图层数组 */
 88 |             addLayer:{
 89 |                 type:Function,
 90 |                 default:function(){}
 91 |             },
 92 |         },
 93 |         data(){
 94 |             return{
 95 |                 imgType: 1, // 1为新增2为替换图片
 96 |                 maxSelectLength:1,
 97 |                 texture_alert_state: false,
 98 |                 mongolian_layer_alert_state: false,
 99 |                 explosion_sticker_alert_state: false,
100 |                 commodity_alert_state: false,
101 |                 copy_writing_alert_state: false,
102 |                 background_alert_state: false,
103 |                 logo_alert_state: false,
104 |                 add_list_select: {
105 |                     // 左侧栏选中数据
106 |                     id: 1,
107 |                     icon: "work_banner_pic_icon",
108 |                     text: "商品主图"
109 |                 },
110 |                 add_list_data: [
111 |                     {
112 |                     id: 1,
113 |                     icon: "work_banner_pic_icon",
114 |                     text: "商品主图",
115 |                     state: "commodity_alert_state"
116 |                     },
117 |                     {
118 |                     id: 2,
119 |                     icon: "work_copy_writing_icon",
120 |                     text: "文案",
121 |                     state: "copy_writing_alert_state"
122 |                     },
123 |                     // {
124 |                     //   id: 3,
125 |                     //   icon: "work_background_icon",
126 |                     //   text: "背景",
127 |                     //   state: "background_alert_state"
128 |                     // },
129 |                     {
130 |                     id: 4,
131 |                     icon: "work_texture_icon",
132 |                     text: "纹理装饰",
133 |                     state: "texture_alert_state"
134 |                     },
135 |                     {
136 |                     id: 5,
137 |                     icon: "work_explosion_sticker_icon",
138 |                     text: "爆炸贴",
139 |                     state: "explosion_sticker_alert_state"
140 |                     },
141 |                     {
142 |                     id: 6,
143 |                     icon: "work_logo_icon",
144 |                     text: "LOGO",
145 |                     state: "logo_alert_state"
146 |                     },
147 |                     {
148 |                     id: 7,
149 |                     icon: "work_mongolian_layer_icon",
150 |                     text: "蒙层",
151 |                     state: "mongolian_layer_alert_state"
152 |                     }
153 |                 ],
154 |                 layerTypeNums:{},//用于存储各素材已经加到的编号
155 |                 textureLayerType:'',//文理默认选中图层类型
156 |                 mongoLayerType:'',//蒙城默认选中图层类型
157 |             }
158 |         },
159 |         computed:{
160 |             ...mapGetters({
161 |                 pictlayerInfos:'pictlayerInfos'
162 |             }),
163 |             getMongoLayerType(){
164 |                 return this.imgType==1?"":this.mongoLayerType
165 |             },
166 |             getTextureLayerType(){
167 |                 return this.imgType==1?"":this.textureLayerType
168 |             }
169 |         },
170 |         methods:{
171 |              // 关闭纹理 item为选中的数据
172 |             texture_alert_close_fun(item) {
173 |                 console.log(item);
174 |                 this.texture_alert_state = false;
175 |                 if (this.imgType === 1) {
176 |                     this.addImageCommon(item[0],item[0].layerType);
177 |                 } else {
178 |                     this.updateImageCommon(item[0],item[0].layerType);
179 |                 }
180 |             },
181 |             // 关闭蒙层 item为选中的数据
182 |             mongolian_layer_alert_close_fun(item) {
183 |                 console.log(item);
184 |                 this.mongolian_layer_alert_state = false;
185 |                 if (this.imgType === 1) {
186 |                     this.addImageCommon(item[0],item[0].layerType);
187 |                 } else {
188 |                     this.updateImageCommon(item[0],item[0].layerType);
189 |                 }
190 |             },
191 |             // 关闭爆炸贴 item为选中的数据
192 |             explosion_sticker_alert_close_fun(item) {
193 |                 this.explosion_sticker_alert_state = false;
194 |                 if (this.imgType === 1) {
195 |                     this.addImageCommon(item[0],'5-1');
196 |                 } else {
197 |                 this.updateImageCommon(item[0],'5-1');
198 |                 }
199 |                 },
200 |             // 关闭背景 item为选中的数据
201 |             background_alert_close_fun(item) {
202 |                 console.log(item);
203 |                 this.background_alert_state = false;
204 |                 if (this.imgType === 1) {
205 |                     this.addImageCommon(item[0],'1-1');
206 |                 } else {
207 |                 this.updateImageCommon(item[0],'1-1');
208 |                 }
209 |             },
210 |             // 新增/替换logo
211 |             logo_alert_close_fun(item) {
212 |                 this.logo_alert_state = false;
213 |                 if (this.imgType === 1) {
214 |                     this.addImageCommon(item[0],'4-1');
215 |                 } else {
216 |                 this.updateImageCommon(item[0],'4-1');
217 |                 }
218 |             },
219 |             //新增文案,有替换,没有新增
220 |             copy_writing_alert_fun(item) {
221 |                 // 关闭文案item为选中的数据
222 |                 this.copy_writing_alert_state = false;
223 |                 var wa=[];
224 |                 //有主标题
225 |                 if(item.mainTitle)
226 |                 {
227 |                     var obj= this.copyRightCommon('3-1',item);
228 |                     wa.push(obj);
229 |                 }
230 |                 //有副标题
231 |                 if(item.mainTitle)
232 |                 {
233 |                     var obj= this.copyRightCommon('3-2',item);
234 |                     wa.push(obj);
235 |                 }
236 |                 //有行动词
237 |                 if(item.mainTitle)
238 |                 {
239 |                     var obj= this.copyRightCommon('3-3',item);
240 |                     wa.push(obj);
241 |                 }
242 |                 this.modifyCopyright(wa);
243 |             },
244 |             //添加/替换商品图回调
245 |             commodity_alert_close_fun(item) {
246 |                 console.log(item);
247 |                 // 关闭商品主图item为选中的数据
248 |                 this.commodity_alert_state = false;
249 |                 if (this.imgType === 1) {
250 |                 this.addImageCommon(item[0],'2-1');
251 |                 } else {
252 |                     // 替换商品主图的回调
253 |                     this.updateImageCommon(item[0],'2-1');
254 |                 }
255 |             },
256 |             // 左侧栏列表点击事件
257 |             add_list_click(item) {
258 |                 this.add_list_select = Object.assign({}, item);
259 |                 this[item.state] = true;
260 |                 this.imgType=1;
261 |             },
262 |             //替换图片公用方法
263 |             updateImageCommon:function(item,type){
264 |                 var obj={};
265 |                 type=type+"";
266 |                 if(item)
267 |                 {
268 |                     obj.type=type;
269 |                     obj.bboxX1=0;
270 |                     obj.bboxY1=0;
271 |                     obj.swing=1;
272 |                     let content=getImageContent({type:type,mergeObject:item});
273 |                     obj.title=content.title
274 |                     obj.layerPictureUrl=content.PictureUrl
275 |                     obj.PictureName=content.PictureName
276 |                     obj.motherSetNumRef=content.PictureNum
277 |                     obj.id=content.id
278 |                     obj.userId=content.userId
279 |                     obj.pictType=content.type
280 |                     obj.layerIsEdit=1;
281 |                     obj.isGif=0;
282 |                 }
283 |                 var name=this.getTypeToName(obj.type)+(this.micro_layer_data.filter(e => {
284 |                     return e.type == obj.type;
285 |                 }).length + 1);
286 |                 obj.title=name;
287 |                 var updateObj = {
288 |                     cssName: "src",
289 |                     cssValue:obj
290 |                 };
291 |                 console.log(updateObj);
292 |                 this.canvasUpdate(updateObj);
293 |                 // this.textureLayerType='';
294 |                 // this.mongoLayerType=''
295 |             },
296 |             //新增图片类公用方法
297 |             addImageCommon:function(item,type){
298 |                 var obj={};
299 |                 type=type+"";
300 |                 if(item)
301 |                 {
302 |                     obj.type=type;
303 |                     obj.bboxX1=0;
304 |                     obj.bboxY1=0;
305 |                     obj.swing=1;
306 |                     let content=getImageContent({type:type,mergeObject:item});
307 |                     obj.title=content.title
308 |                     obj.layerPictureUrl=content.PictureUrl
309 |                     obj.PictureName=content.PictureName
310 |                     obj.motherSetNumRef=content.PictureNum
311 |                     obj.id=content.id
312 |                     obj.userId=content.userId
313 |                     obj.pictType=content.type
314 |                     obj.layerIsEdit=1;
315 |                     obj.isGif=0;
316 |                 }
317 |                 var name=this.getTypeToName(obj.type)+this.getTypeNum(obj.type);
318 |                 obj.title=name;
319 |                 this.addImage(obj);
320 |                 var obj={visiable:1,type:obj.type,text:obj.title,id:this.micro_layer_data.length+1};
321 |                 this.addLayer(obj);
322 |             },
323 |             //文案新增帮助
324 |             copyRightCommon:function(type,item){
325 |                 var obj={};
326 |                 obj.type=type;
327 |                 obj.bboxX1=0;
328 |                 obj.bboxY1=0;
329 |                 obj.swing=1;
330 |                 obj.top=0;
331 |                 obj.left=0;
332 |                 let content=getCurrentContent({type:type,mergeObject:item});
333 |                 obj.fontType=content.fontFamily
334 |                 obj.color=content.color
335 |                 obj.fontSize=content.fontSize
336 |                 obj.fontBold=content.fontBold
337 |                 obj.fontItalic=content.fontItalic
338 |                 obj.userId=item.userId
339 |                 obj.text=content.title
340 |                 var num=(this.micro_layer_data.filter(e => {
341 |                     return e.type == obj.type;
342 |                 }).length + 1);
343 |                 var name=this.getTypeToName(obj.type)+num;
344 |                 obj.title=name;
345 |                 console.log(item,obj,content);
346 |                 if(num<=1)//没有
347 |                 {
348 |                 var layerItem={visiable:1,type:obj.type,text:obj.title,id:this.micro_layer_data.length+1};
349 |                 this.addLayer(layerItem);
350 |                 }
351 |                 return obj;
352 |             },
353 |             //获取type对应的类型名称
354 |             getTypeToName: function(type) {
355 |                 var name = "";
356 |                if(!this.pictlayerInfos||this.pictlayerInfos.length==0)
357 |                 {
358 |                     return name;
359 |                 }
360 |                 let nameList=this.pictlayerInfos.filter(item=>item.twoLevelLayerType==type);
361 |                 if(nameList&&nameList.length>0)
362 |                 {
363 |                     name=nameList[0].twoLevelLayerDescription
364 |                 }
365 |                 return name;
366 |             },
367 |             //替换图片--弹出对应素材的选择框
368 |             updateImg(realType) {
369 |                 this.imgType=2;
370 |                 switch(realType)
371 |                 {
372 |                     case '1-1':
373 |                         this.background_alert_state = true;
374 |                         break;
375 |                     case '2-1':
376 |                         this.commodity_alert_state = true;
377 |                         break;
378 |                     case '4-1':
379 |                         this.logo_alert_state = true;
380 |                         break;
381 |                     case '5-1':
382 |                         this.explosion_sticker_alert_state = true;
383 |                         break;
384 |                     case '6-1':
385 |                     case '6-2':
386 |                     case '6-3':
387 |                         this.textureLayerType=realType;
388 |                         this.texture_alert_state = true;
389 |                         break;
390 |                     case '7-1':
391 |                     case '7-2':
392 |                     case '7-3':
393 |                     case '7-4':
394 |                     case '7-5':
395 |                     case '7-6':
396 |                         this.mongoLayerType=realType;
397 |                         this.mongolian_layer_alert_state = true;
398 |                         break;
399 |                 }
400 |             },
401 |             //第一次加载,统计各素材已经存在的个数
402 |             initialLayerNums(layerList){
403 |                 this.layerTypeNums={};
404 |                 layerList.forEach(i=>{
405 |                     if(this.layerTypeNums[i.type])
406 |                     {
407 |                         this.layerTypeNums[i.type]++;
408 |                     }
409 |                     else{
410 |                         this.layerTypeNums[i.type]=1;
411 |                     }
412 |                 });
413 |             },
414 |             //获取素材对应已添加的编号
415 |             getTypeNum(type){
416 |                 // type=parseInt(type);
417 |                 let num= this.layerTypeNums[type]!=undefined?this.layerTypeNums[type]:0;
418 |                 num++;
419 |                 this.layerTypeNums[type]=num;
420 |                 return num;
421 |             }
422 |         }
423 |     }
424 | </script>
425 | <style scoped lang='less'>
426 |     .micro_editors_title {
427 |         .big {
428 |             color: #000000;
429 |             margin-right: 20px;
430 |         }
431 |         font-size: 16px;
432 |         margin-bottom: 20px;
433 |     }
434 |     .add_list_box{
435 |         width: 195px;
436 |         text-align: center;
437 |         padding-top:20px;
438 |         padding-bottom: 10px;
439 |         font-size: 16px;
440 |         .add_list:last-child{
441 |             border: none;
442 |         }
443 |     }
444 |     .add_list {
445 |         span {
446 |             vertical-align: middle;
447 |             margin-left: 10px;
448 |             width: 20px;
449 |             height: 18px;
450 |             background-position: left center;
451 |             background-repeat: no-repeat;
452 |             margin-right: 10px;
453 |         }
454 |         cursor: pointer;
455 |         background: #ffffff;
456 |         width: 195px;
457 |         height: 44px;
458 |         line-height: 44px;
459 |         margin: 0 auto;
460 |         margin-bottom: 10px;
461 |         width: 136px;
462 |         border-bottom: 1px solid #F0F0F0;
463 |         text-align: left;
464 |         padding-left: 15px;
465 |         display: flex;
466 |         align-items: center;
467 |         //素材--图标
468 |         // .work_banner_pic_icon{
469 |         //     background: url("../../assets/images/s_goods.png");
470 |         // }
471 |         // .work_texture_icon {
472 |         //     background: url("../../assets/images/s_wenli.png");
473 |         // }
474 |         // .work_mongolian_layer_icon {
475 | 
476 |         //     background: url("../../assets/images/s_mengceng.png");
477 |         // }
478 |         // .work_explosion_sticker_icon {
479 |         //     background: url("../../assets/images/s_baozhatie.png");
480 |         // }
481 |         // .work_logo_icon {
482 |         //     background: url("../../assets/images/s_logo11.png");
483 |         // }
484 |         // .work_copy_writing_icon {
485 |         //     background: url("../../assets/images/s_copywrite.png");
486 |         // }
487 |     }
488 |     .add_list.active {
489 |         color: #458EFE ;
490 |         //素材--图标
491 |         // .work_banner_pic_icon{
492 |         //     background: url("../../assets/images/s_goods_active.png");
493 |         // }
494 |         // .work_texture_icon {
495 |         //     background: url("../../assets/images/s_wenli_active.png");
496 |         // }
497 |         // .work_mongolian_layer_icon {
498 | 
499 |         //     background: url("../../assets/images/s_mengceng_active.png");
500 |         // }
501 |         // .work_explosion_sticker_icon {
502 |         //     background: url("../../assets/images/s_baozhatie_active.png");
503 |         // }
504 |         // .work_logo_icon {
505 |         //     background: url("../../assets/images/s_logo11_active.png");
506 |         // }
507 |         // .work_copy_writing_icon {
508 |         //     background: url("../../assets/images/s_copywrite_active.png");
509 |         // }
510 |     }
511 | 
512 | 
513 | </style>
514 | 
515 | 
516 | 


--------------------------------------------------------------------------------
/src/components/MicroEdit/BannerEdit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div :class="['micro_editors_box',{'clear-paddingtop':!isShowTitle}]">
  3 |         <div class="micro_editors_top_box" v-if="isShowTitle">
  4 |             <div class="micro_editors_top_ctrl">
  5 |                 在线PS
  6 |             </div>
  7 |         </div>
  8 |         <div class="canvasEdit_container">
  9 |             <!--头部浮动操作栏-->
 10 |             <TopOperate
 11 |                 :zoom="zoom"
 12 |                 :unRedoStatus="unRedoStatus"
 13 |                 :initialStatus="initialStatus"
 14 |                 @undoButton="undoButton"
 15 |                 @redoButton="redoButton"
 16 |                 @changeZoom="changeZoom"
 17 |                 @initializeDataMethod="initializeDataMethod"
 18 |                 >
 19 |             </TopOperate>
 20 |             <el-container>
 21 |                 <!--左侧栏-->
 22 |                 <el-aside width="215px" class="left-aside">
 23 |                     <!--图层~~~~~~~~~~~~~~~~~~~~~~-->
 24 |                     <MicroLayer ref="MicroLayer" 
 25 |                         :toggleVisiable="toggleVisiable" 
 26 |                         :setActiveObj="setActiveObject" 
 27 |                         :changeLevel="changeLevel" 
 28 |                         @delItem="delItem" 
 29 |                         :micro_layer_data="micro_layer_data"
 30 |                         :addImage="addImage"
 31 |                         :addLayer="addLayer"
 32 |                         :addTxt="addTxt"
 33 |                         >
 34 |                     </MicroLayer>
 35 |                 </el-aside>
 36 |                 <!--主体内容canvas-->
 37 |                 <el-main>
 38 |                     <div class="main_content" id="main_content">
 39 |                         <div class="canvas_row" id="canvas_row">
 40 |                             <canvas id="canvas" width="1000" height="600">
 41 |                             </canvas>
 42 |                         </div>
 43 |                     </div>
 44 |                 </el-main>
 45 |                 <!--右侧功能栏-->
 46 |                 <el-aside width="260px" class="params_aside">
 47 |                     <!--属性值~~~~~~~~~~~~~~~~~~~~~~-->
 48 |                     <ParametersEdit :selectObj="selectObj" :canvasUpdate="canvasUpdate" :matherSetSize="matherSetSize" ref="ParametersEdit" :copyRightLengthCheck="copyRightLengthCheck" :isCopyRightCheck="isCopyRightCheck"></ParametersEdit>
 49 |                 </el-aside>
 50 |             </el-container>
 51 |         </div>
 52 |         <!--底部浮动操作栏-->
 53 |         <BottomOperate
 54 |             :isPutInShow="isPutInShow"
 55 |             @close="close"
 56 |             @clickDownOrPutOutBtn="clickDowmOrPutOutBtn"
 57 |             >
 58 |         </BottomOperate>
 59 |     </div>
 60 | </template>
 61 | <script>
 62 | import {fabricObject} from "@/components/MicroEdit/fabricOperate.js";
 63 | import { fabricCommon } from "@/components/MicroEdit/bannerEditCommon.js";
 64 | import AddMaterials from '@/components/MicroEdit/AddMaterials.vue'
 65 | import MicroLayer from '@/components/MicroEdit/MicroLayer.vue'
 66 | import ParametersEdit from '@/components/MicroEdit/ParametersEdit.vue'
 67 | import TopOperate from '@/components/MicroEdit/TopOperate'
 68 | import BottomOperate from '@/components/MicroEdit/BottomOperate'
 69 | 
 70 | let canvasDemo={};
 71 | let initialZoom=100;//初始状态的zoom
 72 | export default {
 73 |     name: "BannerEdit",
 74 |     components: {
 75 |         AddMaterials,
 76 |         MicroLayer,
 77 |         ParametersEdit,
 78 |         TopOperate,
 79 |         BottomOperate
 80 |     },
 81 |     props:{
 82 |         //banner图层信息,已经格式化之后的
 83 |         bannerJson:{
 84 |             type:Array,
 85 |             required:true
 86 |         },
 87 |         //文案是否需要检测长度
 88 |         isCopyRightCheck:{
 89 |             type:Boolean,
 90 |             default:false
 91 |         },
 92 |         //是否显示微编辑的title
 93 |         isShowTitle:{
 94 |             type:Boolean,
 95 |             default:true
 96 |         }
 97 |     },
 98 |     data() {
 99 |         return {
100 |             selectObj: {},
101 |             zoom: 100,
102 |             micro_layer_data:[],
103 |             unRedoStatus:{
104 |                 undoStatus:false,
105 |                 redoStatus:false
106 |             },//撤销/回退的可操作状态
107 |             initialStatus:true,//是否是初始状态
108 |             matherSetSize:{width:0,height:0},
109 |             isPutInShow:false,//是否显示投放按钮
110 |         };
111 |     },
112 |     methods: {
113 |         initData:function(){
114 |             let list=JSON.parse(JSON.stringify(this.bannerJson));
115 |              //取背景图尺寸作为母版大小渲染
116 |             let matherSetObj=list.filter(e => {
117 |                 return e.type == "1-1";
118 |             });
119 |             let matherSetSize={width:0,height:0};
120 |             if(matherSetObj&&matherSetObj.length>0)
121 |             {
122 |                 let obj=matherSetObj[0];
123 |                 matherSetSize.width=parseInt(obj.bboxWidth);
124 |                 matherSetSize.height=parseInt(obj.bboxHeight);
125 |             }
126 |             this.matherSetSize=matherSetSize
127 |             // list=this.initDataWithShowText(list);
128 |             let canvas=document.getElementById('canvas');
129 |             canvas.width=this.matherSetSize.width;
130 |             canvas.height=this.matherSetSize.height;
131 |             document.getElementById('canvas_row').style.width=this.matherSetSize.width+'px';
132 |             document.getElementById('canvas_row').style.height=this.matherSetSize.height+'px';
133 | 
134 |             let screenWidth=document.documentElement.clientWidth-475;
135 |             let screenHeight=document.documentElement.clientHeight-65;
136 |             let scaleX=Math.floor(screenWidth/this.matherSetSize.width*10),
137 |                 scaleY=Math.floor(screenHeight/this.matherSetSize.height*10);
138 |             let scale=scaleX>scaleY?scaleY:scaleX;
139 |             scale*=10;
140 |             initialZoom=scale
141 |             this.initZoom(scale);
142 |             let _fabricObject=fabricObject(this);
143 |             canvasDemo = fabricCommon(_fabricObject,this);
144 |             canvasDemo.addObject(list);
145 |             //绑定图层组件数据
146 |             let levelList =this.getLayerList(list);
147 |             this.initLayerList(levelList);
148 |         },
149 |         //第一次加载,用于获取图层组件对应的列表
150 |         getLayerList(list){
151 |             //生成层级显示数组
152 |             let levelList = [];
153 |             for (let i = 0; i < list.length; i++) {
154 |                 let obj = {};
155 |                 obj.visiable = true;
156 |                 obj.text = list[i].title;
157 |                 obj.id = i+1;
158 |                 obj.type = list[i].type;
159 |                 levelList.push(obj);
160 |             }
161 |             return levelList;
162 |         },
163 |         //撤销/回退操作完成回调
164 |         undoSuccess:function(list){
165 |             this.initLayerList(list);
166 |         },
167 |         //设置元素属性值
168 |         canvasUpdate: function(data) {
169 |             canvasDemo.setCss(data);
170 |         },
171 |         //新增图层信息
172 |         addImage:function(obj){
173 |             //转换数据
174 |             canvasDemo.createImage(obj);
175 |         },
176 |         //新增文案信息
177 |         addTxt:function(obj){
178 |             //转换数据
179 |             canvasDemo.createTxt(obj);
180 |         },
181 |         //新增图层信息到左侧图层列表
182 |         addLayer(item){
183 |             this.micro_layer_data.push(item);
184 |         },
185 |         //画布放大缩小
186 |         changeZoom: function(type) {
187 |             if (type == 0) {
188 |                 if(this.zoom>=200)
189 |                 return;
190 |                 //放大
191 |                 this.zoom += 10;
192 |             } else {
193 |                 if(this.zoom<=10)
194 |                 return;
195 |                 //缩小
196 |                 this.zoom -= 10;
197 |             }
198 |             this.initZoom(this.zoom);
199 |             // canvasDemo.setZoom(zoomValue);
200 |         },
201 |         setActiveObject: function(order) {
202 |             canvasDemo.setActiveSelect(order);
203 |         },
204 |         changeLevel: function(moveOrder, movedOrder) {
205 |             canvasDemo.updateLevel( moveOrder, movedOrder);
206 |         },
207 |         toggleVisiable: function(order, value) {
208 |             canvasDemo.toggleVisiable(order, value);
209 |         },
210 |         delItem: function(order) {
211 |             canvasDemo.delItem(order);
212 |         },
213 |         //初始化数据
214 |         initializeDataMethod: function() {
215 |             canvasDemo.initialize();
216 |             this.initZoom(initialZoom);
217 |         },
218 |         setActiveObjectCallback:function(obj){
219 |             this.selectObj={};
220 |             this.selectObj=obj;
221 |             this.$refs.ParametersEdit.setAvtiveObject(obj);
222 |             this.$refs.MicroLayer.setActiveObject(obj.order);
223 |         },
224 |         initZoom:function(zoomValue){
225 |             this.zoom = zoomValue;
226 |             zoomValue/=100;
227 |             let mainContent=document.getElementById('main_content');
228 |             mainContent.style.transform="scale("+zoomValue+","+zoomValue+")";
229 |             var myEvent = new Event('resize');
230 |             window.dispatchEvent(myEvent);
231 |         },
232 |         undoButton:function(){
233 |             canvasDemo.undo();
234 |         },
235 |         redoButton:function(){
236 |             canvasDemo.redo();
237 |         },
238 |         modifyCopyright:function(list){
239 |             canvasDemo.modifyCopyright(list);
240 |         },
241 |         clickDowmOrPutOutBtn(type){
242 |             canvasDemo.downLoadImage();
243 |         },
244 |         //初始化图层
245 |         initLayerList(list){
246 |             this.micro_layer_data=list;
247 |         },
248 |         //取消操作
249 |         close(isConfirm=true){
250 |             this.$emit("close",isConfirm);
251 |         },
252 |         //更新撤销/回退的按钮操作状态
253 |         updateUnRedoStatus(obj){
254 |             this.unRedoStatus=obj;
255 |         },
256 |         //更新是否是初始状态的状态
257 |         updateInitialStatus(status){
258 |             this.initialStatus=status;
259 |         },
260 |         //文案类修改text方法,fabric有用到不能删除
261 |         copyRightLengthCheck({txt,type}){
262 |             if(!this.isCopyRightCheck)
263 |             {
264 |                 let obj={cssName:'text',cssValue:txt};
265 |                 this.canvasUpdate(obj);
266 |                 return txt;
267 |             }
268 |             let copyRightTypeLengthMap = {
269 |                 '3-1': 16,
270 |                 '3-2': 20,
271 |                 '3-3': 10
272 |             };
273 |             let len = copyRightTypeLengthMap[type];
274 |             let cssValue=txt;
275 |             if(txt.length>len/2)
276 |             {
277 |                 let realLen=getStrLength(txt);
278 |                 if(realLen>len)
279 |                 {
280 |                     let copyRightTypeLengthMapMsg= {
281 |                         '3-1': '主标题上限为8个汉字或16个字符',
282 |                         '3-2': '副标题上限为10个汉字或20个字符',
283 |                         '3-3': '行动词上限为5个汉字或10个字符'
284 |                     };
285 |                     let msg = copyRightTypeLengthMapMsg[type];
286 |                     cssValue=this.getCutCopyRight(txt,len);
287 |                     this.$message({
288 |                         message: msg,
289 |                         type: 'warning'
290 |                     });
291 |                 }
292 |             }
293 |             let obj={cssName:'text',cssValue:cssValue};
294 |             this.canvasUpdate(obj);
295 |             return cssValue;
296 |         },
297 |         //文案类修改text方法,截取对应的length的值
298 |         getCutCopyRight(txt,length){
299 |             let strList=txt.split('');
300 |             let result='';
301 |             let reg=/[\u4e00-\u9fa5]/;
302 |             let len=0;
303 |             for(let i=0;i<strList.length;i++)
304 |             {
305 |                 if(reg.test(strList[i])){
306 |                     len+=2;
307 |                 }else{
308 |                     len+=1;
309 |                 }
310 |                 if(len>length){
311 |                     break;
312 |                 }
313 |                 result+=strList[i];
314 |             }
315 |             return result;
316 |         },
317 |     },
318 |     mounted() {
319 |         this.initData();
320 |     }
321 | 
322 | };
323 | </script>
324 | <style lang="less" scoped>
325 |     .canvasEdit_container {
326 |         min-width: 1040px;
327 |         width: 100%;
328 |         text-align: center;
329 |         height:calc(100vh - 65px);
330 |         position: relative;
331 |     }
332 |     .micro_editors_box {
333 |         height: 100%;
334 |     }
335 |     .clear-paddingtop{
336 |         padding-top: 0;
337 |     }
338 |     .micro_editors_top_box {
339 |         position: fixed;
340 |         left: 0;
341 |         top: 0;
342 |         right: 0;
343 |         z-index: 200;
344 |     }
345 |     .micro_editors_top_ctrl {
346 |         height: 60px;
347 |         line-height: 60px;
348 |         font-size: 18px;
349 |         color: #333;
350 |         background: #fff;
351 |         text-align: center;
352 |         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
353 |     }
354 |     canvas{
355 |         margin: 0 auto;
356 |     }
357 |     .canvas_row{
358 |         position: absolute;
359 |         top: 50%;
360 |         left: 50%;
361 |         -webkit-transform: translate(-50%, -50%);
362 |         transform: translate(-50%, -50%);
363 |     }
364 |     .el-main{
365 |         padding: 0;
366 |         position: relative;
367 |         width: 100%;
368 |         background: #F7F8FF;
369 |         text-align: center;
370 |         overflow: auto;
371 |         height: calc(100vh - 65px);
372 |         width: calc(100% - 475px);
373 |     }
374 |     .el-main::-webkit-scrollbar{
375 |         width: 8px;
376 |         height: 8px;
377 |     }
378 |     .main_content{
379 |         width: 100%;
380 |         height: 100%;
381 |         transform:scale(1,1);
382 |         margin: 0 auto;
383 |         display: flex;
384 |         justify-content: center;
385 |         align-items: center;
386 |     }
387 |     .el-aside {
388 |         padding-top: 16px;
389 |         // background: #f9f9f9;
390 |         // box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
391 |         position: relative;
392 |     }
393 |     .params_aside{
394 |         padding: 16px 11px 0 16px;
395 |         box-sizing: border-box;
396 |         box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
397 |         border-radius: 8px;
398 |     }
399 |     .el-container {
400 |         height: 100%;
401 |     }
402 | 
403 |     .add-material{
404 |         position: absolute;
405 |         z-index: 100;
406 |         right: 10px;
407 |         top: 43px;
408 |         background: #fff;
409 |         border-radius: 4px;
410 |         box-shadow: 2px 3px 25px rgba(34,34,199,0.1);
411 |         /*向上*/
412 |         .triangle_border_up{
413 |             width:0;
414 |             height:0;
415 |             border-width:0 24px 7px;
416 |             border-style:solid;
417 |             border-color:transparent transparent #fff;/*透明 透明  灰*/
418 |             margin:40px auto;
419 |             position: absolute;
420 |             top: -46px;
421 |             right: 0;
422 |         }
423 |     }
424 |     .left-aside{
425 |         width: 215px;
426 |         background: #fff;
427 |     }
428 | </style>
429 | 
430 | <style>
431 |     .confirm_btn{
432 |         width: 99px;
433 |         border-radius: 17px;
434 |     }
435 |     /* .confirm_icon{
436 |         background: url(../../assets/images/confirm_icon.png);
437 |         width: 40px;
438 |         height: 40px;
439 |     } */
440 | </style>
441 | 


--------------------------------------------------------------------------------
/src/components/MicroEdit/BottomOperate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!--底部浮动操作栏-->
 3 |     <div class="operator_btn_row">
 4 |         <!-- <div class="operator_btn operator_btn_cancel" @click="close">返回</div> -->
 5 |         <div v-if="isGif" class="operator_btn operator_btn_down" @click="clickDownOrPutOutBtn(3)">保存</div>
 6 |         <div class="operator_btn operator_btn_down" @click="clickDownOrPutOutBtn(2)" :spa-modid="spaModidForDown" :sa-data="spaDataForDown">下载</div>
 7 |         <div class="operator_btn operator_btn_down" v-if="isPutInShow" @click="clickDownOrPutOutBtn(4)" :spa-modid="spaModidForPutOut" :sa-data="spaDataForPutOut">投放</div>
 8 |     </div>
 9 | </template>
10 | <script>
11 | export default {
12 |     name:'BottomOperate',
13 |     props:{
14 |         isPutInShow:{
15 |             type:Boolean,
16 |             default:false
17 |         },
18 |         isGif:{
19 |             type:Boolean,
20 |             default:false
21 |         },
22 |         //下载埋点-id
23 |         spaModidForDown:{
24 |             type:String,
25 |             default:''
26 |         },
27 |         //下载埋点-采集数据
28 |         spaDataForDown:{
29 |             type:String,
30 |             default:''
31 |         },
32 |         //投放埋点-id
33 |         spaModidForPutOut:{
34 |             type:String,
35 |             default:''
36 |         },
37 |         //投放埋点-采集数据
38 |         spaDataForPutOut:{
39 |             type:String,
40 |             default:''
41 |         }
42 |     },
43 |     data(){
44 |         return{
45 |             
46 |         }
47 |     },
48 |     methods:{
49 |         //关闭
50 |         close(){
51 |             this.$emit('close');
52 |         },
53 |         //投放/保存/下载
54 |         clickDownOrPutOutBtn(val){
55 |             this.$emit('clickDownOrPutOutBtn',val);
56 |         }
57 |     }
58 | }
59 | </script>
60 | <style lang="less" scoped>
61 |      .operator_btn_row{
62 |         position: absolute;
63 |         bottom: 60px;
64 |         width: 500px;
65 |         left: 50%;
66 |         transform: translate(-50%,0);
67 |         display: flex;
68 |         justify-content: center;
69 |         align-items: center;
70 |     }    
71 |     .operator_btn{
72 |         width: 80px;
73 |         height: 34px;
74 |         line-height: 34px;
75 |         border-radius: 17px;
76 |         color: #FFFFFF;
77 |         font-size: 14px;
78 |         background: #3786FF;
79 |         cursor: pointer;
80 |         text-align: center;
81 |     }     
82 |     .operator_btn_cancel{
83 |         background: #fff;
84 |         border: 1px solid #3786FF;
85 |         color: #3786FF;
86 |     }   
87 |     .operator_btn_down{
88 |         margin-left: 40px;
89 |     }   
90 | </style>
91 | 
92 | 
93 | 


--------------------------------------------------------------------------------
/src/components/MicroEdit/MicroLayer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <!--图层~~~~~~~~~~~~~~~~~~~~~~-->
  3 |     <div class="micro_layer">
  4 |         <div class="title">
  5 |             图层
  6 |             <div class="add-icon">
  7 |                 <!-- <i class="add-layer"></i> -->
  8 |                 <ul>
  9 |                     <li @click="addPic">添加图层</li>
 10 |                     <li @click="addText">添加文案</li>
 11 |                 </ul>
 12 |             </div>
 13 |         </div>
 14 |         <div class="list_box">
 15 |             <div :class="{'list':true, 'cl_both':true,'layer_active':selectIndex==item.index}" :draggable="item.type=='1-1'?false:true" @dragstart="drag" @drop="drop" @dragover="dragover" v-for="(item,index) in reserveLayerData" :key="index" @click="setAvtive(item.index)" :index="item.index">
 16 |                 <span :class="{'work_micro_i_eye':item.visiable,'work_micro_i_eye_close':!item.visiable,'el-icon-view':true}" @click="toggelLevel"></span>
 17 |                 <div class="text">{{item.text}}</div>
 18 |                 <span v-if="item.type!='1-1'" class="work_micro_i_delete el-icon-delete" @click="delItem"></span>
 19 |             </div>
 20 |         </div>
 21 |     </div>
 22 | </template>
 23 | <script>
 24 |     import {isFireFox} from '@/utils/index.js'
 25 |     export default {
 26 |         name:'MicroLayer',
 27 |         props:{
 28 |             /* 图层数组 */
 29 |             micro_layer_data: {
 30 |                 type: Array,
 31 |                 default: []
 32 |             },
 33 |             /* 显示/隐藏图层 */
 34 |             toggleVisiable:{
 35 |                 type:Function,
 36 |                 default:function(){
 37 | 
 38 |                 }
 39 |             },
 40 |             /* 点击图层,设置canvas中活动元素为对应点击图层元素 */
 41 |             setActiveObj:{
 42 |                 type:Function,
 43 |                 default:function(){
 44 | 
 45 |                 }
 46 |             },
 47 |             /* 改变图层层级 */
 48 |             changeLevel:{
 49 |                 type:Function,
 50 |                 default:function(){
 51 | 
 52 |                 }
 53 |             },
 54 |             /* canvas中新增图片 */
 55 |             addImage:{
 56 |                 type:Function,
 57 |                 default:function(){}
 58 |             },
 59 |             /* canvas中新增文本 */
 60 |             addTxt:{
 61 |                 type:Function,
 62 |                 default:function(){}
 63 |             },
 64 |             /*更新左侧图层信息 */
 65 |             addLayer:{
 66 |                 type:Function,
 67 |                 default:function(){}
 68 |             },
 69 |         },
 70 |         data(){
 71 |             return {
 72 |                 moveIndex: 0, //拖动开始位置index
 73 |                 movedIndex: 0, //拖动放置位置index
 74 |                 selectIndex:-1,//图层选中index
 75 |             }
 76 |         },
 77 |         computed:{
 78 |             reserveLayerData(){
 79 |                 let layerData=[];
 80 |                 for(let i = this.micro_layer_data.length-1;i >= 0; i--)
 81 |                 {
 82 |                     let obj=this.micro_layer_data[i];
 83 |                     obj.index=i;
 84 |                     layerData.push(obj);
 85 |                 }
 86 |                 return layerData;
 87 |             }
 88 |         },
 89 |         methods:{
 90 |             //设置图层显示隐藏
 91 |             toggelLevel: function(ev) {
 92 |                 var idx = parseInt(ev.target.parentNode.getAttribute("index"));
 93 |                 var obj = this.micro_layer_data.splice(idx, 1)[0];
 94 |                 obj.visiable = !obj.visiable;
 95 |                 this.micro_layer_data.splice(idx, 0, obj);
 96 |                 this.toggleVisiable(idx,obj.visiable);
 97 |                 ev.stopPropagation();
 98 |             },
 99 |             //删除图层
100 |             delItem:function(ev){
101 |                 var idx=parseInt(ev.target.parentNode.getAttribute("index"));
102 |                 this.$confirm('您确定要删除改图层么?', '提示', {
103 |                     confirmButtonText: '确定',
104 |                     cancelButtonText: '取消',
105 |                     type: 'warning'
106 |                 }).then(() => {
107 |                     this.micro_layer_data.splice(idx,1);
108 |                     this.$emit('delItem',idx);
109 |                     this.selectIndex=-1;
110 |                 })
111 |             },
112 |             //选中图层--同时同步canvas的活动元素
113 |             setAvtive:function(idx){
114 |                 console.log(this.micro_layer_data,idx);
115 |                 if(this.selectIndex!=idx)
116 |                 {
117 |                     this.selectIndex=idx;
118 |                     this.setActiveObj(idx);
119 |                 }
120 |                 
121 |             },
122 |             drop(ev) {
123 |                 // 拖动放置
124 |                 ev.preventDefault();
125 |                 if(this.movedIndex==0||this.moveIndex==0)
126 |                 {
127 |                     return;
128 |                 }
129 |                 var moveObj = this.micro_layer_data.splice(this.moveIndex, 1);
130 |                 this.micro_layer_data.splice(this.movedIndex, 0, moveObj[0]);
131 |                 this.changeLevel(this.moveIndex, this.movedIndex);
132 |                 this.changeSelectedIndex();
133 |             },
134 |             //更改图层,调整选中元素的index
135 |             changeSelectedIndex(){
136 |                 console.log(this.selectIndex,this.moveIndex,this.movedIndex);
137 |                 if(this.selectIndex==this.moveIndex)
138 |                 {
139 |                     this.selectIndex=this.movedIndex;
140 |                 }
141 |                 else if(this.selectIndex==this.movedIndex)
142 |                 {
143 |                     if(this.movedIndex==this.micro_layer_data.length-1)
144 |                     {
145 |                         this.selectIndex--;
146 |                     }
147 |                     else if(this.movedIndex==1)
148 |                     {
149 |                         this.selectIndex++;
150 |                     }
151 |                     else{
152 |                         this.selectIndex=this.moveIndex;
153 |                     }
154 |                 }
155 |                 else{
156 |                     if((this.selectIndex>this.moveIndex&&this.selectIndex>this.movedIndex)||(this.selectIndex<this.moveIndex&&this.selectIndex<this.movedIndex))
157 |                     {
158 |                         return;
159 |                     }
160 |                     else if(this.moveIndex>this.movedIndex)
161 |                     {
162 |                         if(this.selectIndex<this.micro_layer_data.length-1||this.selectIndex>1)
163 |                         {
164 |                             this.selectIndex++;
165 |                         }
166 |                     }
167 |                     else{
168 |                         if(this.selectIndex>1)
169 |                         {
170 |                             this.selectIndex--;
171 |                         }
172 |                     }
173 |                 }
174 |             },
175 |             dragover(ev) {
176 |                 ev.preventDefault();
177 |                 this.movedIndex = parseInt(ev.currentTarget.getAttribute("index"));
178 |             },
179 |             drag(ev) {
180 |                 console.log(22);
181 |                 if(isFireFox())
182 |                 {
183 |                     ev.dataTransfer.setData("imgInfo", ev.target.id)
184 |                 }
185 |                 let idx=parseInt(ev.currentTarget.getAttribute("index"))
186 |                 this.moveIndex =idx;
187 |             },
188 |             //canvas选中元素,同时更新到图层选中状态
189 |             setActiveObject(order){
190 |                 this.selectIndex=parseInt(order);
191 |             },
192 |             //新增图层
193 |             addPic(){
194 |                 let obj={};
195 |                 let id=this.micro_layer_data.length+1;
196 |                 obj.type='7-1';
197 |                 obj.bboxX1=0;
198 |                 obj.bboxY1=0;
199 |                 obj.swing=1;
200 |                 obj.title='图层'+id;
201 |                 obj.layerPictureUrl='new-pic.png';
202 |                 obj.layerIsEdit=1;
203 |                 obj.isGif=0;
204 |                 this.addImage(obj);
205 |                 var layerItem={visiable:1,type:obj.type,text:obj.title,id:id};
206 |                 this.addLayer(layerItem);
207 |             },
208 |             addText(){
209 |                 let obj={};
210 |                 let id=this.micro_layer_data.length+1;
211 |                 obj.type='3-1';
212 |                 obj.top=0;
213 |                 obj.left=0;
214 |                 obj.bboxX1=0;
215 |                 obj.bboxY1=0;
216 |                 obj.swing=1;
217 |                 obj.title='文案'+id;
218 |                 obj.layerPictureUrl='new-pic.png';
219 |                 obj.fontType=''
220 |                 obj.color='#000'
221 |                 obj.fontSize=20
222 |                 obj.fontBold=0
223 |                 obj.fontItalic=0
224 |                 obj.text='这里是新增文案内容'
225 |                 this.addTxt(obj);
226 |                 var layerItem={visiable:1,type:obj.type,text:obj.title,id:id};
227 |                 this.addLayer(layerItem);
228 |             }
229 |                 
230 |         }
231 |     }
232 | </script>
233 | <style lang="less" scoped>
234 |     .micro_layer {
235 |         padding-left: 10px;
236 |         .title {
237 |             margin-bottom: 20px;
238 |             position: relative;
239 |             font-size: 14px;
240 |             color:#333;
241 |             line-height: 20px;
242 |             text-align: left;
243 |         }
244 |         .list_box {
245 |             background: #ffffff;
246 |             // border: 1px solid #e4e4e4;
247 |             // border-radius: 4px;
248 |             overflow: hidden;
249 |             font-size: 12px;
250 |             width: 193px;
251 |             color: #333;
252 |             border-radius: 4px;
253 |             border: 1px solid #E4E4E4;
254 |             .layer_active{
255 |                 background: rgba(55, 134, 255, 0.1) !important;
256 |             }
257 |         }
258 |         .list {
259 |             height: 33px;
260 |             line-height: 33px;
261 |             padding: 0 7px;
262 |             span {
263 |                 cursor: pointer;
264 |                 float: left;
265 |                 margin: 11px 6px 0 9px;
266 |             }
267 |             .work_micro_i_eye{
268 |                 color: #3785ff;
269 |             }
270 |             .work_micro_i_eye_close{
271 |                 color: #999999;
272 |             }
273 |             .work_micro_i_delete {
274 |                 float: right;
275 |                 color: #555;
276 |             }
277 |             .text {
278 |             cursor: default;
279 |             float: left;
280 |             }
281 |             &:nth-child(even) {
282 |                 background: #ffffff;
283 |             }
284 |             &:nth-child(odd) {
285 |                 background: #f9f9f9;
286 |             }
287 |         }
288 |     }
289 |     .add-icon{
290 |         height:40px;
291 |         text-align: center;
292 |         position: relative;
293 |         float:right;
294 |         li{
295 |             float: left;
296 |             padding-left: 10px;
297 |             cursor: pointer;
298 |             font-size: 12px;
299 |         }
300 |     }
301 |     .add-layer{
302 |         position: absolute;
303 |         top: 0px;
304 |         right: 20px;
305 |         display: block;
306 |         width: 20px;
307 |         height: 20px;
308 |         // background: url(../../assets/images/micro/add-material-icon.png) center;
309 |     }
310 |     
311 |         
312 | </style>
313 | 
314 | 
315 | 


--------------------------------------------------------------------------------
/src/components/MicroEdit/ParametersEdit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="parameter_edit">
  3 |         <div class="micro_editors_title cl_both"><span class="big cl_l">画布尺寸</span><span class="small cl_l">{{matherSetSize.width+'*'+matherSetSize.height}}</span></div>
  4 |         <div class="micro_line clear_bottom"></div>
  5 |         <div class="micro_editors_title cl_both"><span class="big cl_l">图层名称</span><span class="small cl_l">{{selectObj.title}}</span></div>
  6 |         <div class="micro_line"></div>
  7 |         <el-form label-width="75px" label-position="left" size="mini">
  8 |           <el-form-item label="坐标" v-show="selectObj.order!=0" class="line_bottom">
  9 |             <div>
 10 |                 <div class="right_item">
 11 |                     <el-input-number  v-model="selectObj.realLeft" :disabled="selectObj.lockMovementX==true" :precision="0" @change='updateCanvas("left")' controls-position="right"></el-input-number>
 12 |                     X
 13 |                 </div>
 14 |                 <div class="toggle-lock">
 15 |                     <i :class="{'lock-icon el-icon-lock':selectObj.lockMovementX!=true,'unlock-icon el-icon-unlock':selectObj.lockMovementX==true}" @click="toggleLockOrFlip('lockMovementX')"></i>
 16 |                 </div>
 17 |                 <div class="right_item">
 18 |                     <el-input-number  v-model="selectObj.realTop" :precision="0" :disabled="selectObj.lockMovementY==true" @change='updateCanvas("top")' controls-position="right"></el-input-number>
 19 |                     Y
 20 |                 </div>
 21 |                 <div class="toggle-lock">
 22 |                    <i :class="{'lock-icon el-icon-lock':selectObj.lockMovementY!=true,'unlock-icon el-icon-unlock':selectObj.lockMovementY==true}" @click="toggleLockOrFlip('lockMovementY')"></i>
 23 |                 </div>
 24 |             </div>
 25 |     
 26 |           </el-form-item>
 27 |           <!--图片 start~~~~~~~~~~~~~~~~~~-->
 28 |           <el-form-item v-show="selectObj.type=='image'&&selectObj.order!=0" label="尺寸">
 29 |             <div>
 30 |                 <div class="right_item">
 31 |                     <el-input-number  v-model="selectObj.realWidth" controls-position="right" :disabled="selectObj.lockScalingY==true" :min="1" :precision="0" @change='updateCanvas("width")'></el-input-number>
 32 |                     宽
 33 |                 </div>
 34 |                 <div class="toggle-lock">
 35 |                 </div>
 36 |                 <div class="right_item">
 37 |                    <el-input-number  v-model="selectObj.realHeight" controls-position="right" :min="1" :disabled="selectObj.lockScalingY==true" :precision="0" @change='updateCanvas("height")'></el-input-number>
 38 |                     高
 39 |                 </div>
 40 |                 <div class="toggle-lock">
 41 |                    <i :class="{'lock-icon el-icon-lock':selectObj.lockScalingY!=true,'unlock-icon el-icon-unlock':selectObj.lockScalingY==true}" @click="toggleLockOrFlip('lockScalingY')"></i>
 42 |                 </div>
 43 |             </div>
 44 |           </el-form-item>
 45 |           <!--图片 end~~~~~~~~~~~~~~~~~~-->
 46 |           <div class="micro_line" v-show="selectObj.order!=0"></div>
 47 |           <el-form-item label="旋转" v-show="selectObj.order!=0">
 48 |             <el-col :span="9" style="text-align:center">
 49 |               <el-input-number  v-model="selectObj.angle" controls-position="right" :precision="0" @change='updateCanvas("angle")'></el-input-number>
 50 |               角度
 51 |             </el-col>
 52 |           </el-form-item>
 53 |           <div class="micro_line" v-show="selectObj.order!=0"></div>
 54 |             <!-- 翻转 -->
 55 |            <el-form-item label="翻转" v-show="selectObj.type=='image'&&selectObj.order!=0">
 56 |             <el-col :span="11" class="flex-box-normal flip-row">
 57 |                 <i class="flip_horizontal el-icon-d-caret" @click="toggleLockOrFlip('flipX')" title="垂直翻转"></i><i class="flip_vertical el-icon-d-caret" title="水平翻转" @click="toggleLockOrFlip('flipY')"></i>
 58 |             </el-col>
 59 |           </el-form-item>
 60 |           <!-- <div class="micro_line" v-show="selectObj.order!=0"></div> -->
 61 |           <!--图片 start~~~~~~~~~~~~~~~~~~-->
 62 |          <!-- <el-form-item label="图片" v-show="selectObj.type=='image'">
 63 |             <el-button type="primary" class="pic-btn between_btn" @click="updateImgToFather">替换图片</el-button>
 64 |             <el-button @click="resetImg" class="pic-btn">恢复原图</el-button>
 65 |           </el-form-item> -->
 66 |           <!--图片 end~~~~~~~~~~~~~~~~~~-->
 67 |         </el-form>
 68 |         <el-form label-width="75px" label-position="left" size="mini" v-show="selectObj.type!='image'">
 69 |          
 70 |           <!--文字 start~~~~~~~~~~~~~~~~~~~-->
 71 |           <el-form-item label="文字" class="line_bottom">
 72 |               <textarea class="txt_area" rows="3" cols="20" v-model="selectObj.text" :maxLength="maxLen" @input='updateCanvas("text")'></textarea>
 73 |           </el-form-item>
 74 |           <div class="micro_line"></div>
 75 |           <el-form-item label="" class="flex-right">
 76 |             <div class="flex-box-normal flex-box-between">
 77 |                 <el-col :span="14" class="flex-box-normal" style="text-align:center">
 78 |                     <el-button-group>
 79 |                         <!-- 颜色 -->
 80 |                         <el-color-picker style="vertical-align: middle" v-model="selectObj.fill" @change='updateCanvas("fill")'></el-color-picker>
 81 |                         <el-button :type="selectObj.fontWeight == 'bold'?'primary':''" @click='updateCanvas("fontWeight")'>B</el-button>
 82 |                         <el-button :type="selectObj.fontStyle == 'italic'?'primary':''" @click='updateCanvas("fontStyle")'>I</el-button>
 83 |                         <el-button :type="underline?'primary':''" @click='updateCanvas("underline")'>U</el-button>
 84 |                     </el-button-group>
 85 |                 <!-- 字符设置 -->
 86 |                 </el-col>
 87 |                 <el-col :span="10" style="text-align:center">
 88 |                 <el-input-number  v-model="selectObj.fontSize" controls-position="right" @change='updateCanvas("fontSize")'></el-input-number>
 89 |                 <!-- 大小 -->
 90 |                 </el-col>
 91 |             </div>
 92 |           </el-form-item>
 93 |           <!--文字 end~~~~~~~~~~~~~~~~~~~~~~~-->
 94 |           <!-- <div class="micro_line"></div> -->
 95 |         </el-form>
 96 |     </div>
 97 | </template>
 98 | <script>
 99 |     // import {lockWithOutInputSelect } from '@/utils/index.js';
100 |     export default {
101 |         name:'ParametersEdit',
102 |         props:{
103 |             /* 选中元素对象 */
104 |             selectObj:{
105 |                 type:Object,
106 |                 default:{}
107 |             },
108 |             /* 修改元素属性值,回调方法 */
109 |             canvasUpdate:{
110 |                 type:Function,
111 |                 default:function(){}
112 |             },
113 |             /* 替换图片操作 */
114 |             updateImgToFather:{
115 |                 type:Function,
116 |                 default:function(){}
117 |             },
118 |             /* 母版尺寸 */
119 |             matherSetSize:{
120 |                 type:Object,
121 |                 default:{}
122 |             },
123 |             /* 修改文本类text时回调 */
124 |             copyRightLengthCheck:{
125 |                 type:Function,
126 |                 default:function(){}
127 |             },
128 |             //文案是否需要检测长度
129 |             isCopyRightCheck:{
130 |                 type:Boolean,
131 |                 default:false
132 |             }
133 |         },
134 |         data(){
135 |             return{
136 |                 font_data:[],
137 |                 fontFamily: "",
138 |                 underline: false, //下划线
139 |                 fontUrl:'',//选择字体之后对应的url
140 |             }
141 |         },
142 |         computed:{
143 |             maxLen:function(){
144 |                 if(this.isCopyRightCheck&&[3,4,5].indexOf(this.selectObj.realType)>=0){
145 |                     return this.selectObj.realType==3?16:this.selectObj.realType==4?20:10;
146 |                 }
147 |                 return 10000
148 |             }
149 |         },
150 |         methods:{
151 |             //元素属性修改同步事件
152 |             updateCanvas(type) {
153 |                 let num,
154 |                  obj = {};
155 |                 if(type=="text")
156 |                 {
157 |                     num = this.selectObj[type];
158 |                     let newTxt=this.copyRightLengthCheck({txt:num,type:this.selectObj.realType});
159 |                     this.selectObj.text=newTxt;
160 |                     this.selectObj[type]=newTxt;
161 |                     return;
162 |                 }
163 |                 switch (type) {
164 |                     case "fontWeight":
165 |                         num = this.selectObj.fontWeight == "bold" ? "normal" : "bold";
166 |                         obj.cssName = type;
167 |                         obj.cssValue = num;
168 |                         break;
169 |                     case "fontStyle":
170 |                         num = this.selectObj.fontStyle == "italic" ? "normal" : "italic";
171 |                         obj.cssName = type;
172 |                         obj.cssValue = num;
173 |                         break;
174 |                     case "underline":
175 |                         num = !this.selectObj.underline;
176 |                         obj.cssName = type;
177 |                         obj.cssValue = num;
178 |                         this.underline = !this.selectObj.underline;
179 |                         break;
180 |                     case "fontFamily":
181 |                         num = this.fontFamily;
182 |                         obj.cssName = 'realFontFamily';
183 |                         obj.cssValue = num;
184 |                         obj.url=this.fontUrl;
185 |                         break;
186 |                     default:
187 |                         num = this.selectObj[type];
188 |                         obj.cssName = type;
189 |                         obj.cssValue = num;
190 |                         break;
191 |                 }
192 |                 this.canvasUpdate(obj);
193 |             },
194 |             //字体选择事件
195 |             fontChange(fontType){
196 |                 let obj=this.font_data.filter(res=>{
197 |                     return res.fontType==fontType;
198 |                 });
199 |                 if(obj&&obj.length>0)
200 |                 {
201 |                     this.fontUrl=obj[0].fontUrl;
202 |                 }
203 |                 this.updateCanvas("fontFamily");
204 |             },
205 |             //恢复图片
206 |             resetImg: function() {
207 |                 if (this.selectObj && this.selectObj.oldSrc) {
208 |                     var src = this.selectObj.oldSrc;
209 |                     var obj = { cssName: "resetSrc", cssValue: src };
210 |                     this.canvasUpdate(obj);
211 |                 }
212 |             },
213 |             //加载字体文件
214 |             loadFont(list){
215 |                 this.font_data.push(...list);
216 |             },
217 |             //激活元素事件--canvas选中元素,同时同步到本页面展示对应的属性值
218 |             setAvtiveObject: function(obj) {
219 |                 this.underline = obj.underline;
220 |                 this.fontFamily=obj.realFontFamily;
221 |             },
222 |             //锁定/解锁/翻转操作
223 |             toggleLockOrFlip(name){
224 |                 let obj={};
225 |                 obj.cssName=name;
226 |                 obj.cssValue=this.selectObj[name]==true?false:true;
227 |                 console.log(obj);
228 |                 this.canvasUpdate(obj);
229 |             }
230 |         },
231 |         mounted(){
232 |             //禁用非文本框内容的选中状态
233 |             // lockWithOutInputSelect();
234 |         }
235 |     }
236 | </script>
237 | <style scoped lang="less">
238 |     .parameter_edit{
239 |         color: #333;
240 |         font-size: 14px;
241 |     }
242 |     .micro_editors_title {
243 |         .small{
244 |             font-size: 12px;
245 |             color: #000000;
246 |             margin-left: 17px;
247 |         }
248 |         line-height: 66px;
249 |     }
250 |     .micro_line {
251 |         border-top: 1px solid #E4E4E4;
252 |         margin-bottom: 14px;
253 |     }
254 |     /deep/ .el-input-number.is-controls-right .el-input__inner{
255 |         padding-left: 5px;
256 |         padding-right: 25px;
257 |     }
258 |     .toggle-lock{
259 |         line-height: 30px;
260 |         width: 13px;
261 |         height: 30px;
262 |         float: left;
263 |         margin-right: 5px;
264 |     }
265 |     .toggle-lock i{
266 |         font-size: 10px;
267 |         margin-left: 5px;
268 |     }
269 |     .right_item{
270 |         width: 60px;
271 |         float: left;
272 |     }
273 |     /deep/ .el-input-number--mini .el-input-number__decrease,/deep/ .el-input-number--mini .el-input-number__increase{
274 |         width: 20px;
275 |         background: #3786FF;
276 |         color: #fff;
277 |     }
278 |     /deep/ .el-input-number.is-controls-right .el-input-number__increase{
279 |         border-bottom:1px solid #3786FF;
280 |     }
281 |     /deep/ .el-input--mini .el-input__inner{
282 |         height: 24px;
283 |         line-height: 24px;
284 |     }
285 |     /deep/ .el-input-number--mini{
286 |         width: 60px;
287 |     }
288 |     .pic-btn{
289 |         width: 70px;
290 |         padding: 7px 10px;
291 |     }
292 |     /deep/ .el-button+.el-button{
293 |         margin-left: 0;
294 |     }
295 |     .flip{
296 |         margin-right: 13px;
297 |         font-size: 24px;
298 |     }
299 |     /deep/ .el-button--mini, .el-button--mini.is-round{
300 |         padding: 5px 10px;
301 |     }
302 |     .el-button-group{
303 |         width: 100%;
304 |         text-align: center;
305 |         margin: 0 auto;
306 |     }
307 |     /deep/ .el-color-picker--mini .el-color-picker__trigger{
308 |         height: 24px;
309 |         line-height: 24px;
310 |         width: 25px;
311 |     }
312 |     /deep/ .el-color-picker--mini{
313 |         width: 24px;
314 |     }
315 |     .font-select{
316 |         width: 120px;
317 |         margin-right: 6px;
318 |     }
319 |     .flex-right{
320 |         text-align: left;
321 |         line-height: 24px;
322 |     }
323 |     .right_icon{
324 |         width: 8px;
325 |         height: 10px;
326 |     }
327 |     .flex-box-normal{
328 |          display: -webkit-box;
329 |         display: -moz-box;
330 |         display: -webkit-flex; 
331 |         display: -moz-flex; 
332 |         display: -ms-flexbox; 
333 |         display: flex;
334 |         -webkit-align-items: center;
335 |     }
336 |     .flex-box-between{
337 |         -webkit-justify-content: space-between;
338 |         justify-content: space-between;
339 |     }
340 |     .lock-icon{
341 |         width: 8px;
342 |         height: 10px;
343 |         display: inline-block;
344 |         // background: url(../../assets/images/micro/lock-operator.png) no-repeat;
345 |     }
346 |     .unlock-icon{
347 |         width: 8px;
348 |         height: 10px;
349 |         display: inline-block;
350 |         // background: url(../../assets/images/micro/unlock-operator.png) no-repeat;
351 |     }
352 |     .flip_vertical{
353 |         width: 18px;
354 |         height: 18px;
355 |         display: inline-block;
356 |         transform: rotate(90deg);
357 |         font-size: 20px;
358 |         // background: url('../../assets/images/micro/flip-vertical.png') no-repeat;
359 |     }
360 |     .flip_horizontal{
361 |         width: 18px;
362 |         height: 18px;
363 |         display: inline-block;
364 |         font-size: 20px;
365 |         // background: url('../../assets/images/micro/flip-horizontal.png') no-repeat;
366 |         margin-right: 10px;
367 |     }
368 |     .flip-row{
369 |         height: 28px;
370 |         line-height: 28px;
371 |     }
372 |     .font-family-style{
373 |         margin-bottom: 6px;
374 |     }
375 |     .line_bottom{
376 |         margin-bottom: 10px;
377 |     }
378 |     .clear_bottom{
379 |         margin-bottom: 0;
380 |     }
381 |     /deep/ .el-form-item__label{
382 |         font-size: 14px;
383 |         color: #333;
384 |     }
385 |     .between_btn{
386 |         margin-right: 10px;
387 |     }
388 |     
389 |     .txt_area{
390 |         display: block;
391 |         resize: vertical;
392 |         padding: 5px 15px;
393 |         line-height: 1.5;
394 |         box-sizing: border-box;
395 |         width: 100%;
396 |         font-size: inherit;
397 |         color: #606266;
398 |         background-color: #fff;
399 |         background-image: none;
400 |         border: 1px solid #dcdfe6;
401 |         border-radius: 4px;
402 |         transition: border-color .2s cubic-bezier(.645,.045,.355,1);
403 |         word-break: break-all;
404 |     }
405 | </style>
406 | 
407 | 
408 | 


--------------------------------------------------------------------------------
/src/components/MicroEdit/TopOperate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <!--头部浮动操作栏-->
  3 |     <div :class="['micro_editors_top_operate',{'banner':!isGif}]">
  4 |         <div class="micro_editors_top">
  5 |             <div class="ctr_left cl_l">
  6 |                 <div class="pre ctr cl_l" @click="undoButton">
  7 |                     <span :class="{'work_micro_i_1':unRedoStatus.undoStatus,'work_micro_i_1_disabled':!unRedoStatus.undoStatus, 'icon_item el-icon-refresh-left':true}"></span>
  8 |                 </div> 
  9 |                 <div class="next ctr cl_l" @click="redoButton">
 10 |                     <span :class="{'work_micro_i_2':unRedoStatus.redoStatus,'work_micro_i_2_disabled':!unRedoStatus.redoStatus, 'icon_item el-icon-refresh-right':true}"></span>
 11 |                 </div> 
 12 |                 <div class="line ctr cl_l"></div> 
 13 |                 <div class="num_box cl_l">
 14 |                     <span :class="{'work_micro_i_4':zoom<200,'work_micro_i_4_disabled':zoom>=200, 'ctr cl_l zoom_item_icon el-icon-zoom-in':true}" @click="changeZoom(0)"></span> 
 15 |                     <div class="num cl_l zoom_item_content">{{zoom}}%</div> 
 16 |                     <span :class="{'work_micro_i_5_disabled':zoom<=10,'work_micro_i_5':zoom>10, 'ctr cl_l zoom_item_icon el-icon-zoom-out':true}" @click="changeZoom(1)"></span>
 17 |                 </div> 
 18 |                 <div class="line ctr cl_l"></div> 
 19 |                 <div class="init ctr cl_l reload_row" @click="initializeDataMethod">
 20 |                     <span :class="{'work_micro_i_3':!initialStatus,'work_micro_i_3_disabled':initialStatus, 'load_initial icon_item el-icon-refresh':true}"></span>
 21 |                     一键还原
 22 |                 </div>
 23 |             </div> 
 24 |         </div>
 25 |         <!-- <div v-if="isGif" :class="['preview_state',{'preview_state_normal':!isReviewing,'preview_state_playing ':isReviewing}]" @click="clickDownOrPutOutBtn(1)">
 26 |         </div> -->
 27 |     </div>   
 28 | </template>
 29 | <script>
 30 |     export default {
 31 |         name:'TopOperate',
 32 |         props:{
 33 |             //撤销,回退状态
 34 |             unRedoStatus:{
 35 |                 type:Object,
 36 |                 default:()=>{
 37 |                     return{}
 38 |                 }
 39 |             },
 40 |             //是否是预览状态
 41 |             isReviewing:{
 42 |                 type:Boolean,
 43 |                 default:false
 44 |             },
 45 |             //是否是初始状态
 46 |             initialStatus:{
 47 |                 type:Boolean,
 48 |                 default:true
 49 |             },
 50 |             //缩放比例
 51 |             zoom:{
 52 |                 type:Number,
 53 |                 default:100
 54 |             },
 55 |             isGif:{
 56 |                 type:Boolean,
 57 |                 default:false
 58 |             }
 59 |         },
 60 |         data(){
 61 |             return{
 62 |                 
 63 |             }
 64 |         },
 65 |         methods:{
 66 |             //撤销
 67 |             undoButton(){
 68 |                 this.$emit('undoButton');
 69 |             },
 70 |             //回退
 71 |             redoButton(){
 72 |                 this.$emit('redoButton');
 73 |             },
 74 |             //放大/缩小
 75 |             changeZoom(val){
 76 |                 this.$emit('changeZoom',val);
 77 |             },
 78 |             //初始化
 79 |             initializeDataMethod(){
 80 |                 this.$emit('initializeDataMethod');
 81 |             },
 82 |             //预览/关闭
 83 |             clickDownOrPutOutBtn(val){
 84 |                 this.$emit('clickDownOrPutOutBtn',val);
 85 |             }
 86 |         }
 87 |     }
 88 | </script>
 89 | <style scoped lang="less">
 90 |     .micro_editors_top_operate{
 91 |         position: absolute;
 92 |         top: 20px;
 93 |         left: 50%;
 94 |         transform: translate(-50%,0);
 95 |         z-index: 200;
 96 |         width: 396px;
 97 |         line-height: 46px;
 98 |         .micro_editors_top {
 99 |             font-size: 14px;
100 |             height: 46px;
101 |             background: #ffffff;
102 |             width: 335px;
103 |             border: 1px solid #E8E8E8;
104 |             border-radius: 35.5px;
105 |             line-height: 46px;
106 |             float: left;
107 |             .work_micro_i_1{
108 |                 width: 20px;
109 |                 display: inline-block;
110 |                 height: 20px;
111 |                 // background: url(../../assets/images/work_micro_i_1.png);
112 |             }
113 |             .work_micro_i_1_disabled{
114 |                 width: 20px;
115 |                 display: inline-block;
116 |                 height: 20px;
117 |                 // background: url(../../assets/images/work_micro_i_1_disabled.png);
118 |             }
119 |             .work_micro_i_1:hover{
120 |                 width: 20px;
121 |                 display: inline-block;
122 |                 height: 20px;
123 |                 // background: url(../../assets/images/work_micro_i_1_hover.png);
124 |             }
125 |             .work_micro_i_2{
126 |                 width: 20px;
127 |                 display: inline-block;
128 |                 height: 20px;
129 |                 // background: url(../../assets/images/work_micro_i_2.png);
130 |             }
131 |             .work_micro_i_2_disabled{
132 |                 width: 20px;
133 |                 display: inline-block;
134 |                 height: 20px;
135 |                 // background: url(../../assets/images/work_micro_i_2_disabled.png);
136 |             }
137 |             .work_micro_i_2:hover{
138 |                 width: 20px;
139 |                 display: inline-block;
140 |                 height: 20px;
141 |                 // background: url(../../assets/images/work_micro_i_2_hover.png);
142 |             }
143 |             .work_micro_i_3{
144 |                 width: 20px;
145 |                 display: inline-block;
146 |                 height: 20px;
147 |                 // background: url(../../assets/images/work_micro_i_3.png);
148 |             }
149 |             .work_micro_i_3_disabled{
150 |                 width: 20px;
151 |                 display: inline-block;
152 |                 height: 20px;
153 |                 // background: url(../../assets/images/work_micro_i_3_disabled.png);
154 |             }
155 |             .work_micro_i_3:hover{
156 |                 width: 20px;
157 |                 display: inline-block;
158 |                 height: 20px;
159 |                 // background: url(../../assets/images/work_micro_i_3_hover.png);
160 |             }
161 |             .work_micro_i_4{
162 |                 width: 20px;
163 |                 display: inline-block;
164 |                 height: 20px;
165 |                 // background: url(../../assets/images/work_micro_i_4.png);
166 |             }
167 |             .work_micro_i_4_disabled{
168 |                 width: 20px;
169 |                 display: inline-block;
170 |                 height: 20px;
171 |                 // background: url(../../assets/images/work_micro_i_4_disabled.png);
172 |             }
173 |             .work_micro_i_4:hover{
174 |                 width: 20px;
175 |                 display: inline-block;
176 |                 height: 20px;
177 |                 // background: url(../../assets/images/work_micro_i_4_hover.png);
178 |             }
179 |             .work_micro_i_5{
180 |                 width: 20px;
181 |                 display: inline-block;
182 |                 height: 20px;
183 |                 // background: url(../../assets/images/work_micro_i_5.png);
184 |             }
185 |             .work_micro_i_5_disabled{
186 |                 width: 20px;
187 |                 display: inline-block;
188 |                 height: 20px;
189 |                 // background: url(../../assets/images/work_micro_i_5_disabled.png);
190 |             }
191 |             .work_micro_i_5:hover{
192 |                 width: 20px;
193 |                 display: inline-block;
194 |                 height: 20px;
195 |                 // background: url(../../assets/images/work_micro_i_5_hover.png);
196 |             }
197 |             .load_initial{
198 |                 margin-left: 14px;
199 |                 margin-right: 6px;
200 |             }
201 |             .num_box {
202 |                 width: 104px;
203 |                 height: 28px;
204 |                 line-height: 28px;
205 |                 border: 1px solid #8A8A8A;
206 |                 border-radius: 18px;
207 |                 margin: 0 10px;
208 |                 margin-top: 8px;
209 |                 .zoom_item_icon{
210 |                     margin-top: 3px;
211 |                     margin-left: 3px;
212 |                     margin-right: 0;
213 |                     font-size: 20px;
214 |                 }
215 |                 .zoom_item_content{
216 |                     width: 53px;
217 |                     text-align: center;
218 |                 }
219 |             }
220 |             .ctr {
221 |                 cursor: pointer;
222 |             }
223 |             .ctr_left {
224 |                 color: #333333;
225 |                 line-height: 36px;
226 |                 margin-left: 21px;
227 |                 .line {
228 |                 width: 2px;
229 |                 height: 44px;
230 |                 background: #e4e4e4;
231 |                 }
232 |                 & > div:nth-child(2) {
233 |                 margin-right: 4px;
234 |                 }
235 |                 span {
236 |                 float: left;
237 |                 margin-top: 6px;
238 |                 margin-right: 10px;
239 |                 }
240 |                 .icon_item{
241 |                     margin-top: 12px;
242 |                     font-size: 20px;
243 |                 }
244 |                 .reload_row{
245 |                     line-height: 46px;
246 |                 }
247 |             }
248 |         
249 |         }    
250 |         .preview_state{
251 |             width: 46px;
252 |             height: 46px;
253 |             background-color: #FFFFFF;
254 |             border: 1px solid #E8E8E8;
255 |             border-radius: 23px;
256 |             margin-left: 15px;
257 |             float: left;
258 |         } 
259 |         // .preview_state_playing{
260 |         //     background: url(../../assets/images/gif_merge/pause_play_normal.png) center center no-repeat;
261 |         //     background-color: #fff;
262 |         //     &:hover{
263 |         //         background: url(../../assets/images/gif_merge/pause_play_active.png) center center no-repeat;
264 |         //         background-color: #fff;
265 |         //     }
266 |         // }
267 |         // .preview_state_normal{
268 |         //     background: url(../../assets/images/gif_merge/start_play_normal.png) center center no-repeat;
269 |         //     background-color: #fff;
270 |         //     &:hover{
271 |         //         background: url(../../assets/images/gif_merge/start_play_active.png) center center no-repeat;
272 |         //         background-color: #fff;
273 |         //     }
274 |         // }
275 |     }
276 |     .banner{
277 |         width: 335px;
278 |     }
279 | </style>
280 | 
281 | 


--------------------------------------------------------------------------------
/src/components/MicroEdit/bannerEditCommon.js:
--------------------------------------------------------------------------------
  1 | import 'glfx.js__temp'
  2 | //canvas操作相关
  3 | let fabricCommon = function (fabricObject,that) {
  4 |     //tojson包含自定义的属性内容
  5 |     let toJsonWithParams = [
  6 |         "realLeft",
  7 |         "realTop",
  8 |         "realType",
  9 |         "realWidth",
 10 |         "realHeight",
 11 |         "order",
 12 |         "oldSrc",
 13 |         "oldId",
 14 |         "oldPictureName",
 15 |         "oldPictureNum",
 16 |         "oldPictType",
 17 |         "oldUserId",
 18 |         "lockUniScaling",
 19 |         "PictureName",
 20 |         "PictureNum",
 21 |         "id",
 22 |         "pictType",
 23 |         "userId",
 24 |         "aCoords",
 25 |         "oldWidth",//图片本身真实宽度
 26 |         "oldHeight", //图片本身真实高度
 27 |         "title",
 28 |         "oldRealUrl",
 29 |         "realUrl",
 30 |         "bboxWidth",//图片要显示的宽度
 31 |         "bboxHeight", //图片要显示的高度
 32 |         "realFontFamily",//用于存储选中的字体,在字体文件加载完成之后替换到fontFamiy
 33 |         'lockScalingY',
 34 |         'lockScalingX',
 35 |         'lockMovementY',
 36 |         'lockMovementX',
 37 |         'layerIsEdit',
 38 |         'isGif'
 39 |       ];
 40 |     let _fabricInstance = fabricObject;
 41 |     _fabricInstance.setToJsonWithParams(toJsonWithParams);
 42 |     let _canvasObject = _fabricInstance.fabricInstance;
 43 |     
 44 |     //记录偏移量x,y的值
 45 |     let _offsetObj = {offsetX:0,offsetY:0};
 46 | 
 47 |     //文本类型
 48 |     let txtList = ["3-1", "3-2", "3-3"];
 49 |     //数据渲染
 50 |     let addObject = function (bannerMergeDataList) {
 51 |         //判断宽度是否大于1000或者高度是否大于600
 52 |         let objs = bannerMergeDataList.filter(e => {
 53 |             return e.type == "1-1";
 54 |         });
 55 |         if (objs && objs.length > 0) {
 56 |             
 57 |             // if (objs[0].bboxWidth > 1000 || objs[0].bboxHeight > 600) {
 58 |             //     // setZoom(0.5);
 59 |             //     if (that.initZoom)
 60 |             //     {
 61 |             //         that.initZoom(0.5);
 62 |             //     }
 63 |             //     _offsetObj.offsetX = (1000 - objs[0].bboxWidth) / 2;
 64 |             //     _offsetObj.offsetY = (600 - objs[0].bboxHeight) / 2;
 65 |             // } else {
 66 |             //     _offsetObj.offsetX = Math.abs((1000 - objs[0].bboxWidth) / 2);
 67 |             //     _offsetObj.offsetY = Math.abs((600 - objs[0].bboxHeight) / 2);
 68 |             // }
 69 |         }
 70 |         console.log(_offsetObj);
 71 |         let cloneJson = JSON.parse(JSON.stringify(bannerMergeDataList));
 72 |         loadDataToCanvas(cloneJson);
 73 |         _canvasObject.renderAll();
 74 |     };
 75 | 
 76 |     //创建图片,dataList不传则为新增
 77 |     let createImage = function (obj, dataList) {
 78 |         let order=(_canvasObject.getObjects()&&_canvasObject.getObjects().length)||0
 79 |         let item = obj;
 80 |         let url = '/static/'+item.layerPictureUrl;
 81 |         let top, left;
 82 |         if (item.type!="1-1")
 83 |         {
 84 |             left = parseInt(item.bboxX1) + parseInt(item.bboxWidth) / 2 + _offsetObj.offsetX;
 85 |             top = parseInt(item.bboxY1) + parseInt(item.bboxHeight) / 2 + _offsetObj.offsetY;
 86 |         }
 87 |         else{
 88 |             left = parseInt(item.bboxWidth) / 2 + _offsetObj.offsetX;
 89 |             top = parseInt(item.bboxHeight) / 2 + _offsetObj.offsetY;
 90 |         }
 91 |         let imgConfig = {
 92 |             left: left,
 93 |             top: top,
 94 |             order: order,
 95 |             id: item.id,
 96 |             PictureName: item.PictureName,
 97 |             PictureNum: item.motherSetNumRef,
 98 |             userId: item.userId,
 99 |             pictType: item.pictType,
100 |             angle: 0,
101 |             realLeft: parseInt(item.bboxX1),
102 |             realTop: parseInt(item.bboxY1),
103 |             realType: item.type,
104 |             title: item.title,
105 |             realUrl: item.layerPictureUrl,
106 |             bboxWidth: item.bboxWidth,
107 |             bboxHeight: item.bboxHeight,
108 |             lockScalingY:false,
109 |             lockScalingX:false,
110 |             lockMovementY:false,
111 |             lockMovementX:false,
112 |             layerIsEdit:item.layerIsEdit,
113 |             isGif:item.isGif
114 |         }
115 |         _fabricInstance.createImage(url, imgConfig, !item.bboxWidth, item.type!='1-1').then(img=>{
116 |             if(!item.bboxWidth)
117 |             {
118 |                 setActiveSelect(order);
119 |                 canvasObjectSelected();
120 |             }
121 |             if(dataList)
122 |             {
123 |                 loadDataCallback(dataList);
124 |             }
125 |         });
126 |         
127 |     }
128 | 
129 |     //创建文本,dataList不传则为新增/或者替换
130 |     let createTxt = function (item, dataList) {
131 |         let order=(_canvasObject.getObjects()&&_canvasObject.getObjects().length)||0;
132 |         if(that.getFont)
133 |         {
134 |             let result = that.getFont(item.fontType);
135 |             if(!result)
136 |             {
137 |                 item.fontType='FZZCHJW--GB1-0';
138 |             }
139 |         }
140 |         let scale=(!item.fontSize||item.fontSize>=12)?1:item.fontSize/12
141 |         let txtConfig = {
142 |             left: parseInt(item.bboxX1) + parseInt(item.bboxWidth) / 2 + _offsetObj.offsetX, //+parseInt(item.bboxWidth)/2
143 |             top: parseInt(item.bboxY1) + parseInt(item.bboxHeight) / 2 + _offsetObj.offsetY, //+parseInt(item.bboxWidth)/2
144 |             order: order,
145 |             fill: item.color, //content.color
146 |             fontSize: item.fontSize ? item.fontSize:20,
147 |             angle: 0,
148 |             fontFamily: "", //content.fontFamily
149 |             realFontFamily: item.fontType,
150 |             fontWeight: item.fontBold=="1" ? "bold" : "normal",
151 |             fontStyle: item.fontItalic == "0" ? "normal" : "italic",
152 |             userId: item.userId,
153 |             realLeft: parseInt(item.bboxX1),
154 |             realTop: parseInt(item.bboxY1),
155 |             realType: item.type,
156 |             title: item.title,
157 |             realWidth: parseInt(item.bboxWidth),
158 |             realHeight: parseInt(item.bboxHeight),
159 |             // lockScalingY: true,
160 |             // lockScalingX: true,
161 |             lockMovementY: false,
162 |             lockMovementX: false,
163 |             width: parseInt(item.bboxWidth),
164 |             height: parseInt(item.bboxHeight),
165 |             scaleX:scale,
166 |             scaleY:scale,
167 |             layerIsEdit:item.layerIsEdit,
168 |             isGif:item.isGif
169 |         }
170 |         let txtInstabce= _fabricInstance.createItext(item.text, txtConfig, !item.bboxWidth);
171 |         if (item.fontType) {
172 |             _fabricInstance.loadFont(txtInstabce,item.fontType);
173 |         }
174 |         txtInstabce.on("editing:exited", function () {
175 |             let obj = _canvasObject.getActiveObject();
176 |             checkTxt(obj);
177 |         })
178 |         if(!item.bboxWidth)
179 |         {
180 |             setActiveSelect(order);
181 |             canvasObjectSelected();
182 |         }
183 |         if(dataList)
184 |         {
185 |             loadDataCallback(dataList);
186 |         }
187 |     }
188 | 
189 |     //检查编辑的时候文本内容长度是否符合要求
190 |     let checkTxt=function(obj){
191 |         if (obj && obj.text && obj.realType && that.copyRightLengthCheck)
192 |         {
193 |             that.copyRightLengthCheck({txt:obj.text,type: obj.realType});
194 |         }
195 |         
196 |     }
197 | 
198 |     //加载数据到画布的回调函数,适用于loadDataToCanvas方法
199 |     let loadDataCallback = function (list) {
200 |         list.shift();
201 |         loadDataToCanvas(list);
202 |     }
203 | 
204 |     //处理加载过来的数据,递归加载
205 |     let loadDataToCanvas = function (dataList) {
206 |         if (dataList && dataList.length > 0) {
207 |             let obj = dataList[0];
208 |             if (obj.type == "0-1") {
209 |                 loadDataCallback(dataList);
210 |                 return;
211 |             }
212 |             if (txtList.indexOf(obj.type) < 0) {
213 |                 //图片
214 |                 createImage(obj, dataList);
215 |             } else {
216 |                 //文字
217 |                 createTxt(obj, dataList);
218 |             }
219 |         } else {
220 |             _fabricInstance.firstAddToState(true);
221 |             _fabricInstance.updateCanvasState();
222 |         }
223 |     }
224 | 
225 |     //新增/修改文案信息
226 |     let modifyCopyright = function (list) {
227 |         let objectList = _canvasObject.getObjects();
228 |         for (let i = 0; i < list.length; i++) {
229 |             let mainObj = objectList.filter(e => {
230 |                 return e.realType == list[i].type;
231 |             });
232 |             if (mainObj && mainObj.length > 0) { //已有
233 |                  let title = list[i].text;
234 |                  let obj = {
235 |                    cssName: 'text',
236 |                    cssValue: title
237 |                  };
238 |                 updateTxtCss(obj, mainObj[0]);
239 |                 _canvasObject.renderAll();
240 |                 _fabricInstance.updateCanvasState();
241 |             } else {
242 |                 createTxt(list[i]);
243 |             }
244 |         }
245 |     }
246 | 
247 |     let isMouseUp=true;
248 | 
249 |     //是否开启整体移动
250 |     let isOpenAllMove=false;
251 | 
252 |     //用于整体拖动,记录拖动开始位置
253 |     let point={x:0,y:0};
254 | 
255 |     let selectedObj={};
256 |     _canvasObject.on("mouse:down", e => {
257 |         if(isOpenAllMove)
258 |         {
259 |             Object.assign(point,e.absolutePointer);
260 |         }
261 |         isMouseUp=false;
262 |         if (e && e.target && e.target.selectable) {
263 |         //用于鼠标移动到的元素边框显示
264 |         // isMouseUp=false;
265 |         // clearDotted();
266 |             if (selectedObj != e.target)
267 |             {
268 |                 selectedObj = e.target;
269 |             }
270 |             console.log(selectedObj);
271 |         }else if(e&&!e.target){//点击到canvas中无图片渲染区域,重置图层选中状态为未选中
272 |             let currentActive={order:-1}
273 |             that.setActiveObjectCallback(currentActive);
274 |         }
275 |     });
276 |     _canvasObject.on("mouse:move", function (e) {
277 |         if(isOpenAllMove&&!isMouseUp)
278 |         {
279 |             _canvasObject.relativePan({ x:e.absolutePointer.x- point.x, y: e.absolutePointer.y- point.y });
280 |         }
281 |         if (e && e.target && isMouseUp) {
282 |         //用于鼠标移动到的元素边框显示
283 |         // if (lastMoved != e.target)
284 |         // {
285 |         //   drawDottedBorder(e.target.aCoords);
286 |         //   lastMoved = e.target;
287 |         // }
288 |         }
289 |     });
290 |     _canvasObject.on("mouse:up", e => {
291 |         if (e && e.target) {
292 |             canvasObjectSelected();
293 |         }
294 |         //用于鼠标移动到的元素边框显示
295 |         isMouseUp = true;
296 |     });
297 |     _canvasObject.on("object:selected", e => {
298 |         if (e && e.target) {
299 |         }
300 |     });
301 |     _canvasObject.on("object:modified", function (e) {
302 |         if(e&&e.target)
303 |         {
304 |             console.log('modified');
305 |         }
306 |         
307 |     });
308 |     _canvasObject.on("object:scaled", e => {
309 |         //文本类放大完成事件,把缩放率更新到字体大小
310 |         if (e && e.target&&e.target.isType('i-text')) {
311 |             let scale = e.target.scaleX;
312 |             let fontSize = e.target.fontSize ? e.target.fontSize:20;
313 |             fontSize =Math.round(fontSize * scale);
314 |             let obj={
315 |                 cssName:'scaleX',
316 |                 cssValue:1
317 |             }
318 |             updateTxtCss(obj,e.target);
319 |              obj = {
320 |               cssName: 'scaleY',
321 |               cssValue: 1
322 |             }
323 |             updateTxtCss(obj, e.target);
324 |              obj = {
325 |               cssName: 'fontSize',
326 |               cssValue: fontSize
327 |             }
328 |             updateTxtCss(obj, e.target);
329 |         }
330 |     });
331 | 
332 |     //选中元素事件,重置realLeft和realTop
333 |     let canvasObjectSelected = function () {
334 |         let currentActive =_fabricInstance.getActiveObj();
335 |         if (currentActive) {
336 |             let left, top, width, height;
337 |             if (currentActive.type == "image") {
338 |                 //图片
339 |                 width = currentActive.oldWidth * currentActive.scaleX;
340 |                 height = currentActive.oldHeight * currentActive.scaleY;
341 |                 left = currentActive.left - _offsetObj.offsetX - currentActive.width * currentActive.scaleX / 2;
342 |                 top = currentActive.top - _offsetObj.offsetY - currentActive.height * currentActive.scaleY / 2;
343 |                 currentActive.realWidth = width;
344 |                 currentActive.realHeight = height;
345 |             } else {
346 |                 //文本,不需要再去减二分之一的宽高
347 |                 left = currentActive.left - parseInt(currentActive.width) / 2 - _offsetObj.offsetX;
348 |                 top = currentActive.top - parseInt(currentActive.height) / 2 - _offsetObj.offsetY;
349 |             }
350 |             currentActive.realTop = top;
351 |             currentActive.realLeft = left;
352 |             _canvasObject.renderAll();
353 |             that.setActiveObjectCallback(currentActive);
354 |         }
355 |     };
356 | 
357 |     //修改属性值
358 |     let setCss = function (obj) {
359 |         let currentActive = _canvasObject.getActiveObject();
360 |         if (!currentActive) {
361 |             return;
362 |         }
363 |         //是否是背景,是否是编辑修改图片功能
364 |         if (currentActive.realType=='1-1')//背景,只能替换或者恢复图片
365 |         {
366 |             if (obj.cssName != "src" && obj.cssName != "resetSrc")
367 |             {
368 |                 return;
369 |             }
370 |         }
371 |         //图片和文字都有的操作,需要重置位置的
372 |         if (obj.cssName == "left" || obj.cssName == "top") {
373 |             updateLeftOrTop(obj, currentActive);
374 |         } 
375 |         else if (obj.cssName == "src") { //更换图片
376 |             updatePic(obj, currentActive);
377 |             return;
378 |         } 
379 |         else if (obj.cssName == "resetSrc") { //恢复图片
380 |             resetPic(currentActive);
381 |             return;
382 |         } 
383 |         else if (obj.cssName == "width" || obj.cssName == "height") {
384 |            updateWidthOrHeight(obj, currentActive);
385 |         } 
386 |         else {
387 |             if (currentActive.isType("i-text"))//剩下的就是文本类的操作
388 |             {
389 |                 updateTxtCss(obj, currentActive);
390 |             }
391 |             else{
392 |                 currentActive.set(obj.cssName,obj.cssValue).setCoords();
393 |             }
394 |         }
395 |         _canvasObject.renderAll();
396 |         _fabricInstance.updateCanvasState();
397 |     };
398 | 
399 |     //更新文本类属性值
400 |     let updateTxtCss = function (obj, currentActive,isSetSelect=true) {
401 |         //字体类的修改
402 |         if (obj.cssName != "realFontFamily") { //不是修改字体样式
403 |             currentActive.set(obj.cssName, obj.cssValue).setCoords();
404 |             // if (obj.cssName == "fontSize"&&obj.cssValue<12) {//修改字体大小,且字体大小是小于12的
405 |             //     let scale =obj.cssValue/12;
406 |             //     console.log(scale);
407 |             //     currentActive.scale(scale).setCoords();
408 |             // }
409 |             // 解决切换颜色值,字体大小,下划线,加粗等无法重绘文字内容的问题
410 |             let stroke = currentActive.stroke;
411 |             if(stroke !== '#000000'){
412 |                 currentActive.set('stroke','#000000');
413 |             }else{
414 |                 currentActive.set('stroke','#ffffff');
415 |             }
416 |             currentActive.set('stroke',stroke);
417 |             // if (currentActive.fontFamily == "黑体") {
418 |             //     currentActive.set("fontFamily", "微软雅黑").setCoords();
419 |             // } else {
420 |             //     currentActive.set("fontFamily", "黑体").setCoords();
421 |             // }
422 |             // currentActive.set("fontFamily", oldValue).setCoords();
423 |         }else { //修改字体样式
424 |             currentActive.set(obj.cssName, obj.cssValue).setCoords();
425 |             console.log('_fabricInstance.loadFont');
426 |             _fabricInstance.loadFont(currentActive, obj.cssValue);
427 |         }
428 |         if (isSetSelect)
429 |         {
430 |             canvasObjectSelected();
431 |         }
432 |     }
433 | 
434 |     //更换图片
435 |     let updatePic = function (obj, currentActive) {
436 |         let src = currentActive.getSrc();
437 |         //判断是否更换的同一张
438 |         if (src == obj.cssValue) {
439 |             return;
440 |         }
441 |         currentActive.set("oldSrc", src); //跨域转换后的url
442 |         currentActive.set("oldId", currentActive.id);
443 |         currentActive.set("oldPictureName", currentActive.PictureName);
444 |         currentActive.set("oldPictureNum", currentActive.PictureNum);
445 |         currentActive.set("oldPictType", currentActive.pictType);
446 |         currentActive.set("oldUserId", currentActive.userId);
447 |         let content = obj.cssValue;
448 |         currentActive.set({
449 |             id: content.id,
450 |             PictureName: content.PictureName,
451 |             PictureNum: content.motherSetNumRef,
452 |             userId: content.userId,
453 |             pictType: content.type,
454 |             oldRealUrl: currentActive.realUrl, //替换前的真实url
455 |             realUrl: content.layerPictureUrl //替换后的真实url
456 |         });
457 |         let width = currentActive.realWidth;
458 |         let url = './app/bannerMaterialManager/getPicture?pictureUrl=' + content.layerPictureUrl; //跨域转换后的url
459 |         currentActive.setSrc(url, function (e) {
460 |             let scaleX = width / e.width;
461 |             let scaleY = scaleX;
462 |             if(currentActive.realType=='1-1')
463 |             {
464 |                 scaleY=currentActive.realHeight/e.height;
465 |             }
466 |             currentActive.set("scaleX", scaleX).setCoords();
467 |             currentActive.set("scaleY", scaleY).setCoords();
468 |             currentActive.set("oldWidth", parseInt(e.width)).setCoords();
469 |             currentActive.set("oldHeight", parseInt(e.height)).setCoords();
470 |             _canvasObject.renderAll();
471 |             _fabricInstance.updateCanvasState();
472 |             canvasObjectSelected();
473 |         });
474 |         return;
475 |     }
476 | 
477 |     //恢复图片
478 |     let resetPic = function (currentActive) {
479 |         let width = currentActive.realWidth;
480 |         let height = currentActive.realHeight;
481 |         currentActive.set({
482 |           id: currentActive.oldId,
483 |           PictureName: currentActive.oldPictureName,
484 |           PictureNum: currentActive.oldPictureNum,
485 |           userId: currentActive.oldUserId,
486 |           pictType: currentActive.oldPictType,
487 |           realUrl: currentActive.oldRealUrl
488 |         });
489 |         let url = currentActive.oldSrc;
490 |         currentActive.set("oldSrc", "");
491 |         currentActive.set("oldId", "");
492 |         currentActive.set("oldPictureName", "");
493 |         currentActive.set("oldPictureNum", "");
494 |         currentActive.set("oldPictType", "");
495 |         currentActive.set("oldUserId", "");
496 |         currentActive.set("oldRealUrl", "");
497 | 
498 |         currentActive.setSrc(url, function (e) {
499 |             let scaleX = width / e.width;
500 |             let scaleY = scaleX;
501 |             if(currentActive.realType=='1-1')
502 |             {
503 |                 scaleY=currentActive.realHeight/e.height;
504 |             }
505 |             currentActive.set("scaleX", scaleX).setCoords();
506 |             currentActive.set("scaleY", scaleY).setCoords();
507 |             currentActive.set("oldWidth", parseInt(e.width)).setCoords();
508 |             currentActive.set("oldHeight", parseInt(e.height)).setCoords();
509 |             _canvasObject.renderAll();
510 |             _fabricInstance.updateCanvasState();
511 |             canvasObjectSelected();
512 |         });
513 |         return;
514 |     }
515 | 
516 |     //更新left/top的值
517 |     let updateLeftOrTop = function (obj, currentActive) {
518 |         let value;
519 |         if (currentActive.isType("image")) {
520 |             if (obj.cssName == "top")
521 |             {
522 |                 value = currentActive.realTop + currentActive.height * currentActive.scaleY / 2 + _offsetObj.offsetY;
523 |             }
524 |             else if (obj.cssName == 'left')
525 |             {
526 |                 value = currentActive.realLeft + currentActive.width * currentActive.scaleX / 2 + _offsetObj.offsetX;
527 |             }
528 |         } 
529 |         else {
530 |             if (obj.cssName == "top") {
531 |                 value = currentActive.realTop + parseInt(currentActive.height) / 2 + _offsetObj.offsetY;
532 |             } else if (obj.cssName == 'left') {
533 |                 value = currentActive.realLeft + parseInt(currentActive.width) / 2 + _offsetObj.offsetX;
534 |             }
535 |         }
536 |         currentActive.set(obj.cssName, value).setCoords();
537 |     }
538 | 
539 |     //更新width/height的值
540 |     let updateWidthOrHeight = function (obj, currentActive) {
541 |         if (obj.cssName == "width")
542 |         {
543 |             if (currentActive.isType("image")) {
544 |                 let scaleX = currentActive.realWidth / currentActive.oldWidth;
545 |                 let scaleY = scaleX * currentActive.scaleY / currentActive.scaleX;
546 |                 currentActive.set("scaleX", scaleX).setCoords();
547 |                 currentActive.set("scaleY", scaleY).setCoords();
548 |                 canvasObjectSelected();
549 |             }
550 |         }
551 |         else{
552 |             if (currentActive.isType("image")) {
553 |                 let scaleY = currentActive.realHeight / currentActive.oldHeight;
554 |                 let scaleX = scaleY * currentActive.scaleX / currentActive.scaleY;
555 |                 currentActive.set("scaleY", scaleY).setCoords();
556 |                 currentActive.set("scaleX", scaleX).setCoords();
557 |                 canvasObjectSelected();
558 |             }
559 |         }
560 |         //文本类修改
561 |         currentActive.set(obj.cssName, obj.cssValue).setCoords();
562 |     }
563 | 
564 |     //设置选中项
565 |     let setActiveSelect = function (order) {
566 |         _fabricInstance.setActiveSelect(order).then(res=>{
567 |             canvasObjectSelected();
568 |         });
569 |     };
570 | 
571 |     //导出json数据
572 |     let toJSon = function () {
573 |         stopEditing();
574 |         let canvasList = _canvasObject.toJSON(toJsonWithParams).objects;
575 |         let result=[];
576 |         canvasList.forEach(item=>{
577 |             console.log(item);
578 |             let obj={};
579 |             let width = 0;
580 |             let height = 0;
581 |             if(item.realType.indexOf('3-')<0)
582 |             {
583 |                 width = item.oldWidth * item.scaleX;
584 |                 height = item.oldHeight * item.scaleY;
585 |                 obj.layerPictureUrl=item.realUrl
586 |                 obj.motherSetNumRef=item.PictureNum
587 |                 obj.pictType=item.pictType
588 |                 obj.PictureName=item.PictureName
589 |                 obj.id=item.id
590 |                 obj.PictureName=item.PictureName
591 |             }else{
592 |                 width = item.width ? item.width : 0;
593 |                 height = item.height ? item.height : 0;
594 |                 obj.fontType=item.realFontFamily
595 |                 obj.color=item.fill
596 |                 obj.fontBold=item.fontWeight == "bold"?1:0
597 |                 obj.fontItalic=item.fontStyle != "normal"?1:0
598 |                 obj.fontSize=item.fontSize
599 |                 obj.text=item.text
600 |             }
601 |             obj.bboxWidth=width
602 |             obj.bboxHeight=height
603 |             obj.bboxX1=item.realLeft
604 |             obj.bboxX2=item.realLeft+width
605 |             obj.bboxY1=item.realTop
606 |             obj.bboxY2=item.realTop+height
607 |             obj.isGif=item.isGif
608 |             obj.layerIsEdit=item.layerIsEdit
609 |             obj.order=item.order
610 |             obj.type=item.realType
611 |             obj.userId=item.userId
612 |             result.push(obj);
613 |         });
614 |         return result;
615 |     };
616 | 
617 |     //导出图片
618 |     let downLoadImage=function(){
619 |         let imgURL = _fabricInstance.getImgBase64Url();
620 |         dowmLoadFunc(imgURL);
621 |         // glfxImg(imgURL).then(url=>{
622 |         //     dowmLoadFunc(url);
623 |         // });
624 |     }
625 | 
626 |     //使用glfx.js给图片加亮度
627 |     const glfxImg = img=>{
628 |         return new Promise((resolve,reject)=>{
629 |             let imgInstance=document.createElement('img');
630 |             imgInstance.src=img;
631 |             imgInstance.onload=()=>{
632 |                 let url='';
633 |                 try {
634 |                     var canvas = fx.canvas();
635 |                 } catch (e) {
636 |                     alert(e);
637 |                     reject();
638 |                 }
639 |                 var texture = canvas.texture(imgInstance);
640 |                 canvas.draw(texture).unsharpMask(1, 1.5).update();
641 |                 url= canvas.toDataURL('image/png');
642 |                 console.log(url);
643 |                 resolve(url);
644 |             }   
645 |         })
646 |     }
647 | 
648 |     //下载通用方法,模拟a标签
649 |     const dowmLoadFunc=(url,MIME_TYPE='image/png')=>{
650 |         //创建一个a链接，模拟点击下载
651 |         let dlLink = document.createElement('a');
652 |         let filename = '合成图_' + (new Date()).getTime() + '.png';
653 |         dlLink.download = filename;
654 |         dlLink.href = url;
655 |         dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
656 |         document.body.appendChild(dlLink);
657 |         dlLink.click();
658 |         document.body.removeChild(dlLink);
659 |     }
660 | 
661 |     //画布缩放
662 |     let setZoom=function(value){
663 |         _fabricInstance.setZoom(value);
664 |     }
665 | 
666 |     //退出编辑模式
667 |     let stopEditing =function(){
668 |         if (selectedObj && selectedObj.isType && selectedObj.isType("i-text"))
669 |         {
670 |             if (selectedObj.exitEditing)
671 |             {
672 |                 console.log('stopEditing');
673 |                 selectedObj.exitEditing();
674 |             }
675 |         }
676 |     }
677 | 
678 |     return {
679 |         addObject: addObject,
680 |         toJSon: toJSon,
681 |         setActiveSelect: setActiveSelect,
682 |         setCss: setCss,
683 |         setZoom: setZoom,
684 |         createImage: createImage,
685 |         createTxt: createTxt,
686 |         modifyCopyright: modifyCopyright,
687 |         downLoadImage: downLoadImage,
688 |         undo: _fabricInstance.undo,
689 |         redo: _fabricInstance.redo,
690 |         initialize: _fabricInstance.initialize,
691 |         toggleVisiable: _fabricInstance.toggleVisiable,
692 |         updateLevel: _fabricInstance.updateLevel,
693 |         delItem: _fabricInstance.delItem,
694 |         flipActiveObj: _fabricInstance.flipActiveObj,
695 |         stopEditing: stopEditing
696 |     };
697 | };
698 | export {
699 |     fabricCommon
700 | }
701 | 


--------------------------------------------------------------------------------
/src/components/MicroEdit/fabricOperate.js:
--------------------------------------------------------------------------------
  1 | import FontFaceObserver from "fontfaceobserver";
  2 | import initAligningGuidelines from "./guideLines.js";
  3 | import "fabric";
  4 | import rotateIcon from "@/assets/images/rotate-icon.svg";
  5 | import lockIcon from "@/assets/images/lock-icon.svg";
  6 | import lockOpenIcon from "@/assets/images/lock-open-icon.svg";
  7 | const rotateImg = new Image();
  8 | rotateImg.src = rotateIcon;
  9 | const lockImage = new Image();
 10 | lockImage.src = lockIcon;
 11 | const lockOpenImage = new Image();
 12 | lockOpenImage.src = lockOpenIcon;
 13 | const fabric = window.fabric;
 14 | let fabricObject = function(that, id = "canvas") {
 15 |   /* 默认fabric配置 */
 16 |   let _fabricConfig = {
 17 |     backgroundColor: "#F7F8FF",
 18 |     preserveObjectStacking: true,
 19 |     selection: false, //取消框选
 20 |   };
 21 |   // 设置复制itext文本不带格式
 22 |   fabric.disableStyleCopyPaste = true;
 23 | 
 24 |   fabric.Object.prototype.set({
 25 |     borderColor: "rgba(0,0,0,0.8)",
 26 |     cornerColor: "rgba(0,0,0,0.8)", //激活状态角落图标的填充颜色
 27 |     cornerStrokeColor: "rgba(0,0,0,0.8)", //激活状态角落图标的边框颜色
 28 |     borderOpacityWhenMoving: 1,
 29 |     borderScaleFactor: 1,
 30 |     cornerSize: 8,
 31 |     cornerStyle: "circle", //rect,circle
 32 |     centeredScaling: false, //角落放大缩小是否是以图形中心为放大原点
 33 |     centeredRotation: true, //旋转按钮旋转是否是左上角为圆心旋转
 34 |     transparentCorners: false, //激活状态角落的图标是否透明
 35 |     rotatingPointOffset: 20, //旋转距旋转体的距离
 36 |     originX: "center",
 37 |     originY: "center",
 38 |     lockUniScaling: false, //只显示四角的操作
 39 |     hasRotatingPoint: true, //是否显示旋转按钮
 40 |     showLock: true, // 控制是否显示lock
 41 |   });
 42 | 
 43 |   // 不显示m
 44 |   const notShowControls = ["ml", "mr", "mb", "mt"];
 45 |   notShowControls.forEach((control) => {
 46 |     fabric.Object.prototype.controls[control].visible = false;
 47 |   });
 48 | 
 49 |   // 重写mtr 的render函数
 50 |   fabric.Object.prototype.controls.mtr.render = function(
 51 |     ctx,
 52 |     left,
 53 |     top,
 54 |     styleOverride,
 55 |     fabricObject
 56 |   ) {
 57 |     styleOverride = styleOverride || {};
 58 |     const transparentCorners =
 59 |       typeof styleOverride.transparentCorners !== "undefined"
 60 |         ? styleOverride.transparentCorners
 61 |         : fabricObject.transparentCorners;
 62 |     const stroke =
 63 |       !transparentCorners &&
 64 |       (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);
 65 |     ctx.save();
 66 |     ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;
 67 |     ctx.strokeStyle =
 68 |       styleOverride.strokeCornerColor || fabricObject.strokeCornerColor;
 69 |     ctx.lineWidth = 1;
 70 |     ctx.translate(left, top);
 71 |     ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
 72 |     if (stroke) {
 73 |       ctx.drawImage(rotateImg, -10, -12, 22, 22);
 74 |     }
 75 |     ctx.restore();
 76 |   };
 77 | 
 78 |   const lockIcon = {
 79 |     width: 22,
 80 |     height: 22,
 81 |   };
 82 |   // 扩展 增加lock操作图标 可以在controls中增加自定义control
 83 |   fabric.Object.prototype.controls.lock = new fabric.Control({
 84 |     visible: true,
 85 |     x: -0.5,
 86 |     y: -0.5,
 87 |     offsetX: +lockIcon.width + 5,
 88 |     offsetY: +lockIcon.height + 5,
 89 |     sizeX: lockIcon.width,
 90 |     sizeY: lockIcon.height,
 91 |     actionName: "lockgroup",
 92 |     mouseDownHandler: function(eventData, transformData, x, y) {
 93 |       const current = transformData.target;
 94 |       const lockStatus = current.get("lockStatus");
 95 |       if (lockStatus === 1) {
 96 |         current.set("lockStatus", 0);
 97 |       } else {
 98 |         current.set("lockStatus", 1);
 99 |       }
100 |     },
101 |     cursorStyle: "pointer",
102 |     render: function(ctx, left, top, styleOverride, fabricObject) {
103 |       if (!fabricObject.showLock) {
104 |         return;
105 |       }
106 |       styleOverride = styleOverride || {};
107 |       const transparentCorners =
108 |         typeof styleOverride.transparentCorners !== "undefined"
109 |           ? styleOverride.transparentCorners
110 |           : fabricObject.transparentCorners;
111 |       const stroke =
112 |         !transparentCorners &&
113 |         (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);
114 |       ctx.save();
115 |       ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;
116 |       ctx.strokeStyle =
117 |         styleOverride.strokeCornerColor || fabricObject.strokeCornerColor;
118 |       ctx.lineWidth = 1;
119 |       ctx.translate(left, top);
120 |       ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
121 |       if (stroke) {
122 |         ctx.drawImage(
123 |           fabricObject.lockStatus === 1 ? lockOpenImage : lockImage,
124 |           -lockIcon.width / 2,
125 |           -lockIcon.height / 2,
126 |           lockIcon.width,
127 |           lockIcon.height
128 |         );
129 |       }
130 |       ctx.restore();
131 |     },
132 |   });
133 | 
134 |   //重绘旋转按钮
135 | 
136 |   //是否是初始状态
137 |   let isInitialStatus = true;
138 | 
139 |   /* fabric对象 */
140 |   let _fabricObj = new fabric.Canvas(id, _fabricConfig);
141 |   //添加辅助线
142 |   initAligningGuidelines(_fabricObj);
143 | 
144 |   //对fabric.Canvas扩展
145 |   fabric.Canvas.prototype.setZoomByCenter = function(value) {
146 |     this.zoomToPoint(
147 |       new fabric.Point(_fabricObj.width / 2, _fabricObj.height / 2),
148 |       value
149 |     );
150 |     return this;
151 |   };
152 | 
153 |   //最后一次鼠标滑到的对象--用于鼠标移动到的元素边框显示--用于鼠标移动到元素展示虚线
154 |   let lastMoved = {};
155 | 
156 |   /* 导出json时需要导出的自定义字段 */
157 |   let _toJsonWithParams = [];
158 | 
159 |   /* 初始化 */
160 |   const _initConfig = function(config = {}) {
161 |     Object.assign(_fabricConfig, config);
162 |     fabricObj.setOptions(_fabricConfig);
163 |   };
164 | 
165 |   /* 创建图片 */
166 |   const _createImage = function(
167 |     url,
168 |     imgConfig,
169 |     centerObject = false,
170 |     hasControls = true
171 |   ) {
172 |     return new Promise((resolve, reject) => {
173 |       try {
174 |         let imgInstance = new fabric.Image.fromURL(url, function(img) {
175 |           img.set(imgConfig);
176 |           img
177 |             .set({
178 |               scaleX: imgConfig.bboxWidth
179 |                 ? parseInt(imgConfig.bboxWidth) / img.width
180 |                 : 1,
181 |               scaleY: imgConfig.bboxHeight
182 |                 ? parseInt(imgConfig.bboxHeight) / img.height
183 |                 : 1,
184 |               realWidth: imgConfig.bboxWidth
185 |                 ? parseInt(imgConfig.bboxWidth)
186 |                 : parseInt(img.width),
187 |               realHeight: imgConfig.bboxHeight
188 |                 ? parseInt(imgConfig.bboxHeight)
189 |                 : parseInt(img.height),
190 |               oldWidth: parseInt(img.width),
191 |               oldHeight: parseInt(img.height),
192 |             })
193 |             .setCoords();
194 |           if (!hasControls) {
195 |             img.hasControls = hasControls;
196 |             img.set("lockRotation", true);
197 |             img.set("lockScalingX", true);
198 |             img.set("lockScalingY", true);
199 |             img.set("lockMovementX", true);
200 |             img.set("lockMovementY", true);
201 |           }
202 |           if (centerObject) {
203 |             _fabricObj.centerObject(img);
204 |           }
205 |           resolve(img);
206 |           _fabricObj.add(img);
207 |           _fabricObj.renderAll();
208 |         });
209 |       } catch (e) {
210 |         reject();
211 |       }
212 |     });
213 |   };
214 | 
215 |   /* 创建文本 */
216 |   const _createItext = function(title, txtConfig, centerObject = false) {
217 |     let textInstance = new fabric.IText(title, txtConfig);
218 |     if (centerObject) {
219 |       _fabricObj.centerObject(textInstance);
220 |     }
221 |     _fabricObj.add(textInstance);
222 |     _fabricObj.renderAll();
223 |     return textInstance;
224 |   };
225 | 
226 |   /* 画虚线框相关开始 */
227 |   //画虚线的列表--用于鼠标移动到的元素边框显示
228 |   let _dottedLineList = [];
229 |   //画曲线--用于鼠标移动到的元素边框显示
230 |   let _drawDottedLine = function(fromX, fromY, toX, toY) {
231 |     let canvasObject = new fabric.Line([fromX, fromY, toX, toY], {
232 |       strokeDashArray: [3, 1],
233 |       stroke: "red",
234 |       strokeWidth: 1,
235 |     });
236 |     _dottedLineList.push(canvasObject);
237 |     _fabricObj.add(canvasObject);
238 |     _fabricObj.renderAll();
239 |   };
240 | 
241 |   //画一个对象的虚线边框--用于鼠标移动到的元素边框显示
242 |   let _drawDottedBorder = function(aCoords) {
243 |     _clearDotted();
244 |     let fx = aCoords.tl.x;
245 |     let fy = aCoords.tl.y;
246 |     let tx = aCoords.tr.x;
247 |     let ty = aCoords.tr.y;
248 |     _drawDottedLine(fx, fy, tx, ty);
249 |     fx = aCoords.tr.x;
250 |     fy = aCoords.tr.y;
251 |     tx = aCoords.br.x;
252 |     ty = aCoords.br.y;
253 |     _drawDottedLine(fx, fy, tx, ty);
254 |     fx = aCoords.br.x;
255 |     fy = aCoords.br.y;
256 |     tx = aCoords.bl.x;
257 |     ty = aCoords.bl.y;
258 |     _drawDottedLine(fx, fy, tx, ty);
259 |     fx = aCoords.bl.x;
260 |     fy = aCoords.bl.y;
261 |     tx = aCoords.tl.x;
262 |     ty = aCoords.tl.y;
263 |     _drawDottedLine(fx, fy, tx, ty);
264 |   };
265 | 
266 |   //清除虚线框--用于鼠标移动到的元素边框显示
267 |   let _clearDotted = function() {
268 |     for (let i = 0; i < _dottedLineList.length; i++) {
269 |       _fabricObj.remove(_dottedLineList[i]);
270 |     }
271 |     _dottedLineList = [];
272 |   };
273 |   /* 画虚线框相关结束 */
274 | 
275 |   /* 鼠标事件监听相关--开始 */
276 |   _fabricObj.on("object:modified", function(e) {
277 |     if (_config.isStart) updateCanvasState();
278 |   });
279 |   _fabricObj.on("object:added", function() {
280 |     if (_config.isStart) updateCanvasState();
281 |   });
282 |   _fabricObj.on("object:removed", function() {
283 |     updateCanvasState();
284 |   });
285 |   _fabricObj.on("object:rotating", function() {
286 |     updateCanvasState();
287 |   });
288 |   _fabricObj.on("mouse:down", (e) => {
289 |     if (e && e.target && e.target.selectable) {
290 |     }
291 |   });
292 |   _fabricObj.on("mouse:move", function(e) {
293 |     if (e && e.target) {
294 |     }
295 |   });
296 |   _fabricObj.on("mouse:up", (e) => {
297 |     if (e && e.target) {
298 |     }
299 |   });
300 |   _fabricObj.on("object:selected", (e) => {
301 |     if (e && e.target) {
302 |     }
303 |   });
304 |   /* 鼠标监控相关--结束 */
305 | 
306 |   //撤销回退相关操作状态配置表
307 |   let _config = {
308 |     canvasState: [], //存储各状态的json数据
309 |     currentStateIndex: -1,
310 |     undoStatus: false, //撤销
311 |     redoStatus: false, //回退
312 |     undoFinishedStatus: 1, //撤销中的状态
313 |     redoFinishedStatus: 1, //回退中的状态
314 |     undoBtnStatus: false, //撤销按钮可点击状态
315 |     redoBtnStatus: false, //回退按钮可点击状态
316 |     initialNum: 0,
317 |     isStart: false,
318 |   };
319 |   //记录每步操作,用户撤销和回退操作
320 |   let updateCanvasState = function() {
321 |     if (_config.undoStatus == false && _config.redoStatus == false) {
322 |       let jsonData = _fabricObj.toJSON(_toJsonWithParams);
323 |       let canvasAsJson = JSON.stringify(jsonData);
324 |       if (_config.currentStateIndex < _config.canvasState.length - 1) {
325 |         //回退操作更新
326 |         let oldData = JSON.parse(JSON.stringify(_config.canvasState));
327 |         _config.canvasState = oldData.splice(0, _config.currentStateIndex + 1);
328 |         _config.canvasState.push(canvasAsJson);
329 |       } else {
330 |         _config.canvasState.push(canvasAsJson);
331 |       }
332 |       _config.currentStateIndex = _config.canvasState.length - 1;
333 |       updateUnRedoBtnStatus();
334 |       if (
335 |         _config.currentStateIndex == _config.canvasState.length - 1 &&
336 |         _config.currentStateIndex == 0
337 |       ) {
338 |         return;
339 |       }
340 |       if (isInitialStatus) {
341 |         isInitialStatus = false;
342 |         updateInitialStatus(isInitialStatus);
343 |       }
344 |     }
345 |   };
346 | 
347 |   //更新撤销/回退的操作状态
348 |   let updateUnRedoBtnStatus = function() {
349 |     if (!that.updateUnRedoStatus) {
350 |       return;
351 |     }
352 |     //撤销按钮状态更新
353 |     if (_config.currentStateIndex <= 0) {
354 |       _config.undoBtnStatus = false;
355 |     } else {
356 |       _config.undoBtnStatus = true;
357 |     }
358 |     //回退按钮状态更新
359 |     if (
360 |       _config.canvasState.length > _config.currentStateIndex + 1 &&
361 |       _config.canvasState.length > 1
362 |     ) {
363 |       _config.redoBtnStatus = true;
364 |     } else {
365 |       _config.redoBtnStatus = false;
366 |     }
367 |     let btnStatus = {
368 |       undoStatus: _config.undoBtnStatus,
369 |       redoStatus: _config.redoBtnStatus,
370 |     };
371 |     //更新主页面的btn状态
372 |     that.updateUnRedoStatus(btnStatus);
373 |   };
374 | 
375 |   //撤销
376 |   let undo = function() {
377 |     let currentTarget = _fabricObj.getActiveObject();
378 |     if (_config.undoFinishedStatus) {
379 |       if (_config.currentStateIndex == 0) {
380 |         _config.undoStatus = false;
381 |       } else {
382 |         if (_config.canvasState.length >= 2) {
383 |           _config.undoFinishedStatus = 0;
384 |           _config.undoStatus = true;
385 |           _fabricObj.loadFromJSON(
386 |             _config.canvasState[_config.currentStateIndex - 1],
387 |             function() {
388 |               _fabricObj.renderAll();
389 |               _config.undoStatus = false;
390 |               _config.currentStateIndex -= 1;
391 |               _config.undoFinishedStatus = 1;
392 |               _fabricObj.renderAll.bind(_fabricObj);
393 |               undoFinish();
394 |             },
395 |             canvasLoadFromJsonTxtLoadFont
396 |           );
397 |         }
398 |       }
399 |     }
400 |   };
401 |   //恢复
402 |   let redo = function() {
403 |     if (_config.redoFinishedStatus) {
404 |       if (_config.currentStateIndex < _config.canvasState.length - 1) {
405 |         if (
406 |           _config.canvasState.length > _config.currentStateIndex + 1 &&
407 |           _config.canvasState.length > 1
408 |         ) {
409 |           _config.redoFinishedStatus = 0;
410 |           _config.redoStatus = true;
411 |           _fabricObj.loadFromJSON(
412 |             _config.canvasState[_config.currentStateIndex + 1],
413 |             function() {
414 |               _fabricObj.renderAll();
415 |               _config.redoStatus = false;
416 |               _config.currentStateIndex += 1;
417 |               _config.redoFinishedStatus = 1;
418 |               _fabricObj.renderAll.bind(_fabricObj);
419 |               undoFinish();
420 |             },
421 |             canvasLoadFromJsonTxtLoadFont
422 |           );
423 |         }
424 |       }
425 |     }
426 |   };
427 | 
428 |   //获取最新的层级关系列表
429 |   let getNewLevelList = function() {
430 |     let list = [];
431 |     let objList = _fabricObj.getObjects();
432 |     for (let i = 0; i < objList.length; i++) {
433 |       let obj = {};
434 |       obj.visiable = objList[i].visible;
435 |       obj.text = objList[i].title;
436 |       obj.id = i + 1;
437 |       obj.type = objList[i].realType;
438 |       list.push(obj);
439 |     }
440 |     return list;
441 |   };
442 | 
443 |   //撤销/回退操作完成回调
444 |   let undoFinish = function() {
445 |     //banner微编辑
446 |     if (that.undoSuccess) {
447 |       that.undoSuccess(getNewLevelList());
448 |     }
449 |     //gif动图微编辑
450 |     that.initialSuccessCallback &&
451 |       that.initialSuccessCallback(getNewEditLevelList());
452 |     updateUnRedoBtnStatus();
453 |   };
454 | 
455 |   //gif动图,更新可编辑图层信息
456 |   const getNewEditLevelList = () => {
457 |     let newObject = {};
458 |     let txtList = [];
459 |     let imgList = [];
460 | 
461 |     let objList = _fabricObj.getObjects();
462 |     for (let i = 0; i < objList.length; i++) {
463 |       if (!objList[i].layerIsEdit || objList[i].layerIsEdit == "0") {
464 |         continue;
465 |       }
466 |       if (objList[i].realType.indexOf("3-") < 0) {
467 |         let obj = {
468 |           type: objList[i].realType,
469 |           order: objList[i].order,
470 |           layerPictureUrl: objList[i].layerPictureUrl,
471 |         };
472 |         imgList.push(obj);
473 |       } else {
474 |         let obj = {
475 |           type: objList[i].realType,
476 |           order: objList[i].order,
477 |           title: objList[i].text,
478 |         };
479 |         txtList.push(obj);
480 |       }
481 |     }
482 |     newObject.imgList = imgList;
483 |     newObject.txtList = txtList;
484 |     return newObject;
485 |   };
486 | 
487 |   //调整层级关系
488 |   let updateLevel = function(moveOrder, movedOrder) {
489 |     moveOrder = parseInt(moveOrder);
490 |     movedOrder = parseInt(movedOrder);
491 |     let upLevels = _fabricObj.getObjects();
492 |     let currentUpdate = {};
493 |     if (moveOrder < movedOrder) {
494 |       //往外层移动
495 |       for (let i = moveOrder; i <= movedOrder; i++) {
496 |         if (upLevels[i].order > moveOrder) {
497 |           upLevels[i].order = parseInt(upLevels[i].order) - 1;
498 |         } else if (upLevels[i].order == moveOrder) {
499 |           upLevels[i].order = movedOrder;
500 |           currentUpdate = upLevels[i];
501 |         }
502 |       }
503 |       //移动图层,向外移动多少层
504 |       for (let i = moveOrder; i < movedOrder; i++) {
505 |         _fabricObj.bringForward(currentUpdate); //上移
506 |       }
507 |     } else {
508 |       //往内层移动
509 |       for (let i = movedOrder; i <= moveOrder; i++) {
510 |         if (upLevels[i].order < moveOrder) {
511 |           upLevels[i].order = parseInt(upLevels[i].order) + 1;
512 |         } else if (upLevels[i].order == moveOrder) {
513 |           upLevels[i].order = movedOrder;
514 |           currentUpdate = upLevels[i];
515 |         }
516 |       }
517 |       //移动图层,向内移动多少层
518 |       for (let i = movedOrder; i < moveOrder; i++) {
519 |         _fabricObj.sendBackwards(currentUpdate); //下移
520 |       }
521 |     }
522 |     _fabricObj.renderAll();
523 |     updateCanvasState();
524 |   };
525 | 
526 |   //重新加载相关数据初始化
527 |   let initialize = function() {
528 |     if (isInitialStatus) {
529 |       return;
530 |     }
531 |     let json = _config.canvasState[0];
532 |     _fabricObj.clear();
533 |     _config.isStart = false;
534 |     _config.currentStateIndex = -1;
535 |     _config.canvasState = [];
536 |     isInitialStatus = true;
537 |     _fabricObj.loadFromJSON(
538 |       json,
539 |       () => {
540 |         firstAddToState(true);
541 |         updateCanvasState();
542 |         undoFinish();
543 |       },
544 |       canvasLoadFromJsonTxtLoadFont
545 |     );
546 |     updateInitialStatus(isInitialStatus);
547 |   };
548 | 
549 |   //更新是否是初始状态
550 |   let updateInitialStatus = function() {
551 |     if (that.updateInitialStatus) {
552 |       that.updateInitialStatus(isInitialStatus);
553 |     }
554 |   };
555 | 
556 |   //获取画布图片的base64
557 |   let getImgBase64Url = function() {
558 |     let currentActive = _fabricObj.getObjects()[0];
559 |     let width = currentActive.oldWidth * currentActive.scaleX;
560 |     let height = currentActive.oldHeight * currentActive.scaleY;
561 |     let zoom = _fabricObj.getZoom();
562 |     if (zoom != 1) {
563 |       setZoom(1);
564 |     }
565 |     //转换成base64
566 |     let imgURL = _fabricObj.toDataURL({
567 |       format: "jpeg",
568 |       quality: 1,
569 |       multiplier: 1,
570 |       left: 0,
571 |       top: 0,
572 |       width: width,
573 |       height: height,
574 |     });
575 |     setZoom(zoom);
576 |     return imgURL;
577 |   };
578 | 
579 |   //设置缩放
580 |   let setZoom = function(num) {
581 |     _fabricObj.setZoomByCenter(num);
582 |   };
583 | 
584 |   //设置导出json时需要导出的自定义字段
585 |   let setToJsonWithParams = function(list) {
586 |     _toJsonWithParams = _toJsonWithParams.concat(list);
587 |   };
588 | 
589 |   //设置是否显示
590 |   let toggleVisiable = function(order, value) {
591 |     let objs = _fabricObj.getObjects().filter((e) => {
592 |       return e && e.order == order;
593 |     });
594 |     if (objs && objs.length > 0) {
595 |       objs[0].set("visible", value);
596 |       _fabricObj.renderAll();
597 |       updateCanvasState();
598 |     }
599 |   };
600 | 
601 |   //删除元素
602 |   let delItem = function(order) {
603 |     let objs = _fabricObj.getObjects().filter((e) => {
604 |       return e && e.order == order;
605 |     });
606 |     if (objs && objs.length > 0) {
607 |       _fabricObj.remove(objs[0]);
608 |       _fabricObj.renderAll();
609 |       resetOrderToMapper(order);
610 |     }
611 |   };
612 | 
613 |   //删除时候用,删除层级以上的全部降一,已于当前getobjects()的层级相对应
614 |   let resetOrderToMapper = function(order) {
615 |     order = parseInt(order);
616 |     for (let i = order; i < _fabricObj.getObjects().length; i++) {
617 |       if (parseInt(_fabricObj.getObjects()[i].order) > order) {
618 |         _fabricObj.getObjects()[i].order = i;
619 |       }
620 |     }
621 |   };
622 | 
623 |   //开始记录操作,用于撤销回退
624 |   let firstAddToState = function(isStart = false) {
625 |     _config.isStart = isStart;
626 |   };
627 | 
628 |   //设置选中项
629 |   let setActiveSelect = function(order) {
630 |     return new Promise((resolve, reject) => {
631 |       let objs = _fabricObj.getObjects().filter((e) => {
632 |         return e && e.order == order;
633 |       });
634 |       if (objs && objs.length > 0) {
635 |         _fabricObj.setActiveObject(objs[0]);
636 |         resolve();
637 |       } else {
638 |         reject();
639 |       }
640 |     });
641 |   };
642 | 
643 |   //获取当前选中的元素
644 |   let getActiveObj = function() {
645 |     return _fabricObj.getActiveObject();
646 |   };
647 | 
648 |   //设置元素属性值
649 |   let setActiveObjCss = function(obj) {
650 |     let currentActive = getActiveObj();
651 |     if (currentActive) {
652 |       // currentActive.setOptions(obj)
653 |       currentActive.set(obj.cssName, obj.cssVlaue).setCoords();
654 |       _fabricConfig.renderAll();
655 |     }
656 |   };
657 | 
658 |   //翻转元素,flip=flipX,水平翻转,flip=flipY垂直旋转
659 |   let _flipActiveObj = function(flip) {
660 |     let activeObj = getActiveObj();
661 |     if (activeObj) {
662 |       let fX = activeObj[flip];
663 |       activeObj.set(flip, fX).setCoords();
664 |     }
665 |   };
666 | 
667 |   //加载json到canvas时加载每个元素的事件,用于异步加载字体
668 |   let canvasLoadFromJsonTxtLoadFont = function(o, object) {
669 |     if (
670 |       object.isType("i-text") &&
671 |       o.fontFamily == "" &&
672 |       o.realFontFamily != ""
673 |     ) {
674 |       _loadFont(object, o.realFontFamily);
675 |     }
676 |   };
677 | 
678 |   //加载字体文件
679 |   let _loadFont = function(instance, fontFamily) {
680 |     let font = fontFamily;
681 |     var myfont = new FontFaceObserver(font);
682 |     myfont
683 |       .load(null, 100000)
684 |       .then(function() {
685 |         console.log(instance, font);
686 |         instance.set("fontFamily", font);
687 |         _fabricObj.requestRenderAll();
688 |         _loadFontSuccess(instance);
689 |       })
690 |       .catch(function(e) {
691 |         console.log(e);
692 |       });
693 |   };
694 | 
695 |   //加载字体成功事件回调
696 |   let _loadFontSuccess = function(currentActive) {
697 |     let text = currentActive.text;
698 |     currentActive.set("text", "").setCoords();
699 |     currentActive.set("text", text).setCoords();
700 |     _fabricObj.renderAll();
701 |   };
702 | 
703 |   return {
704 |     initFabricConfig: _initConfig,
705 |     fabricInstance: _fabricObj,
706 |     updateLevel: updateLevel,
707 |     initialize: initialize,
708 |     getImgBase64Url: getImgBase64Url,
709 |     setZoom: setZoom,
710 |     setToJsonWithParams: setToJsonWithParams,
711 |     toggleVisiable: toggleVisiable,
712 |     delItem: delItem,
713 |     firstAddToState: firstAddToState,
714 |     createImage: _createImage,
715 |     createItext: _createItext,
716 |     flipActiveObj: _flipActiveObj,
717 |     updateCanvasState: updateCanvasState,
718 |     setActiveSelect: setActiveSelect,
719 |     getActiveObj: getActiveObj,
720 |     setActiveObjCss: setActiveObjCss,
721 |     undo: undo,
722 |     redo: redo,
723 |     loadFont: _loadFont,
724 |   };
725 | };
726 | export { fabricObject };
727 | 


--------------------------------------------------------------------------------
/src/components/MicroEdit/guideLines.js:
--------------------------------------------------------------------------------
  1 | function initAligningGuidelines(canvas) {
  2 |  
  3 | 	var ctx = canvas.getSelectionContext(),
  4 | 		aligningLineOffset = 0,
  5 | 		aligningLineMargin = 0,
  6 | 		aligningLineWidth = 1,
  7 | 		aligningLineColor = 'rgb(0,0,0)',
  8 | 		viewportTransform,
  9 | 		zoom = 1;
 10 |  
 11 | 	function drawVerticalLine(coords) {
 12 | 		drawLine(
 13 | 			coords.x + 0.5,
 14 | 			coords.y1 > coords.y2 ? coords.y2 : coords.y1,
 15 | 			coords.x + 0.5,
 16 | 			coords.y2 > coords.y1 ? coords.y2 : coords.y1);
 17 | 	}
 18 |  
 19 | 	function drawHorizontalLine(coords) {
 20 | 		drawLine(
 21 | 			coords.x1 > coords.x2 ? coords.x2 : coords.x1,
 22 | 			coords.y + 0.5,
 23 | 			coords.x2 > coords.x1 ? coords.x2 : coords.x1,
 24 | 			coords.y + 0.5);
 25 | 	}
 26 |  
 27 | 	function drawLine(x1, y1, x2, y2) {
 28 | 		ctx.save();
 29 | 		ctx.lineWidth = aligningLineWidth;
 30 | 		ctx.strokeStyle = aligningLineColor;
 31 | 		ctx.beginPath();
 32 | 		ctx.moveTo(((x1+viewportTransform[4])*zoom), ((y1+viewportTransform[5])*zoom));
 33 | 		ctx.lineTo(((x2+viewportTransform[4])*zoom), ((y2+viewportTransform[5])*zoom));
 34 | 		ctx.stroke();
 35 | 		ctx.restore();
 36 | 	}
 37 |  
 38 | 	function isInRange(value1, value2) {
 39 | 		value1 = Math.round(value1);
 40 | 		value2 = Math.round(value2);
 41 | 		for (var i = value1 - aligningLineMargin, len = value1 + aligningLineMargin; i <= len; i++) {
 42 | 			if (i === value2) {
 43 | 				return true;
 44 | 			}
 45 | 		}
 46 | 		return false;
 47 | 	}
 48 |  
 49 | 	var verticalLines = [],
 50 | 		horizontalLines = [];
 51 |  
 52 | 	canvas.on('mouse:down', function () {
 53 | 		viewportTransform = canvas.viewportTransform;
 54 | 		zoom = canvas.getZoom();
 55 | 	});
 56 |  
 57 | 	canvas.on('object:moving', function(e) {
 58 |  
 59 | 		var activeObject = e.target,
 60 | 			canvasObjects = canvas.getObjects(),
 61 | 			activeObjectCenter = activeObject.getCenterPoint(),
 62 | 			activeObjectLeft = activeObjectCenter.x,
 63 | 			activeObjectTop = activeObjectCenter.y,
 64 | 			activeObjectBoundingRect = activeObject.getBoundingRect(),
 65 | 			activeObjectHeight = activeObjectBoundingRect.height / viewportTransform[3],
 66 | 			activeObjectWidth = activeObjectBoundingRect.width / viewportTransform[0],
 67 | 			horizontalInTheRange = false,
 68 | 			verticalInTheRange = false,
 69 | 			transform = canvas._currentTransform;
 70 |  
 71 | 		if (!transform) return;
 72 |  
 73 | 		// It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions,
 74 | 		// but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move
 75 |  
 76 | 		for (var i = canvasObjects.length; i--; ) {
 77 |  
 78 | 			if (canvasObjects[i] === activeObject) continue;
 79 |  
 80 | 			var objectCenter = canvasObjects[i].getCenterPoint(),
 81 | 				objectLeft = objectCenter.x,
 82 | 				objectTop = objectCenter.y,
 83 | 				objectBoundingRect = canvasObjects[i].getBoundingRect(),
 84 | 				objectHeight = objectBoundingRect.height / viewportTransform[3],
 85 | 				objectWidth = objectBoundingRect.width / viewportTransform[0];
 86 |  
 87 | 			// snap by the horizontal center line
 88 | 			if (isInRange(objectLeft, activeObjectLeft)) {
 89 | 				verticalInTheRange = true;
 90 | 				verticalLines.push({
 91 | 					x: objectLeft,
 92 | 					y1: (objectTop < activeObjectTop)
 93 | 						? (objectTop - objectHeight / 2 - aligningLineOffset)
 94 | 						: (objectTop + objectHeight / 2 + aligningLineOffset),
 95 | 					y2: (activeObjectTop > objectTop)
 96 | 						? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
 97 | 						: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
 98 | 				});
 99 | 				activeObject.setPositionByOrigin(new fabric.Point(objectLeft, activeObjectTop), 'center', 'center');
100 | 			}
101 |  
102 | 			// snap by the left edge
103 | 			if (isInRange(objectLeft - objectWidth / 2, activeObjectLeft - activeObjectWidth / 2)) {
104 | 				verticalInTheRange = true;
105 | 				verticalLines.push({
106 | 					x: objectLeft - objectWidth / 2,
107 | 					y1: (objectTop < activeObjectTop)
108 | 						? (objectTop - objectHeight / 2 - aligningLineOffset)
109 | 						: (objectTop + objectHeight / 2 + aligningLineOffset),
110 | 					y2: (activeObjectTop > objectTop)
111 | 						? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
112 | 						: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
113 | 				});
114 | 				activeObject.setPositionByOrigin(new fabric.Point(objectLeft - objectWidth / 2 + activeObjectWidth / 2, activeObjectTop), 'center', 'center');
115 | 			}
116 |  
117 | 			// snap by the right edge
118 | 			if (isInRange(objectLeft + objectWidth / 2, activeObjectLeft + activeObjectWidth / 2)) {
119 | 				verticalInTheRange = true;
120 | 				verticalLines.push({
121 | 					x: objectLeft + objectWidth / 2,
122 | 					y1: (objectTop < activeObjectTop)
123 | 						? (objectTop - objectHeight / 2 - aligningLineOffset)
124 | 						: (objectTop + objectHeight / 2 + aligningLineOffset),
125 | 					y2: (activeObjectTop > objectTop)
126 | 						? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
127 | 						: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
128 | 				});
129 | 				activeObject.setPositionByOrigin(new fabric.Point(objectLeft + objectWidth / 2 - activeObjectWidth / 2, activeObjectTop), 'center', 'center');
130 | 			}
131 |  
132 | 			// snap by the vertical center line
133 | 			if (isInRange(objectTop, activeObjectTop)) {
134 | 				horizontalInTheRange = true;
135 | 				horizontalLines.push({
136 | 					y: objectTop,
137 | 					x1: (objectLeft < activeObjectLeft)
138 | 						? (objectLeft - objectWidth / 2 - aligningLineOffset)
139 | 						: (objectLeft + objectWidth / 2 + aligningLineOffset),
140 | 					x2: (activeObjectLeft > objectLeft)
141 | 						? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
142 | 						: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
143 | 				});
144 | 				activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop), 'center', 'center');
145 | 			}
146 |  
147 | 			// snap by the top edge
148 | 			if (isInRange(objectTop - objectHeight / 2, activeObjectTop - activeObjectHeight / 2)) {
149 | 				horizontalInTheRange = true;
150 | 				horizontalLines.push({
151 | 					y: objectTop - objectHeight / 2,
152 | 					x1: (objectLeft < activeObjectLeft)
153 | 						? (objectLeft - objectWidth / 2 - aligningLineOffset)
154 | 						: (objectLeft + objectWidth / 2 + aligningLineOffset),
155 | 					x2: (activeObjectLeft > objectLeft)
156 | 						? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
157 | 						: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
158 | 				});
159 | 				activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop - objectHeight / 2 + activeObjectHeight / 2), 'center', 'center');
160 | 			}
161 |  
162 | 			// snap by the bottom edge
163 | 			if (isInRange(objectTop + objectHeight / 2, activeObjectTop + activeObjectHeight / 2)) {
164 | 				horizontalInTheRange = true;
165 | 				horizontalLines.push({
166 | 					y: objectTop + objectHeight / 2,
167 | 					x1: (objectLeft < activeObjectLeft)
168 | 						? (objectLeft - objectWidth / 2 - aligningLineOffset)
169 | 						: (objectLeft + objectWidth / 2 + aligningLineOffset),
170 | 					x2: (activeObjectLeft > objectLeft)
171 | 						? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
172 | 						: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
173 | 				});
174 | 				activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop + objectHeight / 2 - activeObjectHeight / 2), 'center', 'center');
175 | 			}
176 | 		}
177 |  
178 | 		if (!horizontalInTheRange) {
179 | 			horizontalLines.length = 0;
180 | 		}
181 |  
182 | 		if (!verticalInTheRange) {
183 | 			verticalLines.length = 0;
184 | 		}
185 | 	});
186 |  
187 | 	canvas.on('before:render', function() {
188 | 		if(canvas&&canvas.contextTop)
189 | 		{
190 | 			canvas.clearContext(canvas.contextTop);
191 | 		}
192 | 	});
193 |  
194 | 	canvas.on('after:render', function() {
195 | 		for (var i = verticalLines.length; i--; ) {
196 | 			drawVerticalLine(verticalLines[i]);
197 | 		}
198 | 		for (var i = horizontalLines.length; i--; ) {
199 | 			drawHorizontalLine(horizontalLines[i]);
200 | 		}
201 |  
202 | 		verticalLines.length = horizontalLines.length = 0;
203 | 	});
204 |  
205 | 	canvas.on('mouse:up', function() {
206 | 		verticalLines.length = horizontalLines.length = 0;
207 | 		canvas.renderAll();
208 | 	});
209 | }
210 |  
211 | export default initAligningGuidelines;


--------------------------------------------------------------------------------
/src/components/MicroEdit/index.js:
--------------------------------------------------------------------------------
1 | import MicroEdit from './MicroEdit'
2 | export default MicroEdit


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | 
2 | export default(Vue) => {
3 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from '@/router'
 4 | import components from './components'
 5 | import ElementUI,{Message} from 'element-ui'
 6 | import 'element-ui/lib/theme-chalk/index.css'
 7 | import '@/assets/styles/base.css'
 8 | import '@/assets/styles/common.css'
 9 | 
10 | Vue.config.productionTip = false
11 | Vue.use(components)
12 | Vue.use(ElementUI)
13 | Vue.prototype.$message = Message
14 | 
15 | new Vue({
16 |   render: h => h(App),
17 |   router
18 | }).$mount('#app')
19 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | let router = new Router({
 7 |   mode: 'hash',
 8 |   routes: [
 9 |     {
10 |         path: '/home',
11 |         name: 'home',
12 |         component: () => import("@/views/Home/Home")
13 |     },
14 |     {
15 |       path: '*',
16 |       component: () => import("@/views/Home/Home")
17 |   }
18 | ]
19 | })
20 | router.beforeEach((to, from, next) => {
21 |   next();
22 | })
23 | export default router
24 | 


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


--------------------------------------------------------------------------------
/src/store/mutationTypes.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeff-Bee/onLinePS/79737fa5333da831eeee28824c28204521f8fd55/src/store/mutationTypes.js


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | let qs = require('querystring')
 2 | export const getQueryStringFromJson = function (json) {
 3 |   return qs.stringify(json)
 4 | }
 5 | 
 6 | // 时间格式化-yyyy-MM-dd 00or24
 7 | export const getFormatYMDDateStr = function (date, isEnd = false) {
 8 |   if (!date) {
 9 |     return ''
10 |   }
11 |   var time = new Date(date)
12 |   return `${time.getFullYear()}-${(time.getMonth() + 1)}-${time.getDate()} ${isEnd ? '23:59:59' : '00:00:00'}`
13 | }
14 | 
15 | //格式化str时间为yyyy-MM-dd的字符串
16 | export const formatStrDataToYMDStr = function (date) {
17 |   if (!date) {
18 |     return ''
19 |   }
20 |   date = date.replace(/-/g, '/');
21 |   let time = new Date(date);
22 |   return `${time.getFullYear()}-${(time.getMonth() + 1)}-${time.getDate()}`
23 | }
24 | 
25 | // 判断是否是ie浏览器
26 | export const isIE = () => {
27 |   if (window.navigator.userAgent.indexOf('MSIE') >= 1 || (!!window.ActiveXObject || 'ActiveXObject' in window)) {
28 |     return true
29 |   }
30 |   return false
31 | }
32 | 
33 | //创建全局遮罩层
34 | export const createMask=function(data){
35 |     let mask=document.createElement('div');
36 |     mask.style.cssText ="position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 1110;background:#fff;opacity:0;";
37 |     document.body.appendChild(mask);
38 |     return mask;
39 | }
40 | 
41 | // 判断是否是safari
42 | export const isSafari = () => {
43 |   if (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {
44 |     return true
45 |   }
46 |   return false
47 | }
48 | // 判断是否是FF
49 | export const isFireFox = () => {
50 |   if (/Firefox/.test(navigator.userAgent)) {
51 |     return true
52 |   }
53 |   return false
54 | }
55 | 
56 | // 判断是否是Chrome
57 | export const isChrome = () => {
58 |   if (/Chrome/.test(navigator.userAgent)) {
59 |     return true
60 |   }
61 |   return false
62 | }


--------------------------------------------------------------------------------
/src/views/Home/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="Home">
 3 | 		<BannerEdit
 4 |             :bannerJson="bannerJson"
 5 |             :matherSetSize="matherSetSize"
 6 |             @saveBanner="saveBanner"
 7 |             >
 8 |         </BannerEdit>
 9 | 	</div>
10 | </template>
11 | <script>
12 | import BannerEdit from '@/components/MicroEdit/BannerEdit'
13 | export default {
14 | 	name: 'home',
15 | 	components:{
16 |         BannerEdit
17 |     },
18 | 	data(){
19 | 		return{
20 | 			bannerJson:[],
21 | 			matherSetSize:{width:0,height:0}
22 | 		}
23 | 	},
24 | 	methods:{
25 | 		//保存
26 | 		saveBanner({type,initialStatus,imgQuality,bannerData}){
27 | 
28 | 		}
29 | 	},
30 | 	created(){
31 | 		let data=[
32 | 			{"title":"背景1","bboxWidth":"1222","bboxHeight":"456","bboxX1":"0","bboxX2":"1222","bboxY1":"0","bboxY2":"456","order":"0","type":"1-1","isGif":0,"layerIsEdit":1,"layerPictureUrl":"75abc05c659f4d5aa047b1c4e9bdd81a.png","motherSetNumRef":"201960241055174110","PictureName":"","id":"","userId":"","pictType":"","fontType":""},
33 | 			{"title":"图层1","bboxWidth":"530","bboxHeight":"525","bboxX1":"635","bboxX2":"1168","bboxY1":"157","bboxY2":"682","order":"1","type":"7-2","isGif":0,"layerIsEdit":1,"layerPictureUrl":"9206b8e038074cc9b6ff54330348cc01.png","motherSetNumRef":"201954169270520169","PictureName":"","id":"","userId":"","pictType":"","fontType":""},
34 | 			{"title":"图层2","bboxWidth":"153","bboxHeight":"168","bboxX1":"-77","bboxX2":"84","bboxY1":"335","bboxY2":"503","order":"2","type":"6-2","isGif":0,"layerIsEdit":1,"layerPictureUrl":"6acfc5f2a8f04981a8b785fde5b2a87c.png","motherSetNumRef":"201958599645878151","PictureName":"","userId":"","pictType":"","fontType":""},
35 | 			{"title":"图层3","bboxWidth":"153","bboxHeight":"168","bboxX1":"352","bboxX2":"513","bboxY1":"-115","bboxY2":"53","order":"3","type":"6-2","isGif":0,"layerIsEdit":1,"layerPictureUrl":"f769bc0e1115441f99dc3468fe4e1db7.png","motherSetNumRef":"201958599646304152","PictureName":"","userId":"","pictType":"","fontType":""},
36 | 			{"title":"图层4","bboxWidth":"130","bboxHeight":"18","bboxX1":"472","bboxX2":"602","bboxY1":"386","bboxY2":"404","order":"4","type":"6-1","isGif":0,"layerIsEdit":1,"layerPictureUrl":"5690278ce1b44cdaab95a90684ec8803.png","motherSetNumRef":"201954169781745187","PictureName":"","userId":"","pictType":"","fontType":""},
37 | 			{"title":"图层5","bboxWidth":"84","bboxHeight":"12","bboxX1":"1108","bboxX2":"1192","bboxY1":"127","bboxY2":"139","order":"5","type":"6-1","isGif":0,"layerIsEdit":1,"layerPictureUrl":"5690278ce1b44cdaab95a90684ec8803.png","motherSetNumRef":"201954169781745187","PictureName":"","userId":"","pictType":"","fontType":""},
38 | 			{"title":"图层6","bboxWidth":"314","bboxHeight":"50","bboxX1":"188","bboxX2":"502.0","bboxY1":"230","bboxY2":"280","order":"6","type":"7-4","isGif":0,"layerIsEdit":1,"layerPictureUrl":"12c3946fa8c445e8a4f6de664893ae22.png","motherSetNumRef":"201954169372427200","PictureName":"","id":"","userId":"","pictType":"","fontType":""},
39 | 			{"title":"图层7","bboxWidth":"138","bboxHeight":"50","bboxX1":"276","bboxX2":"414.0","bboxY1":"291","bboxY2":"341","order":"7","type":"7-5","isGif":0,"layerIsEdit":1,"layerPictureUrl":"c365ab6dbe274c1587df1ce13b1bbe29.png","motherSetNumRef":"201958526286323122","PictureName":"","id":"","userId":"","pictType":"","fontType":""},
40 | 			{"title":"商品图1","bboxWidth":"340","bboxHeight":"340","bboxX1":"734","bboxX2":"1074","bboxY1":"133","bboxY2":"503","order":"8","type":"2-1","isGif":0,"layerIsEdit":1,"layerPictureUrl":"3adc468aa17543e0902330f1a74c856a.92e9cd1b464643c7957426b8e2735ef8.jpg","motherSetNumRef":"201962290575412104","PictureName":"用户:sn17073564在2019-07-05 09:35:54上传的banner商品图","id":"9782","userId":"sn17073564","pictType":"1","fontType":""},
41 | 			{"title":"文案2","bboxWidth":"189","bboxHeight":"27","bboxX1":"250","bboxX2":"439.0","bboxY1":"240","bboxY2":"267.0","order":"9","type":"3-2","isGif":0,"layerIsEdit":1,"fontSize":27,"color":"#FFFFFF","text":"一减到底购屯起","fontType":"FZZCHJW--GB1-0","fontBold":"0","fontItalic":"0","userId":"sn88385718"},
42 | 			{"title":"文案3","bboxWidth":"119","bboxHeight":"24","bboxX1":"258","bboxX2":"377.0","bboxY1":"304","bboxY2":"328.0","order":"10","type":"3-3","isGif":0,"layerIsEdit":1,"fontSize":24,"color":"#000000","text":"嗨起来嗨起","fontType":"FZZCHJW--GB1-0","fontBold":"0","fontItalic":"0","userId":"sn88385718"},
43 | 			{"title":"文案1","bboxWidth":"442","bboxHeight":"61","bboxX1":"124","bboxX2":"566.0","bboxY1":"153","bboxY2":"214.0","order":"11","type":"3-1","isGif":0,"layerIsEdit":1,"fontSize":61,"color":"#FFFFFF","text":"大减价大减价GO","fontType":"FZZCHJW--GB1-0","fontBold":"0","fontItalic":"0","userId":"sn88385718"}
44 | 		];
45 | 		this.bannerJson=data;
46 | 	}
47 | };
48 | </script>
49 | <style lang="less" scoped>
50 | </style>


--------------------------------------------------------------------------------
/src/views/Home/index.js:
--------------------------------------------------------------------------------
1 | import Home from './Home.vue'
2 |                 export {
3 |                     Home
4 |                 }


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 2 | const CompressionWebpackPlugin = require('compression-webpack-plugin');
 3 | 
 4 | module.exports = {
 5 |     publicPath:'/',
 6 |     assetsDir:'static',
 7 |     devServer: {
 8 |         disableHostCheck: true
 9 |     },
10 |     productionSourceMap: false,
11 |     configureWebpack:{
12 |         optimization: {
13 |             minimizer: [
14 |               new UglifyJsPlugin({
15 |                 uglifyOptions: {
16 |                   warnings: false,
17 |                   compress: {
18 |                     drop_console: true,//console
19 |                     drop_debugger: true,
20 |                     pure_funcs: ['console.log']//移除console
21 |                   }
22 |                 }
23 |             })
24 |           ]
25 |         },
26 |         plugins: [
27 |             new CompressionWebpackPlugin({
28 |                 test:/\.js$|\.html$|\.css$/, //匹配文件名
29 |                 threshold: 10240,//对超过10k的数据压缩
30 |                 deleteOriginalAssets: false //不删除源文件
31 |             })
32 |         ]
33 |     }
34 | }


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