![]()
diff --git a/src/component/Detail/addDetails.vue b/src/component/Detail/addDetails.vue
index a32d9af1..106ee370 100644
--- a/src/component/Detail/addDetails.vue
+++ b/src/component/Detail/addDetails.vue
@@ -89,6 +89,7 @@ export default defineComponent({
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
+ let keyDown = []//监听键盘的 keydown 和 keyup 事件
let init = (data,index)=>{
normalCanvasState.value = []
reverseCanvasState.value = []
@@ -103,6 +104,10 @@ export default defineComponent({
canvasBox.style.width = height+'px'
canvasWH.value = height
var canvasDom = document.createElement("canvas");
+ document.addEventListener("keydown", canvasKeyDown);
+ document.addEventListener("keyup", canvasKeyUp);
+
+
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
if(oldCanvasDom)oldCanvasDom.remove()
canvasBox.appendChild(canvasDom);
@@ -128,12 +133,7 @@ export default defineComponent({
scale = img.height/canvas.height
JSchangeType(canvas,'init')
- // 鼠标抬起事件
- canvas.on('mouse:up', function(event) {
- if(canvasBtn.canvasState != 'move'){
- updateCanvasState()
- }
- });
+
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.path
@@ -150,11 +150,17 @@ export default defineComponent({
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
updateCanvasState()
-
- // img.selectable = false
- // canvas.add(img)
},{ crossOrigin: "Anonymous" });
-
+ // 鼠标抬起事件
+ canvas.on('mouse:up', function(event) {
+ if(canvasBtn.canvasState != 'move'){
+ updateCanvasState('mouseUp')
+ }
+ });
+
+ //画布上移动
+ canvas.on("mouse:move", event =>setCanvasMove(event));
+ canvas.add(brushIndicator)
loadingShow.value = false
setOperation('pencil')
img.remove()
@@ -163,23 +169,58 @@ export default defineComponent({
})
}
+ let canvasKeyDown = (event) => {
+ if(keyDown.indexOf(event.key)>-1){
+ }else{
+ keyDown.push(event.code)
+ if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
+ historyState('reverse')
+ }else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
+ historyState('')
+ }
+ }
+ }
+ let canvasKeyUp = (event) =>{
+ keyDown = keyDown.filter(function(item) {
+ return event.code !== item;
+ })
+ }
let clearCanvas = ()=>{
canvasBtn.canvasState = 'move'
canvasBtn.spreadState = false
}
let rgba = 'rgba(0, 0, 0, 1)'
let brushIndicator = new fabric.Circle({
- radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]/2),
- fill: '#fff',
+ radius:2,
+ fill: 'rgba(0, 0, 0, 0)',
stroke: '#000',
strokeWidth: 1,
originX: 'center',
originY: 'center',
visible :true,
- left: -100,
- top: -100,
+ // left: -100,
+ // top: -100,
erasable: false,
});
+
+ let setCanvasMove = (event)=>{
+ var pointer = canvas.getPointer(event.e);
+ if(canvas.isDrawingMode){
+ canvas.setCursor('none');
+ console.log(12,canvas.contains(brushIndicator));
+ if(!canvas.contains(brushIndicator)){
+ canvas.add(brushIndicator)
+ brushIndicator.set({// left:0,
+ // top:0,
+ radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2
+ })
+ canvas.bringToFront(brushIndicator);//设置优先级最高
+ }
+ // brushIndicator.fill = canvasPencilColor.value
+ brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
+ }
+ canvas.requestRenderAll()
+ }
let setOperation = (str)=>{
canvasBtn.canvasState = str
if(str == 'move'){
@@ -237,9 +278,12 @@ export default defineComponent({
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
},300)
}
- let updateCanvasState = () =>{
- const canvasAsJson = JSON.stringify(canvas.toJSON());
- normalCanvasState.value.push(canvasAsJson);
+ let updateCanvasState = (str) =>{
+ if(str != 'mouseUp'){
+ canvas.remove(brushIndicator)
+ }
+ const canvasAsJson = JSON.stringify(canvas.toJSON());
+ normalCanvasState.value.push(canvasAsJson);
}
//撤回
let historyState = (str)=> {
@@ -295,17 +339,20 @@ export default defineComponent({
exportCanvas.add(obj)
if(allObjects.length-1 == index){
let data = exportCanvas.toDataURL('jpg')
- showPayOrder.value = false;
+ cancelDsign()
clearCanvas()
emit('setSloganData',data)
}
})
})
-
-
}
-
+ let cancelDsign = ()=>{
+ canvas.dispose();
+ showPayOrder.value = false
+ document.removeEventListener('keydown',canvasKeyDown);
+ document.removeEventListener('keyup', canvasKeyUp);
+ }
return {
presentState,
showPayOrder,
@@ -317,6 +364,7 @@ export default defineComponent({
setPencilWidth,
historyState,
setSubmit,
+ cancelDsign,
};
},
data() {
@@ -326,10 +374,6 @@ export default defineComponent({
mounted() {},
methods: {
-
- cancelDsign(){
- this.showPayOrder = false
- }
},
});
diff --git a/src/component/Detail/habit.vue b/src/component/Detail/habit.vue
index d4d3adf9..2840c04c 100644
--- a/src/component/Detail/habit.vue
+++ b/src/component/Detail/habit.vue
@@ -461,6 +461,7 @@ export default defineComponent({
})
resolve('')
})
+ this.store.commit("setWorkspaceAllPosition", [...this.position[0].value,...this.position[1].value]);
// this.getworkspace()
// this.setPosition('')
},
diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue
index ed9648ee..e8699903 100644
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -104,6 +104,7 @@
+
{{$t('ColorboardUpload.SelectSuccessively')}}
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index e9fbc819..bd3f137e 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -376,7 +376,7 @@ export default defineComponent({
likeDesignCollectionList;
allBoardData.value[productData.key] = productData.imgList;
nextTick().then(async () => {
- let exportCanvasBoxCanvas = document.querySelector('.exportCanvasBox_center')
+ let exportCanvasBoxCanvas = document.querySelector('.Export .exportCanvasBox_center')
canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
let canvasBox = document.querySelector(
@@ -647,25 +647,33 @@ export default defineComponent({
// data
let imgId = 0
let minioUrl = ''//表示收藏或者generate
- if(key == 'likeDesignCollectionList'){
- imgId = data.designOutfitId
- minioUrl = data.url
- }else if(key == 'upImgFiles'){
- imgId = data
- minioUrl = data.url
- }else if(key == 'FinalizeImage'){
- imgId = data.id
- let url = data.imgUrl.split('?')[0]
- var match = url.match(/:(\d+)\/(.*)/);
- minioUrl = match[2]
- }else if(key == 'disposeMoodboard'){
- let url = data.imgUrl.split('?')[0]
- var match = url.match(/:(\d+)\/(.*)/);
- minioUrl = match[2]
- // data.imgUrl
- }else{
- minioUrl = data.minIOPath?data.minIOPath:data.resData.minIOPath
+ // if(key == 'likeDesignCollectionList'){
+ // imgId = data.designOutfitId
+ // minioUrl = data.url
+ // }else if(key == 'upImgFiles'){
+ // imgId = data
+ // minioUrl = data.url
+ // }else if(key == 'FinalizeImage'){
+ // imgId = data.id
+ // let url = data.imgUrl.split('?')[0]
+ // var match = url.match(/:(\d+)\/(.*)/);
+ // minioUrl = match[2]
+ // }else if(key == 'disposeMoodboard'){
+ // let url = data.imgUrl.split('?')[0]
+ // var match = url.match(/:(\d+)\/(.*)/);
+ // minioUrl = match[2]
+ // // data.imgUrl
+ // }else{
+ // minioUrl = data.minIOPath?data.minIOPath:data.resData.minIOPath
+ // }
+ let imgUrl = data.imgUrl
+ if (key == "likeDesignCollectionList") {
+ imgUrl = data.designOutfitUrl;
}
+ console.log(data);
+ let url = imgUrl.split('?')[0]
+ var match = url.match(/:(\d+)\/(.*)/);
+ minioUrl = match[2]
// let id =
let proportion = img.height / img.width; //计算图形宽高比例
let imgWidth = setImageWidth(key)
@@ -830,6 +838,7 @@ export default defineComponent({
centered:true,
onOk() {
showUpgradePlan.value = false;
+ canvas.dispose();
position = {
//设置每个图形位置的初始值
x: 0,
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index 1aff76aa..3a873c75 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -55,7 +55,7 @@
@keydown.enter="getgenerate()"
@click="inputFocus()"
/>
-
+
-
+