修复背景图片异步加载的bug

src/view/case/draw/board/editCAD/Controls/UIControl.js

@@ -87,7 +87,7 @@ export default class UIControl{
      * @param {*} name 属性名称
      * @param {*} value 属性值
      */
-    setAttributes(type, name, value) {
+    async setAttributes(type, name, value) {
         let item = stateService.getFocusItem()
         switch (name) {
             case 'delete':
@@ -106,7 +106,7 @@ export default class UIControl{
                     floorplanService.updateTitle(value);
                 }
                 else if(type == VectorType.BgImage){
-                    floorplanService.updateBgImage(value,this.layer);
+                    await floorplanService.updateBgImage(value);
                 }
                 else if(type == VectorType.Compass){
                     floorplanService.updateCompass(value);

src/view/case/draw/board/editCAD/Geometry/BgImage.js

@@ -12,15 +12,11 @@ export default class BgImage extends Geometry {
         this.setId(vectorId)
     }
 
-    setSrc(src,layer){
-        console.log(src)
-        this.src = src
-        var img = new Image()
-        img.src = src;
-        img.crossOrigin=""
-        img.onload = function () {
-            this.image = img;
-            layer.renderer.autoRedraw()
-        }.bind(this)
+    setImageData(imgData){
+        this.image = imgData;
+    }
+
+    setSrc(src){
+        this.src = src;
     }
 }

src/view/case/draw/board/editCAD/Layer.js

@@ -55,10 +55,12 @@ export default class Layer {
   start(canvas, vectorData) {
     coordinate.init(canvas);
     this.canvas = canvas;
-    this.load.load(vectorData);
     draw.initContext(this.canvas);
     this.bindEvents();
-    this.renderer.autoRedraw();
+    this.load.load(vectorData).then(() => {
+      //。。。
+      this.renderer.autoRedraw();
+    })
   }
 
   bindEvents() {

src/view/case/draw/board/editCAD/Load.js

@@ -18,7 +18,7 @@ export default class Load {
         this.newVectorId = null
     }
 
-    load(floorsData) {
+    async load(floorsData) {
         if(!floorsData||!floorsData.floors){
             floorplanService.initFloor(0)
             //添加标题
@@ -30,6 +30,8 @@ export default class Load {
             //添加背景图片
             const bgImage = floorplanService.createBgImage()
             floorplanService.addBgImage(bgImage)
+            const imageData = await floorplanService.loadImageData(bgImage.src)
+            bgImage.setImageData(imageData)
             return;
         }
         floorplanService.setCurrentId(floorsData.currentId)
@@ -93,11 +95,14 @@ export default class Load {
 
             const bgImage = floorplanService.createBgImage(floor.image.src, floor.image.vectorId, i)
             floorplanService.addBgImage(bgImage)
+            const imageData = await floorplanService.loadImageData(bgImage.src)
+            bgImage.setImageData(imageData)
 
             const compass = floorplanService.createCompass(floor.compass.angle, floor.compass.vectorId, i)
             floorplanService.addCompass(compass)
+            
+  
         }
     }
 
-  
 }

src/view/case/draw/board/editCAD/Service/FloorplanService.js

@@ -442,13 +442,12 @@ export class FloorplanService {
         floorplanData.floors[floor].image = image
     }
 
-    updateBgImage(value,layer){
-        // if (floor == null || typeof floor == 'undefined') {
-        //     floor = this.currentFloor
-        // }
+    async updateBgImage(src){
         const floor = this.currentFloor
         const img = floorplanData.floors[floor].image
-        img.setSrc(value,layer)
+        img.setSrc(src)
+        const imageData = await floorplanService.loadImageData(img.src)
+        img.setImageData(imageData)
     }
 
     getBgImage(floor) {
@@ -488,6 +487,18 @@ export class FloorplanService {
         }
         return floorplanData.floors[floor].compass
     }
+
+    async loadImageData(src){
+        const imageData = await new Promise((resolve, reject) => {
+            var img = new Image()
+            img.src = src;
+            img.crossOrigin=""
+            img.onload = function () {
+                resolve(img)
+            }.bind(this)
+        })
+        return imageData
+    }
 }
 
 const floorplanService = new FloorplanService()