。

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

@@ -12,8 +12,8 @@ export default class MoveBgImage {
         let bgImage = floorplanService.getBgImage()
         if(bgImage){
             bgImage.center = {
-                x:bgImage.center.x + dx/coordinate.res * Constant.defaultZoom/coordinate.zoom,
-                y:bgImage.center.y - dy/coordinate.res * Constant.defaultZoom/coordinate.zoom,
+                x:bgImage.center.x + dx * Constant.defaultZoom/coordinate.zoom,
+                y:bgImage.center.y + dy * Constant.defaultZoom/coordinate.zoom,
             }
         }
     }

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

@@ -162,7 +162,7 @@ export default class UIControl {
         else if(type == VectorType.BgImage){
           const bgImage = floorplanService.getBgImage()
           if(value.hasOwnProperty('scale')){
-            bgImage.setScale(bgImage.scale)
+            bgImage.setScale(value.scale)
             flag = value.save
           }
         }
@@ -185,7 +185,7 @@ export default class UIControl {
             x:0,
             y:0
           })
-          stateService.setEventName(LayerEvents.MoveCustomImage);
+          //stateService.setEventName(LayerEvents.MoveCustomImage);
           let focusItem = {
             vectorId: customImage.vectorId,
             type: VectorType.CustomImage,
@@ -196,7 +196,7 @@ export default class UIControl {
         else if(type == VectorType.BgImage){
           bgImageService.setBgImageUrl(value.url);
           const bgImage = await bgImageService.createBgImage()
-          stateService.setEventName(LayerEvents.MoveBgImage);
+          //stateService.setEventName(LayerEvents.MoveBgImage);
           let focusItem = {
             vectorId: bgImage.vectorId,
             type: VectorType.BgImage,

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

@@ -1,12 +1,15 @@
 import VectorType from '../enum/VectorType.js'
 import Geometry from './Geometry'
+import { mathUtil } from '../MathUtil.js'
+import SelectState from '../enum/SelectState.js'
+import { coordinate } from '../Coordinate.js'
 
 export default class BgImage extends Geometry {
     constructor(url,center,vectorId) {
         super()
         this.url = url;
         if(center){
-            this.center = center
+            this.center = center    //左上角
         }else{
             this.center = {
                 x:80,
@@ -31,10 +34,15 @@ export default class BgImage extends Geometry {
         this.url = url;
     }
 
+    setScale(scale){
+        this.scale = scale;
+    }
+
     isContain(position) {
+
         let p0 = {
-            x:this.center.x - this.width*this.scale,
-            y:this.center.y + this.height*this.scale
+            x:this.center.x,
+            y:this.center.y
         }
 
         let p1 = {
@@ -43,24 +51,22 @@ export default class BgImage extends Geometry {
         }
 
         let p2 = {
-            x:this.center.x,
-            y:this.center.y
+            x:this.center.x + this.width*this.scale,
+            y:this.center.y + this.height*this.scale
         }
 
         let p3 = {
-            x:this.center.x- this.width*this.scale,
+            x:this.center.x + this.width*this.scale,
             y:this.center.y
         }
-        let center = {
-            x:this.center.x - this.width/2*this.scale,
-            y:this.center.y + this.height/2*this.scale
-        }
+        
+        position = coordinate.getScreenXY(position);
 
         this.points = [];
         this.points.push(p0)
-        this.points.push(p3)
-        this.points.push(p2)
         this.points.push(p1)
+        this.points.push(p2)
+        this.points.push(p3)
         if(mathUtil.isPointInPoly(position, this.points)){
             return SelectState.Select
         }else {

src/view/case/draw/board/editCAD/History/Change.js

@@ -547,7 +547,10 @@ export default class Change {
     const bgImage = floorplanService.getBgImage();
     const lastBgImage = this.lastData.bgImage;
     let item = {};
-    if (!lastBgImage&&bgImage) {
+    if (!lastBgImage&&!bgImage) {
+      return;
+    }
+    else if (!lastBgImage&&bgImage) {
       item = {
         handle: HistoryEvents.AddBgImage,
         bgImage: historyUtil.getDataForBgImage(bgImage),

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

@@ -87,7 +87,7 @@ export default class History {
     }
 
     // 撤销
-    handleUndo() {
+    async handleUndo() {
         this.goPreState()
         this.layer.renderer.autoRedraw()
         const historyState = historyService.getHistoryState()
@@ -104,7 +104,7 @@ export default class History {
     }
 
     // 恢复
-    handleRedo() {
+    async handleRedo() {
         this.goNextState()
         this.layer.renderer.autoRedraw()
         const historyState = historyService.getHistoryState()
@@ -121,7 +121,7 @@ export default class History {
     }
    
     // 撤销
-    goPreState() {
+    async goPreState() {
         const item = historyService.getHistoryRecord()
         if (item) {
             stateService.clearItems()
@@ -141,9 +141,9 @@ export default class History {
             this.goPreForSigns(item.signs)
 
             this.goPreForTitle(item.title)
-            this.goPreForBgImage (item.bgImage)
+            await this.goPreForBgImage (item.bgImage)
             this.goPreForCompass(item.compass)
-            this.goPreForCustomImages(item.customImages)
+            await this.goPreForCustomImages(item.customImages)
 
             historyService.undoHistoryRecord()
             change.saveCurrentInfo()
@@ -331,16 +331,18 @@ export default class History {
         }
     }
 
-    goPreForBgImage(itemForBgImage) {
-        if (itemForBgImage.handle == HistoryEvents.AddBgImage) {    
-            bgImageService.deleteBgImage()
-        } else if (itemForBgImage.handle == HistoryEvents.DeleteBgImage) {
-            let newBgImage = bgImageService.createBgImage(null,itemForBgImage.bgImage.id)
-            historyUtil.assignBgImageFromBgImage(newBgImage, itemForBgImage.bgImage)
-        } else if (itemForBgImage.handle == HistoryEvents.ModifyBgImage) {
-            const preBgImage = itemForBgImage.preBgImage
-            let curBgImage = floorplanService.getBgImage(itemForBgImage.curBgImage.id)
-            historyUtil.assignBgImageFromBgImage(curBgImage, preBgImage)
+    async goPreForBgImage(itemForBgImage) {
+        if(itemForBgImage){
+            if (itemForBgImage.handle == HistoryEvents.AddBgImage) {    
+                bgImageService.deleteBgImage()
+            } else if (itemForBgImage.handle == HistoryEvents.DeleteBgImage) {
+                let newBgImage = await bgImageService.createBgImage(null,itemForBgImage.bgImage.id)
+                historyUtil.assignBgImageFromBgImage(newBgImage, itemForBgImage.bgImage)
+            } else if (itemForBgImage.handle == HistoryEvents.ModifyBgImage) {
+                const preBgImage = itemForBgImage.preBgImage
+                let curBgImage = floorplanService.getBgImage(itemForBgImage.curBgImage.id)
+                historyUtil.assignBgImageFromBgImage(curBgImage, preBgImage)
+            }
         }
     }
 
@@ -352,13 +354,13 @@ export default class History {
         }
     }
 
-    goPreForCustomImages(itemForCustomImages) {
+    async goPreForCustomImages(itemForCustomImages) {
         for (let i = 0; i < itemForCustomImages.length; ++i) {
             const item = itemForCustomImages[i]
             if (item.handle == HistoryEvents.AddCustomImage) {  
                 customImageService.deleteCustomImage(item.customImage.id)
             } else if (item.handle == HistoryEvents.DeleteCustomImage) {
-                let newCustomImage = customImageService.createCustomImage(item.customImage.center,item.customImage.id)
+                let newCustomImage = await customImageService.createCustomImage(item.customImage.center,item.customImage.id)
                 historyUtil.assignCustomImageFromCustomImage(newCustomImage, item.customImage)
             } else if (item.handle == HistoryEvents.ModifyCustomImage) {
                 const preCustomImage = item.preCustomImage
@@ -537,17 +539,20 @@ export default class History {
         }
     }
 
-    goNextForBgImage(itemForBgImage) {
-        if (itemForBgImage.handle == HistoryEvents.AddBgImage) {
-            let vBgImage = bgImageService.createBgImage(itemForBgImage.bgImage.center, itemForBgImage.bgImage.vectorId)
-            historyUtil.assignBgImageFromBgImage(vBgImage, itemForBgImage.bgImage)
-        } else if (itemForBgImage.handle == HistoryEvents.DeleteBgImage) {
-            floorplanService.deleteBgImage(itemForBgImage.bgImage.id)
-        } else if (itemForBgImage.handle == HistoryEvents.ModifyBgImage) {
-            const currentBgImage = itemForBgImage.curBgImage
-            let preBgImage = floorplanService.getBgImage(itemForBgImage.currentBgImage.id)
-            historyUtil.assignBgImageFromBgImage(preBgImage, currentBgImage)
+    async goNextForBgImage(itemForBgImage) {
+        if(itemForBgImage){
+            if (itemForBgImage.handle == HistoryEvents.AddBgImage) {
+                let vBgImage = await bgImageService.createBgImage(itemForBgImage.bgImage.center, itemForBgImage.bgImage.id)
+                historyUtil.assignBgImageFromBgImage(vBgImage, itemForBgImage.bgImage)
+            } else if (itemForBgImage.handle == HistoryEvents.DeleteBgImage) {
+                floorplanService.deleteBgImage(itemForBgImage.bgImage.id)
+            } else if (itemForBgImage.handle == HistoryEvents.ModifyBgImage) {
+                const currentBgImage = itemForBgImage.curBgImage
+                let preBgImage = floorplanService.getBgImage(itemForBgImage.curBgImage.id)
+                historyUtil.assignBgImageFromBgImage(preBgImage, currentBgImage)
+            }
         }
+
     }
 
     goNextForCompass(itemForCompass) {
@@ -558,11 +563,11 @@ export default class History {
         }
     }
 
-    goNextForCustomImages(itemForCustomImages) {
+    async goNextForCustomImages(itemForCustomImages) {
         for (let i = 0; i < itemForCustomImages.length; ++i) {
             const item = itemForCustomImages[i]
             if (item.handle == HistoryEvents.AddCustomImage) {
-                let vCustomImage = customImageService.createCustomImage(item.customImage.center, item.customImage.vectorId)
+                let vCustomImage = await customImageService.createCustomImage(item.customImage.center, item.customImage.vectorId)
                 historyUtil.assignCustomImageFromCustomImage(vCustomImage, item.customImage)
             } else if (item.handle == HistoryEvents.DeleteCustomImage) {
                 floorplanService.deleteCustomImage(item.customImage.id)
@@ -575,7 +580,7 @@ export default class History {
     }
 
     // 恢复
-    goNextState() {
+    async goNextState() {
         historyService.redoHistoryRecord()
         const item = historyService.getHistoryRecord()
         if (item) {
@@ -601,10 +606,10 @@ export default class History {
                 this.goNextForSigns(item.signs)
 
                 this.goNextForTitle(item.title)
-                this.goNextForBgImage (item.bgImage)
+                await this.goNextForBgImage (item.bgImage)
                 this.goNextForCompass(item.compass)
 
-                this.goNextForCustomImages(item.customImages)
+                await this.goNextForCustomImages(item.customImages)
             }
             change.saveCurrentInfo()
             this.setState()

src/view/case/draw/board/editCAD/History/HistoryUtil.js

@@ -130,8 +130,8 @@ export default class HistoryUtil {
         }
     }
 
-    isDifferentForBgImage(image1, image2) {
-        if (image1.url == image2.url && image1.scale == image2.scale) {
+    isDifferentForBgImage(bgImage1, bgImage2) {
+        if (bgImage1.url == bgImage2.url && bgImage1.scale == bgImage2.scale && JSON.stringify(bgImage1.center) == JSON.stringify(bgImage2.center)) {
             return false
         } else {
             return true
@@ -266,6 +266,7 @@ export default class HistoryUtil {
         const bgImageInfo = {}
         bgImageInfo.vectorId = image1.vectorId
         bgImageInfo.url = image2.url
+        bgImageInfo.center = JSON.parse(JSON.stringify(image2.center))
         bgImageInfo.scale = image2.scale
         bgImageService.setBgImageInfo(bgImageInfo)
     }
@@ -282,6 +283,7 @@ export default class HistoryUtil {
         customImageInfo.vectorId = customImage1.vectorId
         customImageInfo.angle = customImage2.angle
         customImageInfo.url = customImage2.url
+        customImageInfo.center = JSON.parse(JSON.stringify(customImage2.center))
         customImageInfo.scale = customImage2.scale
         customImageService.setCustomImageInfo(customImageInfo)
     }
@@ -420,6 +422,8 @@ export default class HistoryUtil {
         data.id = image.vectorId
         data.type = image.geoType
         data.url = image.url
+        data.center = {}
+        mathUtil.clonePoint(data.center, image.center)
         data.scale = image.scale
         return data
     }
@@ -439,6 +443,8 @@ export default class HistoryUtil {
         data.angle = customImage.angle
         data.scale = customImage.scale
         data.url = customImage.url
+        data.center = {}
+        mathUtil.clonePoint(data.center, customImage.center)
         data.ratio = customImage.ratio
         return data
     }

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

@@ -37,6 +37,7 @@ import { signService } from "./Service/SignService";
 import { iconService } from "./Service/IconService";
 import { customImageService } from "./Service/CustomImageService.js";
 import { moveCustomImage } from "./Controls/MoveCustomImage.js";
+import { moveBgImage } from "./Controls/MoveBgImage.js";
 
 export default class Layer {
   constructor() {
@@ -535,8 +536,11 @@ export default class Layer {
         break;
       case LayerEvents.MoveBgImage:
         needAutoRedraw = true;
-        const bgImage = floorplanService.getBgImage();
-        mathUtil.clonePoint(bgImage.center, position);
+        if (draggingItem != null) {
+          moveBgImage.moveFullBgImage(dx, dy, draggingItem.vectorId);
+          this.lastX = X;
+          this.lastY = Y;
+        }
         break;
     }
 

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

@@ -854,6 +854,7 @@ export default class Draw {
             }
 
             this.context.save()
+            this.context.translate(pt.x+geometry.width*coordinate.ratio/2, pt.y+geometry.height*coordinate.ratio/2)
             this.context.scale(geometry.scale,geometry.scale)
 
             if(geometry.image == null)
@@ -862,16 +863,16 @@ export default class Draw {
                 img.src = geometry.src;
                 img.crossOrigin=""
                 img.onload = function () {
-                    this.context.drawImage(img, pt.x, pt.y, img.width*coordinate.ratio, img.height*coordinate.ratio)
+                    this.context.drawImage(img, -img.width*coordinate.ratio/2, -img.height*coordinate.ratio/2, img.width*coordinate.ratio, img.height*coordinate.ratio)
                 }.bind(this)
                 geometry.image = img;
             }
             else{
                 if(geometry.hasOwnProperty('width')){
-                    this.context.drawImage(geometry.image, pt.x, pt.y, geometry.width*coordinate.ratio, geometry.height*coordinate.ratio)
+                    this.context.drawImage(geometry.image, -geometry.width*coordinate.ratio/2, -geometry.height*coordinate.ratio/2, geometry.width*coordinate.ratio, geometry.height*coordinate.ratio)
                 }
                 else{
-                    this.context.drawImage(geometry.image, pt.x, pt.y, geometry.image.width*coordinate.ratio, geometry.image.height*coordinate.ratio)
+                    this.context.drawImage(geometry.image, -geometry.width*coordinate.ratio/2, -geometry.height*coordinate.ratio/2, geometry.image.width*coordinate.ratio, geometry.image.height*coordinate.ratio)
                 }   
             }
 
@@ -882,7 +883,7 @@ export default class Draw {
                     this.context.lineWidth = 2/geometry.scale;
                     this.context.strokeStyle = Style.Select.Tag.strokeStyle
                     this.context.fillStyle = Style.Select.Tag.fillStyle
-                    this.context.strokeRect( -geometry.width, -geometry.height, geometry.width, geometry.height)
+                    this.context.strokeRect( -geometry.width*coordinate.ratio/2, -geometry.height*coordinate.ratio/2, geometry.width, geometry.height)
                 }
             }
             else if (selectItem && selectItem.type == VectorType.BgImage) {
@@ -890,10 +891,15 @@ export default class Draw {
                     this.context.lineWidth = 2/geometry.scale;
                     this.context.strokeStyle = Style.Select.Tag.strokeStyle
                     this.context.fillStyle = Style.Select.Tag.fillStyle
-                    this.context.strokeRect( -geometry.width, -geometry.height, geometry.width, geometry.height)
+                    this.context.strokeRect( -geometry.width*coordinate.ratio/2, -geometry.height*coordinate.ratio/2, geometry.width, geometry.height)
                 }
             }
 
+            // this.context.beginPath()
+            // this.context.arc(0,0, 2 * coordinate.ratio, 0, Math.PI * 2, true)
+            // this.context.stroke()
+            // this.context.fill()
+
             this.context.restore()
         }
     }

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

@@ -141,7 +141,7 @@ export default class Render {
         let title = data.title
         this.drawGeometry(title)
 
-        let bgImage = data.image
+        let bgImage = data.bgImage
         this.drawGeometry(bgImage)
 
         let compass = data.compass

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

@@ -18,8 +18,6 @@ export default class BgImageService {
         if(this.url){
             const imageData = await floorplanService.loadImageData(this.url)
             bgImage.setImageData(imageData)
-            bgImage.width = imageData.width;
-            bgImage.height = imageData.height;
         }
 
         floorplanService.addBgImage(bgImage)
@@ -36,6 +34,7 @@ export default class BgImageService {
         bgImage.vectorId = bgImageInfo.vectorId
         bgImage.url = bgImageInfo.url
         bgImage.scale = bgImageInfo.scale
+        bgImage.center = JSON.parse(JSON.stringify(bgImageInfo.center))
     }
 }
 

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

@@ -40,6 +40,7 @@ export default class CustomImageService {
         customImage.angle = customImageInfo.angle
         customImage.url = customImageInfo.url
         customImage.scale = customImageInfo.scale
+        customImage.center = JSON.parse(JSON.stringify(customImageInfo.center))
     }
 }