diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index 263889ac..233670aa 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -36,8 +36,8 @@
-
-
+
+
@@ -167,7 +167,7 @@ export default defineComponent({
document.removeEventListener('touchmove', touchmove);
let img = new Image();
- img.onload = function(){
+ img.onload = async function(){
loadingShow.value = true
let height = canvasBox.offsetHeight;
canvasWH.value = height
@@ -195,7 +195,7 @@ export default defineComponent({
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
- fabric.Image.fromURL(props.imgUrl, function(img) {
+ await fabric.Image.fromURL(props.imgUrl, async function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);
@@ -204,19 +204,19 @@ export default defineComponent({
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
- canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+ await canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
- updateCanvasState()
+ canvasGeneral.updateCanvasState()
},{ crossOrigin: "Anonymous" });
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
if(isMovePostion)isMovePostion = false
- if(canvasBtn.canvasState != 'move')updateCanvasState('mouseUp')
+ // if(canvasBtn.canvasState != 'move')canvasGeneral.updateCanvasState('mouseUp')
});
canvas.on("mouse:down", event=>setCanvasDown(event));
canvas.on('mouse:wheel', opt => {
@@ -248,28 +248,10 @@ 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
- document.removeEventListener("keydown", canvasKeyDown);
- document.removeEventListener("keyup", canvasKeyUp);
+ canvasGeneral.canvasClear()
}
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
@@ -526,28 +508,6 @@ export default defineComponent({
canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
}
}
- let updateCanvasState = (str) =>{
- if(str != 'mouseUp'){
- }
- const canvasAsJson = JSON.stringify(canvas.toJSON());
- normalCanvasState.value.push(canvasAsJson);
- }
- //撤回
- let historyState = (str)=> {
- if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
- let obj = reverseCanvasState.value.pop()
- // canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
- canvasState.value = obj
- normalCanvasState.value.push(obj);
- }else if(str == '' && normalCanvasState.value.length > 1){
- let obj = normalCanvasState.value.pop()
- canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
- reverseCanvasState.value.push(obj);
- }else{
- return
- }
- canvas.loadFromJSON(canvasState.value, () => {});
- }
let setSubmit = (liquefation)=>{
return new Promise((resolve,reject)=>{
var allObjects = canvas.getObjects();
@@ -625,8 +585,6 @@ export default defineComponent({
}
let cancelDsign = ()=>{
- document.removeEventListener('keydown',canvasKeyDown);
- document.removeEventListener('keyup', canvasKeyUp);
showPayOrder.value = false
}
let liquefactionData = ref(null)
@@ -651,7 +609,7 @@ export default defineComponent({
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
- updateCanvasState()
+ canvasGeneral.updateCanvasState()
},{ crossOrigin: "Anonymous" });
}
let setLiquefaction =async ()=>{
@@ -681,7 +639,6 @@ export default defineComponent({
setOperation,
setPencilWidth,
setPencilColor,
- historyState,
setSubmit,
cancelDsign,
submitLiquefaction,
@@ -690,6 +647,7 @@ export default defineComponent({
brushList,
brushworkValue,
brushworkChange,
+ canvasGeneral,
};
},
data() {
diff --git a/src/tool/canvasGeneral.js b/src/tool/canvasGeneral.js
index aef7b8db..85853c7d 100644
--- a/src/tool/canvasGeneral.js
+++ b/src/tool/canvasGeneral.js
@@ -103,7 +103,9 @@ class myCanvas {
document.addEventListener("keyup", this.canvasKeyUp);
initAligningGuidelines(this.canvas,true)
JSchangeType(this.canvas,'init')
- this.updateCanvasState('')
+ // this.canvas.on('mouse:up', function(event) {
+ // if(this.canvasState != 'move')this.updateCanvasState('')
+ // });
this.canvas.on("object:added", (event)=>{
if(!this.isLoadCanvas)this.updateCanvasState('')
});
@@ -234,7 +236,8 @@ class myCanvas {
}else{
return
}
- this.canvas.loadFromJSON(this.canvasState, () => {});
+ this.canvas.loadFromJSON(this.canvasState, () => {this.isLoadCanvas = false;});
+
}
}