.

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

@@ -146,7 +146,11 @@ export default class UIControl {
       case "upload":
         if(type == VectorType.CustomImage){
           customImageService.setCustomImageUrl(value.url);
-          stateService.setEventName(LayerEvents.AddCustomImage);
+          customImageService.createCustomImage({
+            x:0,
+            y:0
+          })
+          stateService.setEventName(LayerEvents.MoveCustomImage);
         }  
         break;
     }
@@ -214,16 +218,16 @@ export default class UIControl {
         }
         value = compass.angle;
         break;
-      case VectorType.CustomImage:
-        const customImage = floorplanService.getCustomImage(item.vectorId);
-        if (!customImage) {
-          return;
-        }
-        value = {
-            version:'2.0',
-            url: customImage.url,
-        };
-        break;
+      // case VectorType.CustomImage:
+      //   const customImage = floorplanService.getCustomImage(item.vectorId);
+      //   if (!customImage) {
+      //     return;
+      //   }
+      //   value = {
+      //       version:'2.0',
+      //       url: customImage.url,
+      //   };
+      //   break;
     }
     this.bus.emit("showAttribute", {
       type: type,

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

@@ -518,24 +518,24 @@ export default class Layer {
           mathUtil.clonePoint(sign.center, position);
         }
         break;
-      case LayerEvents.AddCustomImage:
-        needAutoRedraw = true;
-        if (draggingItem == null) {
-          const customImage = customImageService.createCustomImage(position)
-          if (customImage.vectorId) {
-            stateService.setSelectItem(
-              customImage.vectorId,
-              VectorType.CustomImage,
-              SelectState.All
-            );
-            stateService.setDraggingItem(stateService.selectItem);
-          }
-        } else {
-          moveCustomImage.moveFullCustomImage(dx, dy, draggingItem.vectorId);
-        }
-        this.lastX = X;
-        this.lastY = Y;
-        break;
+      // case LayerEvents.AddCustomImage:
+      //   needAutoRedraw = true;
+      //   if (draggingItem == null) {
+      //     const customImage = customImageService.createCustomImage(position)
+      //     if (customImage.vectorId) {
+      //       stateService.setSelectItem(
+      //         customImage.vectorId,
+      //         VectorType.CustomImage,
+      //         SelectState.All
+      //       );
+      //       stateService.setDraggingItem(stateService.selectItem);
+      //     }
+      //   } else {
+      //     moveCustomImage.moveFullCustomImage(dx, dy, draggingItem.vectorId);
+      //   }
+      //   this.lastX = X;
+      //   this.lastY = Y;
+      //   break;
       case LayerEvents.MoveCustomImage:
         needAutoRedraw = true;
         if (draggingItem != null) {
@@ -954,9 +954,10 @@ export default class Layer {
         stateService.setEventName(LayerEvents.AddingArrow);
       } else if (eventName == LayerEvents.AddTable) {
         stateService.clearEventName();
-      } else if (eventName == LayerEvents.AddCustomImage) {
-        stateService.clearEventName();
-      }
+      } 
+      // else if (eventName == LayerEvents.AddCustomImage) {
+      //   stateService.clearEventName();
+      // }
       else if (
         eventName != LayerEvents.AddWall &&
         eventName != LayerEvents.AddingWall
@@ -995,13 +996,14 @@ export default class Layer {
           floorplanService.deleteSign(draggingItem.vectorId);
           stateService.clearItems();
         }
-      } else if (eventName == LayerEvents.AddCustomImage) {
-        if (draggingItem && draggingItem.vectorId) {
-          customImageService.deleteCustomImage(draggingItem.vectorId);
-          this.uiControl.clearUI();
-          stateService.clearItems();
-        }
-      }
+      } 
+      // else if (eventName == LayerEvents.AddCustomImage) {
+      //   if (draggingItem && draggingItem.vectorId) {
+      //     customImageService.deleteCustomImage(draggingItem.vectorId);
+      //     this.uiControl.clearUI();
+      //     stateService.clearItems();
+      //   }
+      // }
     } else {
       stateService.setEventName(LayerEvents.AddWall);
     }

src/view/case/draw/board/editCAD/Renderer/Draw.js

@@ -848,28 +848,24 @@ export default class Draw {
 
     drawCustomImage(geometry){
         if(geometry.url != null){
-            const pt = {
-                x:30,
-                y:150
-            }
-
+            const pt = coordinate.getScreenXY(geometry.center)
             this.context.save()
             if(geometry.image == null)
             {
                 var img = new Image()
-                img.url = geometry.url;
+                img.src = geometry.url;
                 img.crossOrigin=""
                 img.onload = function () {
-                    this.context.drawImage(img, pt.x, pt.y, img.width, img.height)
+                    this.context.drawImage(img, pt.x-img.width/2, pt.y-img.height/2, img.width, img.height)
                 }.bind(this)
                 geometry.image = img;
             }
             else{
                 if(geometry.hasOwnProperty('width')){
-                    this.context.drawImage(geometry.image, pt.x, pt.y, geometry.width, geometry.height)
+                    this.context.drawImage(geometry.image, pt.x-geometry.width/2, pt.y-geometry.height/2, geometry.width, geometry.height)
                 }
                 else{
-                    this.context.drawImage(geometry.image, pt.x, pt.y, geometry.image.width, geometry.image.height)
+                    this.context.drawImage(geometry.image, pt.x-geometry.width/2, pt.y-geometry.height/2, geometry.image.width, geometry.image.height)
                 }
                 
             }

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

@@ -13,8 +13,15 @@ export default class CustomImageService {
         this.url = url;
     }
 
-    createCustomImage(center,vectorId) {
+    async createCustomImage(center,vectorId) {
         const customImage = new CustomImage(this.url, center,vectorId)
+        if(this.url){
+            const imageData = await floorplanService.loadImageData(this.url)
+            customImage.setImageData(imageData)
+            customImage.width = imageData.width;
+            customImage.height = imageData.height;
+        }
+
         floorplanService.addCustomImage(customImage)
         this.url = null;
         return customImage