From d85f9e528359034f5ec8a8485ef59dfff6b49725 Mon Sep 17 00:00:00 2001 From: channing Date: Sun, 21 Feb 2021 21:26:03 +0800 Subject: [PATCH 1/5] test_posterData --- linkwe-ui/src/api/material/poster.js | 1 + .../views/material/components/PosterPage.vue | 15 +++- linkwe-ui/src/views/material/poster.vue | 78 ++++++++++++++----- 3 files changed, 69 insertions(+), 25 deletions(-) diff --git a/linkwe-ui/src/api/material/poster.js b/linkwe-ui/src/api/material/poster.js index 722bc9aba..14f0a772d 100644 --- a/linkwe-ui/src/api/material/poster.js +++ b/linkwe-ui/src/api/material/poster.js @@ -23,6 +23,7 @@ export function updatePoster(data) { * @param {*} data */ export function addPoster(data) { + console.log(JSON.stringify(data)) return request({ url: serviceCategory + '/insert', method: 'post', data }) } diff --git a/linkwe-ui/src/views/material/components/PosterPage.vue b/linkwe-ui/src/views/material/components/PosterPage.vue index 814a902c5..e1f47bbc1 100644 --- a/linkwe-ui/src/views/material/components/PosterPage.vue +++ b/linkwe-ui/src/views/material/components/PosterPage.vue @@ -47,6 +47,9 @@ export default { if (this.includeUi) { options = Object.assign(includeUIOptions, this.options); } + if (this.editorInstance) { + console.log('this.editorInstance') + } this.editorInstance = new ImageEditor(this.$refs.tuiImageEditor, options); document.getElementsByClassName('tui-image-editor-header')[0].innerHTML = ''; @@ -67,6 +70,8 @@ export default { this.editorInstance.ui._actions.text.modeChange = function () {} document.getElementsByClassName('tui-image-editor-submenu')[0].style.display = 'none'; document.getElementsByClassName('tie-btn-text')[0].style.display = 'none'; + document.getElementsByClassName('tui-image-editor-main')[0].style.top = '0'; + document.getElementsByClassName('tui-image-editor-align-wrap')[0].style.verticalAlign = 'top'; this.initBtn(); this.addEventListener(); @@ -75,6 +80,7 @@ export default { // Object.keys(this.$listeners).forEach(eventName => { // this.editorInstance.off(eventName); // }); + console.log('deatory poster') this.editorInstance.destroy(); this.editorInstance = null; }, @@ -178,6 +184,7 @@ export default { redoStackChanged: this.onRedoStackChanged.bind(this), objectScaled: this.onObjectScaled.bind(this), addText: this.onAddText.bind(this), + textEditing: this.textEditing.bind(this), objectActivated: this.objectActivated.bind(this), objectMoved: this.onObjectMoved.bind(this) }); @@ -226,6 +233,10 @@ export default { target && (target.randomId = id); }.bind(this)); }, + // 文本改变事件 + textEditing (e) { + console.log('dsds', e) + }, //移动 onObjectMoved(obj) { console.log('onObjectMoved'); @@ -462,10 +473,6 @@ export default { } this.editorInstance.addImageObject(imgPath).then(objectProps => { let id = this.GenNonDuplicateID() + '_' + objectProps.id; - // this.$parent.imgList[id] = imgPath; // FIXME - // console.log(objectProps) - // console.log(this.$parent.records) - // let target = this.$parent.records[objectProps.id]; let target = {} // if (target) { diff --git a/linkwe-ui/src/views/material/poster.vue b/linkwe-ui/src/views/material/poster.vue index ffbdf2f97..abebafeac 100644 --- a/linkwe-ui/src/views/material/poster.vue +++ b/linkwe-ui/src/views/material/poster.vue @@ -32,7 +32,6 @@ export default { data () { return { imgList: {}, - imgData: [], dialogVisibleSelectMaterial: false, dialog: { preview: false, // 预览弹出显示隐藏 @@ -277,6 +276,13 @@ export default { } else { this.rangeErrorMsg = '' } + if (this.$refs.tuiImageEditor && this.$refs.tuiImageEditor.editorInstance) { + this.$refs.tuiImageEditor.editorInstance._invoker._redoStack = []; + this.$refs.tuiImageEditor.editorInstance._invoker._undoStack = []; + this.$refs.tuiImageEditor.records = {} + this.records = []; + this.imgList = {}; + } this.$refs.form.validate((valid) => { if (valid) { this.posterEdit.step = 1 @@ -375,10 +381,7 @@ export default { }, // 获取子组件传来的数据 getImgData(data) { - this.imgList.id = data.imgUrl - // console.log(data) - this.imgData.push(data) - // console.log(this.imgData) + this.imgList.id = data }, // 选择素材确认按钮 submitSelectMaterial(text, image, file) { @@ -393,13 +396,21 @@ export default { // async save() { let list =[]; + let historys = []; try { let imageEditor = this.$refs.tuiImageEditor; - - let deleteId = []; + let deleteId = []; imageEditor.editorInstance._invoker._undoStack.forEach(element => { if(element.name == "removeObject"){ - deleteId.push(element.args[1]) + deleteId.push(element.args[1]) + } + else + { + if (element.args[1] instanceof Array) { + historys.push(element.args[1][0]) + } else { + historys.push(element.args[1]) + } } }) Object.values(imageEditor.records).forEach(item => { @@ -418,23 +429,31 @@ export default { // TODO 塞新建海报的数据 let posterSubList = []; + let vo = null; let i = 0, len = list.length; while (i < len) { - let vo = list[i]; - if (!this.imgData[i]) { - console.log('this.imgData[i] is null') - i++; - continue; + vo = list[i]; + if (this.imgList[vo.id]) { + vo.objType = this.imgList[vo.id].objType; + vo.url = this.imgList[vo.id].url; + vo.randomId = this.imgList[vo.id].randomId } - vo.objType = this.imgData[i].objType; - vo.url = this.imgData[i].url; - vo.randomId = this.imgData[i].randomId; - // console.log(vo) - let type = list[i].type; + + let type = vo.type; + let isText = false; + if (type === 'i-text' || type === 'text') { + // 如果是文本需要对文字内容进行特殊处理 + isText = true; + let targetData = this.getLastSelectData(vo.id, historys); + if (targetData) { + vo.text = targetData.text; + } + } + 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 || '', // 文本内容 @@ -474,7 +493,6 @@ export default { } else { // 新建海报 res = await addPoster(Object.assign({}, { - // backgroundImgPath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2980445260,41238050&fm=26&gp=0.jpg', backgroundImgPath: this.materialSelected, posterSubassemblyList: posterSubList }, this.posterForm)) @@ -484,8 +502,26 @@ export default { this.$refs.page.getList(1) this.beforeCloseDialog() } + }, + getLastSelectData (id, arr) { + let index = arr.length - 1, len = 0; + let selectData = null; + try { + while (index >= len) { + // 类型转换对比 + if (arr[index].id == id) { + selectData = arr[index]; + break; + } + index --; + } + }catch (e) { + console.log('getLastSelectData 循环出错') + } + + return selectData; } - }, + } } -- Gitee From 15b11caf4bcb764ad3f8812e034cc9f01f9c9e5e Mon Sep 17 00:00:00 2001 From: channing Date: Sun, 21 Feb 2021 22:51:56 +0800 Subject: [PATCH 2/5] poster_reShowDisplay --- .../views/material/components/PosterPage.vue | 97 ++++++++++------- linkwe-ui/src/views/material/poster.vue | 103 ++++++------------ 2 files changed, 89 insertions(+), 111 deletions(-) diff --git a/linkwe-ui/src/views/material/components/PosterPage.vue b/linkwe-ui/src/views/material/components/PosterPage.vue index e1f47bbc1..4ff23f871 100644 --- a/linkwe-ui/src/views/material/components/PosterPage.vue +++ b/linkwe-ui/src/views/material/components/PosterPage.vue @@ -85,12 +85,55 @@ export default { this.editorInstance = null; }, methods: { + // 设置背景图片 getBackgroundUrl(bacUrl) { this.editorInstance.loadImageFromURL(bacUrl, 'imagePoster').then(async result => { console.log('old : ' + result.oldWidth + ', ' + result.oldHeight); console.log('new : ' + result.newWidth + ', ' + result.newHeight); - // await this.addImage('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2980445260,41238050&fm=26&gp=0.jpg') - // await this.addText('aloha'); + }); + }, + // 设置修改回显 + reShowDisplay (reShowDisplays) { + let i = 0,len = reShowDisplays.length; + let _data = null; + while (i < len) { + _data = reShowDisplays[i]; + _data && this.createReShowDisplay(_data); + i ++; + } + }, + // 1 固定文本 2 固定图片 3 二维码图片 + async createReShowDisplay(data) { + return Promise((resolve)=>{ + switch (data.type) { + case 1: + this.editorInstance. + addText(data.content, { + position: { + x: data.left, + y: data.top + }, + }) + .then(function (objectProps) { + console.log(objectProps); + resolve(); + }); + break; + case 2: + case 3: + this.editorInstance.addImageObject(data.imgPath).then(objectProps => { + console.log(objectProps.id); + }).then(function (objectProps) { + let target = {} + target.url = data.imgPath; + target.randomId = objectProps.id; + target.objType = data.type; + // 将图片数据传给父组件保存 + this.$emit('getImageData', target);console.log(objectProps); + resolve() + }); + break; + } }); }, initBtn () { @@ -227,10 +270,7 @@ export default { }) .then(function (objectProps) { console.log(objectProps); - this.records(objectProps) - let id = this.GenNonDuplicateID() + '_' + objectProps.id; - let target = this.$parent.records[objectProps.id]; - target && (target.randomId = id); + this.records(objectProps); }.bind(this)); }, // 文本改变事件 @@ -457,12 +497,9 @@ export default { }, getImages () { this.visible = true; // 显示图片列表dialog - // this.activateImageMode(); - // this.addImage('https://images.gitee.com/uploads/images/2020/1231/234016_20fdd151_1480777.png',2); }, // 提交选择的图片 getMaterial(text, image, file) { - // console.log(image.materialUrl) this.activateImageMode(); this.addImage(image.materialUrl, 2); this.visible = false; @@ -472,46 +509,22 @@ export default { throw Error("imgPath can't null") } this.editorInstance.addImageObject(imgPath).then(objectProps => { - let id = this.GenNonDuplicateID() + '_' + objectProps.id; let target = {} - // if (target) { - target.url = imgPath; - target.randomId = objectProps.id; - target.objType = type; - // } - this.$emit('getImageData', target); // 将图片数据传给父组件保存 + target.url = imgPath; + target.randomId = objectProps.id; + target.objType = type; + // 将图片数据传给父组件保存 + this.$emit('getImageData', target); }); }, addText (text, style = null, position = null) { - // return new Promise(function(resolve, reject) { - // !style && (style = { - // fill: '#000', - // fontSize: 20, - // fontWeight: 'bold' - // }) - // !position && (position = { - // x: 10, - // y: 10 - // }) - // this.activateTextMode(); - // this.editorInstance.addText( text, { - // style: style, - // position: position - // }).then(objectProps => { - // console.log(objectProps.id); - // resolve(objectProps); - // }); - // }.bind(this)); this.editorInstance .addText(text || '双击输入文字', { position: position, }) .then(function (objectProps) { console.log(objectProps); - let id = this.GenNonDuplicateID() + '_' + objectProps.id; - let target = this.$parent.records[objectProps.id]; - target && (target.randomId = id); }); }, activateImageMode () { @@ -542,10 +555,10 @@ export default { this.records[obj.id] = obj; } - }, - GenNonDuplicateID(randomLength){ - return parseFloat(Math.random().toString().substr(3,randomLength) + Date.now()).toString(36) - } + } + // GenNonDuplicateID(randomLength){ + // return parseFloat(Math.random().toString().substr(3,randomLength) + Date.now()).toString(36) + // } } }; diff --git a/linkwe-ui/src/views/material/poster.vue b/linkwe-ui/src/views/material/poster.vue index abebafeac..f0b91d3d5 100644 --- a/linkwe-ui/src/views/material/poster.vue +++ b/linkwe-ui/src/views/material/poster.vue @@ -1,6 +1,5 @@