diff --git a/linkwe-ui/src/api/material/poster.js b/linkwe-ui/src/api/material/poster.js
index 14f0a772d1aa7226d04a4369cc61daf57fb69228..752cda4143aa1097769eb7883572b835e51c96cd 100644
--- a/linkwe-ui/src/api/material/poster.js
+++ b/linkwe-ui/src/api/material/poster.js
@@ -15,6 +15,7 @@ export function getList(params) {
* @param {*} params
*/
export function updatePoster(data) {
+ console.log('poster change:', JSON.stringify(data))
return request({ url: serviceCategory + '/update', method: 'put', data })
}
@@ -23,7 +24,7 @@ export function updatePoster(data) {
* @param {*} data
*/
export function addPoster(data) {
- console.log(JSON.stringify(data))
+ console.log('poster add:', JSON.stringify(data))
return request({ url: serviceCategory + '/insert', method: 'post', data })
}
diff --git a/linkwe-ui/src/views/material/components/MaPage.vue b/linkwe-ui/src/views/material/components/MaPage.vue
index 28a10bb16f399b0658b7d22a8aac33d9579f71ec..7ee67b9c4211384bf927fe5464d5d501b445f82d 100644
--- a/linkwe-ui/src/views/material/components/MaPage.vue
+++ b/linkwe-ui/src/views/material/components/MaPage.vue
@@ -171,6 +171,8 @@ export default {
edit(data, type) {
switch (type) {
case 5:
+ // 清除编辑的数据
+ this.$parent.posterSubassemblyList = [];
this.$parent.posterEdit.step = 0
this.$parent.dialog.edit = true
break
diff --git a/linkwe-ui/src/views/material/components/PosterPage.vue b/linkwe-ui/src/views/material/components/PosterPage.vue
index 0ffb7e3c1aafe51ccfa8d4f38e7dd4acce70b639..43bd4ff27d60747701ef28ebe6863b7979610186 100644
--- a/linkwe-ui/src/views/material/components/PosterPage.vue
+++ b/linkwe-ui/src/views/material/components/PosterPage.vue
@@ -97,8 +97,8 @@ export default {
this.editorInstance.
addText('', {
position: {
- x: 0,
- y: 0
+ x: -100,
+ y: -100
},
})
.then(function (objectProps) {
@@ -124,13 +124,26 @@ export default {
}
i ++;
}
+ // fixme 有个bug，暂时在添加空的文本重制下状态
+ this.editorInstance.
+ addText('', {
+ position: {
+ x: -100,
+ y: -100
+ },
+ })
+
+ // 清楚状态
+ this.activateImageMode();
},
// 1 固定文本 2 固定图片 3 二维码图片
createReShowDisplay(data) {
return new Promise((resolve)=>{
switch (data.type) {
case 1:
+ this.showSubMenu('text');
this.activateTextMode();
+
this.editorInstance.
addText(data.content, {
position: {
@@ -139,38 +152,60 @@ export default {
},
})
.then(function (objectProps) {
- console.log(objectProps);
+ this.activeObjectId = objectProps.id;
+ objectProps.left = data.left;
+ objectProps.top = data.top;
+ objectProps.fontSize = data.fontSize;
+ objectProps.fill = data.fontColor;
+ objectProps.textAlign = data.textAlign;
+ this.getRecord(objectProps);
+
// 重置 TextStyle
this.editorInstance.changeTextStyle(objectProps.id, {
- fontSize: data.fontSize,
- fill: data.fontColor,
- textAlign: data.fontTextAlign === 1 ? 'left' :
+ fontSize: data.fontSize,
+ fill: data.fontColor,
+ textAlign: data.fontTextAlign === 1 ? 'left' :
data.fontTextAlign === 2 ? 'center' : 'right'
- });
- resolve();
- });
-
+ }).then(()=>{
+ resolve();
+ })
+ }.bind(this));
break;
case 2:
case 3:
- this.activateImageMode()
+ this.activateImageMode();
+
this.editorInstance.addImageObject(
data.type === 2 ? data.imgPath :
data.imgPath === this.qrCodeUrl ? qrCodeImage : data.imgPath
).then(objectProps => {
console.log(objectProps.id);
+ this.activeObjectId = objectProps.id;
+
let target = {}
- target.url = data.imgPath;
- target.randomId = objectProps.id;
- target.objType = data.type;
+ data.displayId = objectProps.id;
+ target.url = data.imgPath;
+ target.randomId = objectProps.id;
+ target.objType = data.type;
this.editorInstance.setObjectProperties(objectProps.id, {
- left: data.left,
- top: data.top
+ left: data.left + data.width / 2,
+ top: data.top + data.height / 2
+ }).then(()=>{
+ let obj = {
+ left: data.left + data.width / 2,
+ top: data.top + data.height / 2,
+ width: data.width,
+ height: data.height,
+ angle: data.rotate,
+ id: data.displayId
+ }
+ this.getRecord(obj);
+ resolve()
})
// 将图片数据传给父组件保存
- this.$emit('getImageData', target);console.log(objectProps);
- resolve()
+ this.$emit('getImageData', target);
+ console.log(objectProps);
});
break;
}
@@ -310,23 +345,24 @@ export default {
})
.then(function (objectProps) {
console.log(objectProps);
- this.records(objectProps);
+ this.getRecord(objectProps);
}.bind(this));
},
// 文本改变事件
textEditing (e) {
- console.log('dsds', e)
+ console.log('textEditing', e)
},
//移动
onObjectMoved(obj) {
- console.log('onObjectMoved');
+ console.log('onObjectMoved', JSON.stringify(obj));
this.getRecord(obj);
},
//新增/选中
objectActivated(obj) {
console.log('objectActivated');
+ // 第一次选中tui-image传过来的位置有问题，这里处理一下，如果之前有数据不使用选中的数据
this.activeObjectId = obj.id;
- this.getRecord(obj);
+ this.getRecord(obj, true);
if (obj.type === 'text' || obj.type === 'i-text') {
this.showSubMenu('text');
this.setTextToolbar(obj);
@@ -341,7 +377,12 @@ export default {
console.log('onObjectScaled')
this.getRecord(obj);
if (obj.type === 'text' || obj.type === 'i-text') {
- this.inputFontSizeRange.setAttribute('value',obj.fontSize);
+ let size = obj.fontSize;
+ size = size > 100 ? 100 : size < 10 ? 10 : size;
+ // this.editorInstance.changeTextStyle(this.activeObjectId, {
+ // fontSize: size
+ // });
+ this.inputFontSizeRange.value = size;
}
},
onRedoStackChanged(length) {
@@ -452,7 +493,7 @@ export default {
let fontSize = obj.fontSize;
let fontColor = obj.fill;
- this.inputFontSizeRange.setAttribute('value', fontSize);
+ this.inputFontSizeRange.value = fontSize;
this.textColorpicker.setColor(fontColor);
},
showSubMenu (type) {
@@ -470,9 +511,11 @@ export default {
this.displayingSubMenu = submenu;
},
inputFontSizeRangeChange () {
- let value = this.inputFontSizeRange.getAttribute('value');
+ console.log('inputFontSizeRangeChange')
+ let value = this.inputFontSizeRange.value;
if (this.activeObjectId) {
let size = parseInt(value, 10);
+ size = size > 100 ? 100 : size < 10 ? 10 : size;
this.editorInstance.changeTextStyle(this.activeObjectId, {
fontSize: size
});
@@ -570,8 +613,7 @@ export default {
});
},
activateImageMode () {
- let imageEditor = this.editorInstance;
- imageEditor.stopDrawingMode();
+ this.editorInstance.stopDrawingMode();
},
resizeEditor () {
let editor = document.getElementsByClassName('tui-image-editor')[0];
@@ -579,9 +621,13 @@ export default {
editor.style.height = window.getComputedStyle(container).maxHeight;
},
- getRecord(obj){
+ getRecord(obj, isSelect){
if (!this.records) this.records = {};
let vo = this.records[obj.id];
+
+ // 如果之前有数据且是选中传过来的数据，不接收
+ if (vo && isSelect) return;
+
if (vo) {
vo.left = obj.left;
vo.top = obj.top;
@@ -591,6 +637,8 @@ export default {
if (obj.type === 'text' || obj.type === 'i-text') {
vo.text = obj.text;
vo.fontSize = obj.fontSize;
+ vo.fill = obj.fontColor,
+ vo.textAlign = obj.textAlign
}
this.records[obj.id] = vo;
} else {
diff --git a/linkwe-ui/src/views/material/poster.vue b/linkwe-ui/src/views/material/poster.vue
index 85a1e83658aa35a42ca05fb0637d16ff1f71175b..3b52af1ea712247fad3671cfcc891b906b26b23a 100644
--- a/linkwe-ui/src/views/material/poster.vue
+++ b/linkwe-ui/src/views/material/poster.vue
@@ -166,6 +166,7 @@ export default {
this.dialog.preview = true
},
async edit (item) {
+ console.log('edit!!!!!!!')
try {
const res = await getPosterInfo(item.id)
const data = res.data || {}
@@ -177,6 +178,7 @@ export default {
type: data.type,
delFlag: data.delFlag,
}
+ this.posterSubassemblyList = [];
this.posterSubassemblyList = data.posterSubassemblyList || [];
this.materialSelected = data.backgroundImgPath
this.posterEdit.step = 0
@@ -311,7 +313,7 @@ export default {
})
},
inputFontSizeRangeChange (e) {
- this.$refs.tuiImageEditor.inputFontSizeRangeChange(e);
+ this.$refs.tuiImageEditor.inputFontSizeRangeChange();
},
// getRecord(res){
// var flag = false;
@@ -397,9 +399,9 @@ export default {
while (i < len) {
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.imgList[vo.id].objType;
+ vo.url = this.imgList[vo.id].url;
+ vo.randomId = this.imgList[vo.id].randomId
}
let type = vo.type;
@@ -408,36 +410,40 @@ export default {
// 如果是文本需要对文字内容进行特殊处理
isText = true;
let targetData = this.getLastSelectData(vo.id, historys);
- if (targetData) {
- vo.text = targetData.text;
+ vo.text = targetData && targetData.text || vo.text || '';
+
+ // 如果文本没有数据则移除
+ if (!vo.text.length) {
+ i++;
+ continue;
}
}
let align = vo.textAlign &&
(vo.textAlign === 'left' ? 1 : vo.textAlign === 'center' ? 2 : 3)
- || null;
+ || 1;
let posData = {
- id: vo.randomId || i,
- content: vo.text || '', // 文本内容
- delFlag: 0, // 1 启动 0 删除 FIXME 暂时写死
- fontColor: vo.fill || '#000000', //
- fontId: null,// TODO 后端让传NULL isText ? i : null, // 字体ID 与imgPath互斥
- fontSize: vo.fontSize,
- fontTextAlign: align, // 1 2 3 left center right
- left: parseInt(vo.left),
- top: parseInt(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
+ id: null, // 修改的时候后端默认没增删，沟通后让先传null
+ content: vo.text || '', // 文本内容
+ delFlag: 0, // 1 启动 0 删除 FIXME 暂时写死
+ fontColor: vo.fill || '#000000',
+ fontId: null, // TODO 后端让传NULL isText ? i : null, // 字体ID 与imgPath互斥
+ fontSize: parseInt(vo.fontSize),
+ fontTextAlign: align, // 1 2 3 left center right
+ left: parseInt(vo.left) - (isText ? 0 : vo.width >> 1), // FIXME：显示偏移了
+ top: parseInt(vo.top) - (isText ? 0 : vo.height >> 1),
+ width: Math.ceil(vo.width + vo.fontSize / 2),
+ height: parseInt(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++;
@@ -677,7 +683,7 @@ export default {