From cc5c33c7f4fe966d7df95cd595de3ce0d7d59799 Mon Sep 17 00:00:00 2001 From: liuchuanming Date: Tue, 5 Jan 2021 20:47:34 +0800 Subject: [PATCH 001/145] posterpage --- linkwe-ui/.npmrc | 2 + linkwe-ui/package.json | 2 + linkwe-ui/src/assets/poster/icon-a.svg | 235 +++++++++++++++++ linkwe-ui/src/assets/poster/icon-b.svg | 224 ++++++++++++++++ linkwe-ui/src/assets/poster/icon-c.svg | 224 ++++++++++++++++ linkwe-ui/src/assets/poster/icon-d.svg | 224 ++++++++++++++++ linkwe-ui/src/assets/poster/img/Thumbs.db | Bin 0 -> 12288 bytes linkwe-ui/src/assets/poster/img/bg.png | Bin 0 -> 929 bytes .../src/views/material/components/MaPage.vue | 27 +- .../views/material/components/PosterPage.vue | 119 +++++++++ linkwe-ui/src/views/material/poster.vue | 248 +++++++++++++++++- 11 files changed, 1292 insertions(+), 13 deletions(-) create mode 100644 linkwe-ui/.npmrc create mode 100644 linkwe-ui/src/assets/poster/icon-a.svg create mode 100644 linkwe-ui/src/assets/poster/icon-b.svg create mode 100644 linkwe-ui/src/assets/poster/icon-c.svg create mode 100644 linkwe-ui/src/assets/poster/icon-d.svg create mode 100644 linkwe-ui/src/assets/poster/img/Thumbs.db create mode 100644 linkwe-ui/src/assets/poster/img/bg.png create mode 100644 linkwe-ui/src/views/material/components/PosterPage.vue diff --git a/linkwe-ui/.npmrc b/linkwe-ui/.npmrc new file mode 100644 index 000000000..21ac9cc10 --- /dev/null +++ b/linkwe-ui/.npmrc @@ -0,0 +1,2 @@ +tag-version-prefix="" +registry=https://registry.npm.taobao.org \ No newline at end of file diff --git a/linkwe-ui/package.json b/linkwe-ui/package.json index 60cf0b4bb..5ccc65a59 100644 --- a/linkwe-ui/package.json +++ b/linkwe-ui/package.json @@ -42,6 +42,8 @@ "axios": "0.18.1", "clipboard": "2.0.4", "core-js": "3.6.5", + "fabric": "^3.5.1", + "tui-image-editor": "^3.7.1", "echarts": "4.2.1", "element-ui": "2.13.2", "file-saver": "2.0.1", diff --git a/linkwe-ui/src/assets/poster/icon-a.svg b/linkwe-ui/src/assets/poster/icon-a.svg new file mode 100644 index 000000000..7e1efb817 --- /dev/null +++ b/linkwe-ui/src/assets/poster/icon-a.svg @@ -0,0 +1,235 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/linkwe-ui/src/assets/poster/icon-b.svg b/linkwe-ui/src/assets/poster/icon-b.svg new file mode 100644 index 000000000..c1ea6256a --- /dev/null +++ b/linkwe-ui/src/assets/poster/icon-b.svg @@ -0,0 +1,224 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/linkwe-ui/src/assets/poster/icon-c.svg b/linkwe-ui/src/assets/poster/icon-c.svg new file mode 100644 index 000000000..8074cf08d --- /dev/null +++ b/linkwe-ui/src/assets/poster/icon-c.svg @@ -0,0 +1,224 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/linkwe-ui/src/assets/poster/icon-d.svg b/linkwe-ui/src/assets/poster/icon-d.svg new file mode 100644 index 000000000..52e6ffa30 --- /dev/null +++ b/linkwe-ui/src/assets/poster/icon-d.svg @@ -0,0 +1,224 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/linkwe-ui/src/assets/poster/img/Thumbs.db b/linkwe-ui/src/assets/poster/img/Thumbs.db new file mode 100644 index 0000000000000000000000000000000000000000..e069ad4caaa78343129130ba09afd0eda6d7c28d GIT binary patch literal 12288 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 C3@+~g literal 0 HcmV?d00001 diff --git a/linkwe-ui/src/assets/poster/img/bg.png b/linkwe-ui/src/assets/poster/img/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..55e234d40f21b09a44e5a74d3a1322f1f79fd0fa GIT binary patch literal 929 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOY1)V64h?b`J1#c2)=|%1_J8No8Qr zIG>!5pyjEfaUwA>A>qVXZB4GC@}Q26o}h&NhYy@Ra9H6;!cm2JGh$*MNC-SQ+#p=D z``7`FMf$Is&Uk(PQ+avW)|!7}X6t7bg{fNc{9r8i$|^KsW>#jOFn3PSoH^Vn&lzr7 zon&=Yb@;}k5WRiR5{4soj49nBjItal_Zc@{R(!*+P$o3v>=C9gVWB5HDc%e>nLGuy zv31PlON?%~aZ<8V(_tI?3B3;K0}YoCyB@rAAn5wU##0LB%SF=IHMUd)eRgVge8-R^ z$;Qtn&c@1C%*M>-%@)gceA1OJp$SgU|1_OibmmKs5UYE_iDgdIBqSxI8m=@x;z|1QTw%k@o}}l3Nk6$IC3L1rO3bJhNbQ%&OdVCL;0is|M!dk z{r|t*@Iqa}9N80$3@YWB558V#tpY{{XMsm#F#`kN5fEmas?8@2jG8%_ArU1JzCKpT z`MG+DDfvmMdKI|^K-CNkHWgMtW^QUpqC!P(PF}H9g{=};g%ywu64qBz04piUwpEJo z4N!2-FG^J~)icpEP_pAvP*AWbN=dT{a&d!d2l8x{GD=Dctn~HE%ggo3jrH=2()A53 zEiLs8jP#9+bb%^#i!1X=5-W7`ij^UTz|3(;Elw`VEGWs$&r<-Io0ybeT4JlD1hNPY zAnr`9$VAwbR}A$Q(1ZFQ8GS=N1AVyJK&>_)QLBK=iqxD4m(1MMykejoc7}!qHemG_ zG6)-ybVed{T3RA&M3R7Nw9yB-AIU$EzygZ`L(7iKMjsyXc3dZKg?R!aL)Fv8F+?Lc z`OnYK&+FNg7$Xd&rKP8I%NsamE;_IxDaAqiC=U { - this.$refs['form'].clearValidate() - }) + switch (type) { + case 5: + this.$parent.posterEdit.step = 0 + this.$parent.dialog.edit = true + break + default: + this.form = Object.assign( + {}, + data || { categoryId: this.query.categoryId } + ) + this.dialogVisible = true + this.$nextTick(() => { + this.$refs['form'].clearValidate() + }) + break; + } // type || !data ? (this.disabled = false) : (this.disabled = true) }, // 素材提交 @@ -323,7 +332,7 @@ export default { 添加{{ typeTitle[type] }} diff --git a/linkwe-ui/src/views/material/components/PosterPage.vue b/linkwe-ui/src/views/material/components/PosterPage.vue new file mode 100644 index 000000000..664836707 --- /dev/null +++ b/linkwe-ui/src/views/material/components/PosterPage.vue @@ -0,0 +1,119 @@ + + diff --git a/linkwe-ui/src/views/material/poster.vue b/linkwe-ui/src/views/material/poster.vue index 44462bca2..c141e7735 100644 --- a/linkwe-ui/src/views/material/poster.vue +++ b/linkwe-ui/src/views/material/poster.vue @@ -1,10 +1,35 @@ diff --git a/linkwe-ui/src/views/material/poster.vue b/linkwe-ui/src/views/material/poster.vue index d9faa2c1b..632922786 100644 --- a/linkwe-ui/src/views/material/poster.vue +++ b/linkwe-ui/src/views/material/poster.vue @@ -29,9 +29,8 @@ export default { "tui-image-editor": PosterPage }, data () { - const bgPath = "" - return { + imgList: {}, dialog: { preview: false, // 预览弹出显示隐藏 edit: false // 编辑弹出显示隐藏 @@ -162,7 +161,7 @@ export default { try { const res = await getPosterInfo(item.id) const data = res.data || {} - console.log(data) + console.log('getPosterInfo',data) this.posterForm = { id: data.id, title: data.title, @@ -179,16 +178,56 @@ export default { ready () { console.log('ready') }, - checkState (obj) { - switch (obj.type) { - case 'text': - this.showSubMenu('text'); - this.activateTextMode(); - break; - default: - this.activateImageMode(); - break; + onAddText(pos) { + this.$refs.tuiImageEditor.editorInstance + .addText('双击输入文字', { + position: pos.originPosition, + }) + .then(function (objectProps) { + console.log(objectProps); + }); + }, + //移动 + onObjectMoved(res) { + console.log('onObjectMoved') + this.getRecord(res) + }, + //新增/选中 + objectActivated(obj) { + console.log('objectActivated') + var imageEditor = this.$refs.tuiImageEditor; + imageEditor.activeObjectId = obj.id; + if (obj.type === 'text') { + imageEditor.showSubMenu('text'); + imageEditor.setTextToolbar(obj); + imageEditor.activateTextMode(); + } + }, + //缩放 + onObjectScaled(obj) { + console.log('onObjectScaled') + // this.getRecord(res); + // this.checkState(); + if (obj.type === 'text') { + this.$refs.tuiImageEditor.inputFontSizeRange.setAttribute('value',obj.fontSize); + } + }, + //重做 + onRedoStackChanged(length) { + if (length) { + this.$refs.tuiImageEditor.btn_redo.remove('disabled'); + } else { + this.$refs.tuiImageEditor.btn_redo.add('disabled'); + } + this.$refs.tuiImageEditor.resizeEditor(); + }, + onUndoStackChanged(length) { + if (length) { + this.$refs.tuiImageEditor.btn_undo.classList.remove('disabled') + } else { + this.$refs.tuiImageEditor.btn_undo.classList.add('disabled') } + this.$refs.tuiImageEditor.resizeEditor(); }, showSubMenu (type) { switch (type) { @@ -206,6 +245,17 @@ export default { imageEditor.startDrawingMode('TEXT'); } }, + checkState (obj) { + switch (obj.type) { + case 'text': + this.showSubMenu('text'); + this.activateTextMode(); + break; + default: + this.activateImageMode(); + break; + } + }, activateImageMode () { let imageEditor = this.$refs.tuiImageEditor.editorInstance; imageEditor.stopDrawingMode(); @@ -239,37 +289,79 @@ export default { this.msgSuccess('删除成功') }) }, - inputFontSizeRangeChange () { - this.$refs.tuiImageEditor.inputFontSizeRangeChange(); + inputFontSizeRangeChange (e) { + this.$refs.tuiImageEditor.inputFontSizeRangeChange(e); + }, + getRecord(res){ + var flag = false; + if (this.records && this.records.length) { + for (let index = 0; index < this.records.length; index++) { + const element ={ + fill: this.records[index].fill, + height: this.records[index].height, + id: this.records[index].id, + left: this.records[index].left, + opacity: this.records[index].opacity, + stroke: this.records[index].stroke, + strokeWidth: this.records[index].strokeWidth, + top: this.records[index].top, + type: this.records[index].type, + width: this.records[index].width, + }; + if(element.id == res.id){ + // console.log(element) + this.records[index] = res; + flag = true; + } + } + } else { + this.records = []; + } + if(!flag){ + this.records.push(res) + } + }, + // FIXME 没写完 + async reShow (list) { + list = JSON.parse('[{"id":2,"type":"i-text","left":55.26947693665858,"top":180.32266601562497,"width":200,"height":45.199999999999996,"fill":"#000000","stroke":null,"strokeWidth":1,"opacity":1,"angle":0,"text":"请输入文字","fontFamily":"Times New Roman","fontSize":40,"fontStyle":"normal","textAlign":"left","fontWeight":"normal"},{"id":3,"type":"image","left":195.71660545226203,"top":506.3232314730081,"width":500,"height":500,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"opacity":1,"angle":0},{"id":4,"type":"image","left":373.102002853498,"top":190.44302690999768,"width":792,"height":792,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"opacity":1,"angle":0}]'); + let i = 0, len = list && list.length || 0 + for ( ; i { + let imageEditor = this.$refs.tuiImageEditor.editorInstance; + switch (obj.type) { + case 'i-text': + case 'text': + imageEditor. + addText(obj.text, { + position: { + x: obj.left, + y: obj.right + }, + }) + .then(function (objectProps) { + console.log(objectProps); + }); + break; + case 'image': + this.editorInstance.addImageObject(imgPath).then(objectProps => { + console.log(objectProps.id); + }).then(function (objectProps) { + console.log(objectProps); + }); + break; + } + }); }, // async save() { + let list =[]; try { - // const posterForm = this.posterForm - // console.log('save', posterForm.id) - // let res = {} - // if (posterForm.id) { - // // 编辑海报 - // res = await updatePoster(Object.assign({}, { - // backgroundImgPath: 'http://106.13.236.58:8080/profile/2020/12/31/5ca3fa0b-55d7-433c-ba02-61d4502e45e1.jpg', - // posterSubassemblyList: [] - // }, this.posterForm)) - // } else { - // // 新建海报 - // res = await addPoster(Object.assign({}, { - // backgroundImgPath: 'http://106.13.236.58:8080/profile/2020/12/31/5ca3fa0b-55d7-433c-ba02-61d4502e45e1.jpg', - // posterSubassemblyList: [] - // }, this.posterForm)) - // } - // if (res.code === 200) { - // this.msgSuccess(res.msg) - // this.$refs.page.getList(1) - // this.beforeCloseDialog() - // } - let imageEditor = this.$refs.tuiImageEditor; - let res = {}; - let list =[]; + let deleteId = []; imageEditor.editorInstance._invoker._undoStack.forEach(element => { if(element.name == "removeObject"){ @@ -286,10 +378,67 @@ export default { // const image = this.$refs.tuiImageEditor.editorInstance.toDataURL(); // res.url = image; - res.records = list; } catch (error) { console.log(error) } + + // TODO 塞新建海报的数据 + let posterSubList = []; + let i = 0, len = list.length; + while (i < len) { + let vo = list[i]; + let type = list[i].type; + let align = vo.textAlign && + (vo.textAlign === 'left' ? 1 : vo.textAlign === 'center' ? 2 : 3) + || null; + let isText = type === 'i-text' || type === 'text'; + let posData = { + id: vo.randomId || i, + content: vo.text || '', // 文本内容 + delFlag: 1, // 1 启动 0 删除 FIXME 暂时写死 + fontColor: vo.fill || '#000000', + fontId: isText ? i : null, // 字体ID 与imgPath互斥 + fontSize: vo.fontSize, + fontTextAlign: align, // 1 2 3 left center right + left: vo.left, + top: vo.top, + width: vo.width, + height: vo.height, + imgPath: vo.url || '', + posterId: null, + type: isText ? 1 : vo.objType, // 1 固定文本 2 固定图片 3 二维码图片 + alpha: vo.opacity, + fontStyle: (vo.italic && vo.bold) ? 3 : vo.italic ? 2 : vo.bold ? 1 : 0, // 0 通常 1 粗体 2 斜体 3 粗 + 斜 + rotate: vo.angle, + order: i, // 层级 + categoryId: 0, // 分类ID + verticalType: 2 // 居中方式 写死2 + }; + posterSubList.push(posData); + i++; + } + + const posterForm = this.posterForm + console.log('save', posterForm.id) + let res = {} + if (posterForm.id) { + // 编辑海报 + res = await updatePoster(Object.assign({}, { + backgroundImgPath: 'http://106.13.236.58:8080/profile/2020/12/31/5ca3fa0b-55d7-433c-ba02-61d4502e45e1.jpg', + posterSubassemblyList: [] + }, this.posterForm)) + } else { + // 新建海报 + res = await addPoster(Object.assign({}, { + backgroundImgPath: 'http://106.13.236.58:8080/profile/2020/12/31/5ca3fa0b-55d7-433c-ba02-61d4502e45e1.jpg', + posterSubassemblyList: posterSubList + }, this.posterForm)) + } + if (res.code === 200) { + this.msgSuccess(res.msg) + this.$refs.page.getList(1) + this.beforeCloseDialog() + } } }, } @@ -466,7 +615,7 @@ export default { -- Gitee