基本完成

src/views/draw-file/board/editCAD/Controls/UIControl.js

@@ -77,6 +77,7 @@ export default class UIControl{
             this.selectUI == UIEvents.BloodStain 
         ) {
             stateService.setEventName(LayerEvents.AddSign)
+            this.menu_screenShot('test') 
         }
     }
 
@@ -100,6 +101,12 @@ export default class UIControl{
                     const table = floorplanService.getTable(item.vectorId)
                     table.setValue(value)
                 }
+                else if(type == VectorType.Title){
+                    floorplanService.updateTitle(value);
+                }
+                else if(type == VectorType.Image){
+                    floorplanService.updateBgImage(value);
+                }
                 break;
         }
         stateService.clearFocusItem();
@@ -193,48 +200,13 @@ export default class UIControl{
         }
     }
 
-    //截图
-    screenShot(styleType) {
-        return new Promise(resolve => {
-            this.menu_flex()
-            stateService.clearItems()
-            let canvas = this.layer.canvas
-
-            canvas.width = window.innerWidth * Constant.ratio
-            canvas.height = window.innerHeight * Constant.ratio
-            coordinate.width = window.innerWidth
-            coordinate.height = window.innerHeight
-
-            coordinate.ratio = Constant.ratio
-            let floorplanCamera = this.layer.app.core.get('CameraControls').activeControl.camera
-            coordinate.res = Math.min(window.innerWidth / Math.abs(floorplanCamera.right - floorplanCamera.left), window.innerHeight / Math.abs(floorplanCamera.top - floorplanCamera.bottom))
-            this.layer.renderer.autoRedrawForDownLoadImg(styleType)
-            setTimeout(
-                function () {
-                    let subFloor = floorplanService.getFloorNum()
-                    let file = []
-                    if (subFloor == 1) {
-                        this.downloadCadImg(canvas, 'floorPlan.jpg')
-                    } else {
-                        let currentFloor = floorplanService.getCurrentFloor()
-                        this.layer.app.store.getValue('floorcad').floors.forEach((floor, index) => {
-                            this.currentFloor = index
-                            this.layer.renderer.autoRedrawForDownLoadImg(styleType)
-                            this.downloadCadImg(canvas, floor.name + '.jpg')
-                        })
-                        this.currentFloor = currentFloor
-                    }
-
-                    coordinate.updateForCanvas(canvas)
-                    coordinate.setRes(floorplanCamera.left, floorplanCamera.right)
-                    coordinate.ratio = 1
-                    //this.layer.renderer.autoRedrawForDownLoadImg(styleType)
-                    this.layer.renderer.autoRedraw()
-                    resolve()
-                }.bind(this),
-                100
-            )
-        })
+    exportJSON() {
+        const json = {
+            version: floorplanData.version,
+            floors: floors || floorplanData.floors,
+            currentId: floorplanService.getCurrentId(),
+        }
+        return json
     }
 
     downloadCadImg(canvas, filename) {
@@ -244,8 +216,7 @@ export default class UIControl{
 
         // 加工image data，替换mime type
         imgData = imgData.replace(this._fixType(type), 'image/octet-stream')
-        // 下载后的图片名
-        //var filename = 'cad_' + new Date().getTime() + '.' + type
+
         // download
         this.saveFile(imgData, filename)
     }
@@ -267,114 +238,56 @@ export default class UIControl{
     }
     /****************************************************************************针对菜单*******************************************************************************/
 
-    execute(name, value) {
-        stateService.clearFocusItem()
-        stateService.clearSelectItem()
-        //this.layer.$xui.hideProps()
-        this.layer.uiControl.selectUI = null
-        switch (name) {
-            case 'recall': //撤销
-                this.menu_revoke()
-                break
-            case 'recover': //恢复
-                this.menu_recovery()
-                break
-            case 'default': //恢复默认
-                this.menu_default()
-                break
-            case 'download': //下载
-                this.menu_screenShot(value)
-                break
-            case 'texture': //底图
-                this.showTexture = value
-                this.layer.app.dom.querySelector('.player[name="main"]').style.visibility = this.showTexture ? 'visible' : 'hidden'
-                break
-            case 'clear': //清空
-                this.menu_clear()
-                break
-            case 'panos': //漫游点
-                this.menu_panos(value)
-                break
-            case 'rotate': //旋转
-                this.menu_rotate()
-                break
-            case 'flex': //适应视图
-                this.menu_flex()
-                break
-        }
-    }
-
-    //撤销
-    menu_revoke() {
-        this.layer.revokeHistory()
-    }
-
-    //恢复
-    menu_recovery() {
-        this.layer.recoveryHistory()
-    }
-
-    // menu_default() {
-    //     historyService.clearHistoryRecord()
-    //     floorplanService.setAngle(0)
-    //     this.layer.load.loadFloorJson(true).then(() => {
-    //     })
+    // execute(name, value) {
+    //     stateService.clearFocusItem()
+    //     stateService.clearSelectItem()
+    //     //this.layer.$xui.hideProps()
+    //     this.layer.uiControl.selectUI = null
+    //     switch (name) {
+    //         case 'recall': //撤销
+    //             this.menu_revoke()
+    //             break
+    //         case 'recover': //恢复
+    //             this.menu_recovery()
+    //             break
+    //         case 'default': //恢复默认
+    //             this.menu_default()
+    //             break
+    //         case 'download': //下载
+    //             this.menu_screenShot(value)
+    //             break
+    //         case 'texture': //底图
+    //             this.showTexture = value
+    //             this.layer.app.dom.querySelector('.player[name="main"]').style.visibility = this.showTexture ? 'visible' : 'hidden'
+    //             break
+    //         case 'clear': //清空
+    //             this.menu_clear()
+    //             break
+    //         case 'panos': //漫游点
+    //             this.menu_panos(value)
+    //             break
+    //         case 'rotate': //旋转
+    //             this.menu_rotate()
+    //             break
+    //         case 'flex': //适应视图
+    //             this.menu_flex()
+    //             break
+    //     }
     // }
 
     //截图
-    menu_screenShot(styleType) {
+    menu_screenShot(fileName) {
+        this.menu_flex();
         this.layer.stopAddVector()
-        return this.screenShot(styleType)
-    }
-
-    //清空
-    menu_clear() {
-        floorplanService.clear()
-        stateService.clearEventName()
-        addWall.clear()
-        elementService.hideAll()
-        history.save()
-        this.layer.renderer.autoRedraw()
+        setTimeout(function(){
+            this.downloadCadImg(this.layer.canvas,fileName)
+        }.bind(this),100)
+        
     }
 
-    menu_rotate() {
+    menu_flex() {
         coordinate.reSet()
-        let angle = floorplanService.getAngle()
-        angle = parseFloat(angle) + Math.PI / 2
-        if (Math.abs(angle - 2 * Math.PI) < 0.1) {
-            angle = 0
-        }
-        angle = angle % 360
-        floorplanService.setAngle(angle)
-
-        //旋转三维模型
-        let info = coordinate.getScreenInfoForCAD()
-        info.floorPlanAngle = angle
-        this.layer.app.store.getValue('metadata').floorPlanAngle = angle
-        this.layer.app.core.get('CameraControls').emit('syncCadAnd3DForRotate', info)
-        let floorplanCamera = this.layer.app.core.get('CameraControls').activeControl.camera
-        coordinate.setRes(floorplanCamera.left, floorplanCamera.right)
-
-        //修改cad数据
-        coordinate.updateForRotate()
-        this.layer.initPanos(floorplanService.getCurrentFloor())
-        history.save()
         this.layer.renderer.autoRedraw()
     }
-
-    menu_flex(updateCadRes) {
-        if (coordinate.center) {
-            coordinate.reSet()
-            this.layer.renderer.autoRedraw()
-            let info = coordinate.getScreenInfoForCAD()
-            info.floorPlanAngle = floorplanService.getAngle()
-            this.layer.app.core.get('CameraControls').emit('syncCadAnd3D', info) // info = {width:..,height:...,center:...}
-
-            if (updateCadRes) {
-                let floorplanCamera = this.layer.app.core.get('CameraControls').activeControl.camera
-                coordinate.setRes(floorplanCamera.left, floorplanCamera.right)
-            }
-        }
-    }
     /******************************************************************************************************************************************************************/
 }

src/views/draw-file/board/editCAD/FloorplanData.js

@@ -1,8 +1,11 @@
+import Title from './Geometry/Title.js'
+import Image from './Geometry/Image.js'
+import Compass from './Geometry/Compass.js'
+
 export default class FloorplanData {
     constructor() {
         this.version = 'v4.0'
         this.floors = []
-        this.initFloor(0);
     }
 
     initFloor(floorNum) {
@@ -17,6 +20,10 @@ export default class FloorplanData {
         this.floors[floorNum].arrows = {}
         this.floors[floorNum].icons = {}
         this.floors[floorNum].signs = {}
+
+        this.floors[floorNum].title = new Title();
+        this.floors[floorNum].image = new Image();
+        this.floors[floorNum].compass = new Compass();
     }
 }
 

src/views/draw-file/board/editCAD/History/Change.js

@@ -28,8 +28,9 @@ export default class Change {
         this.lastData.arrows = JSON.parse(JSON.stringify(floorplanService.getArrows()))
         this.lastData.icons = JSON.parse(JSON.stringify(floorplanService.getIcons()))
 
-        //this.lastData.angle = floorplanService.getAngle()
-        //this.lastData.res = coordinate.res
+        this.lastData.title = JSON.parse(JSON.stringify(floorplanService.getTitle()))
+        this.lastData.image = JSON.parse(JSON.stringify(floorplanService.getBgImage()))
+        this.lastData.compass = JSON.parse(JSON.stringify(floorplanService.getCompass()))
     }
 
     operate() {
@@ -49,6 +50,10 @@ export default class Change {
             this.compareCircles()
             this.compareArrows()
             this.compareIcons()
+
+            this.compareTitle()
+            this.compareImage()
+            this.compareCompass()
         // }
         // //旋转了
         // else {
@@ -461,6 +466,54 @@ export default class Change {
     //         return false
     //     }
     // }
+    
+    compareTitle(){
+        this.elements.title = null
+        const title = floorplanService.getTitle()
+        const lastTitle = this.lastData.title
+
+        const flag = historyUtil.isDifferentForTitle(title, lastTitle)
+        if(flag){
+            const item = {
+                handle: HistoryEvents.ModifyTitle,
+                preTitle: historyUtil.getDataForTitle(lastTitle),
+                curTitle: historyUtil.getDataForTitle(title),
+            }
+            this.elements.title = item
+        }
+    }
+    
+    compareImage(){
+        this.elements.image = null
+        const image = floorplanService.getBgImage()
+        const lastImage = this.lastData.image
+
+        const flag = historyUtil.isDifferentForImage(image, lastImage)
+        if(flag){
+            const item = {
+                handle: HistoryEvents.ModifyImage,
+                preImage: historyUtil.getDataForImage(lastImage),
+                curImage: historyUtil.getDataForImage(image),
+            }
+            this.elements.image = item
+        }
+    }
+    
+    compareCompass(){
+        this.elements.compass = null
+        const compass = floorplanService.getCompass()
+        const lastCompass = this.lastData.compass
+
+        const flag = historyUtil.isDifferentForCompass(compass, lastCompass)
+        if(flag){
+            const item = {
+                handle: HistoryEvents.ModifyCompass,
+                preCompass: historyUtil.getDataForCompass(lastCompass),
+                curCompass: historyUtil.getDataForCompass(compass),
+            }
+            this.elements.compass = item
+        }
+    }
 }
 
 const change = new Change()

src/views/draw-file/board/editCAD/History/History.js

@@ -19,7 +19,6 @@ import mitt from 'mitt'
 export default class History {
     constructor() {
         this.bus = mitt()
-        this.init();
     }
 
     init() {
@@ -142,6 +141,10 @@ export default class History {
             this.goPreForIcons(item.icons)
             this.goPreForSigns(item.signs)
 
+            this.goPreForTitle(item.title)
+            this.goPreForImage (item.image)
+            this.goPreForCompass(item.compass)
+
             historyService.undoHistoryRecord()
             change.saveCurrentInfo()
             this.setState()
@@ -304,6 +307,31 @@ export default class History {
         }
     }
 
+    goPreForTitle(itemForTitle) {
+        if (itemForTitle.handle == HistoryEvents.ModifyTitle) {
+            const preTitle = item.preTitle
+            let curTitle = floorplanService.getTitle(item.curTitle.id)
+            historyUtil.assignTitleFromTitle(curTitle, preTitle)
+        }
+    }
+
+    goPreForImage(itemForImage) {
+        if (itemForImage.handle == HistoryEvents.ModifyImage) {
+            const preImage = item.preImage
+            let curImage = floorplanService.getBgImage(item.curImage.id)
+            historyUtil.assignImageFromImage(curImage, preImage)
+        }
+    }
+
+    goPreForCompass(itemForCompass) {
+        if (itemForCompass.handle == HistoryEvents.ModifyCompass) {
+            const preCompass = item.preCompass
+            let curCompass = floorplanService.getCompass(item.curCompass.id)
+            historyUtil.assignCompassFromCompass(curCompass, preCompass)
+        }
+    }
+
+
     // goPreForAngle(itemForAngle) {
     //     if (itemForAngle.handle == HistoryEvents.ModifyAngle) {
     //         coordinate.reSet()
@@ -468,6 +496,30 @@ export default class History {
         }
     }
 
+    goNextForTitle(itemForTitle) {
+        if (itemForTitle.handle == HistoryEvents.ModifyTitle) {
+            const currentTitle = item.curTitle
+            let preTitle = floorplanService.getTitle(item.curTitle.id)
+            historyUtil.assignTitleFromTitle(preTitle, currentTitle)
+        }
+    }
+
+    goNextForImage(itemForImage) {
+        if (itemForImage.handle == HistoryEvents.ModifyImage) {
+            const currentImage = item.curImage
+            let preImage = floorplanService.getBgImage(item.curImage.id)
+            historyUtil.assignImageFromImage(preImage, currentImage)
+        }
+    }
+
+    goNextForCompass(itemForCompass) {
+        if (itemForCompass.handle == HistoryEvents.ModifyCompass) {
+            const currentCompass = item.curCompass
+            let preCompass = floorplanService.getCompass(item.curCompass.id)
+            historyUtil.assignCompassFromCompass(preCompass, currentCompass)
+        }
+    }
+
     // goNextForAngle(itemForAngle) {
     //     if (itemForAngle.handle == HistoryEvents.ModifyAngle) {
     //         coordinate.reSet()
@@ -511,6 +563,10 @@ export default class History {
                 this.goNextForArrows(item.arrows)
                 this.goNextForIcons(item.icons)
                 this.goNextForSigns(item.signs)
+
+                this.goNextForTitle(item.title)
+                this.goNextForImage (item.image)
+                this.goNextForCompass(item.compass)
             }
             change.saveCurrentInfo()
             this.setState()

src/views/draw-file/board/editCAD/History/HistoryUtil.js

@@ -124,6 +124,30 @@ export default class HistoryUtil {
         }
     }
 
+    isDifferentForTitle(title1, title2) {
+        if (title1.value == title2.value) {
+            return false
+        } else {
+            return true
+        }
+    }
+
+    isDifferentForImage(image1, image2) {
+        if (image1.src == image2.src) {
+            return false
+        } else {
+            return true
+        }
+    }
+
+    isDifferentForCompass(compass1, compass2) {
+        if (compass1.angle == compass2.angle) {
+            return false
+        } else {
+            return true
+        }
+    }
+
     // isDifferentForAngle(angle1, angle2) {
     //     if (angle1 == angle2) {
     //         return false
@@ -224,6 +248,27 @@ export default class HistoryUtil {
         signService.setSignInfo(SignInfo)
     }
 
+    assignTitleFromTitle(title1, title2) {
+        const titleInfo = {}
+        titleInfo.vectorId = title1.vectorId
+        titleInfo.value = title2.value
+        floorplanService.updateTitle(titleInfo.value)
+    }
+
+    assignImageFromImage(image1, image2) {
+        const imageInfo = {}
+        imageInfo.vectorId = image1.vectorId
+        imageInfo.src = image2.src
+        floorplanService.updateBgImage(imageInfo.src)
+    }
+
+    assignCompassFromCompass(compass1, compass2) {
+        const compassInfo = {}
+        compassInfo.vectorId = compass1.vectorId
+        compassInfo.angle = compass2.angle
+        floorplanService.updateCompass(compassInfo.angle )
+    }
+
     deletePoint(pointId) {
         const point = floorplanService.getPoint(pointId)
         const parent = point.parent
@@ -326,6 +371,30 @@ export default class HistoryUtil {
         return data
     }
 
+    getDataForTitle(title) {
+        const data = {}
+        data.id = title.vectorId
+        data.type = title.geoType
+        data.value = title.value
+        return data
+    }
+
+    getDataForImage(image) {
+        const data = {}
+        data.id = image.vectorId
+        data.type = image.geoType
+        data.src = image.src
+        return data
+    }
+
+    getDataForCompass(compass) {
+        const data = {}
+        data.id = compass.vectorId
+        data.type = compass.geoType
+        data.angle = compass.angle
+        return data
+    }
+
     // getDataForAngle(angle) {
     //     return angle
     // }

src/views/draw-file/board/editCAD/Layer.js

@@ -55,8 +55,10 @@ export default class Layer {
         coordinate.init(canvas)
         this.canvas = canvas;
         this.load.load(vectorData);
+        history.init();
         draw.initContext(this.canvas)
         this.bindEvents()
+        this.renderer.autoRedraw()
     }
 
     bindEvents() {

src/views/draw-file/board/editCAD/Load.js

@@ -2,6 +2,11 @@ import { floorplanService } from './Service/FloorplanService.js'
 import { wallService } from './Service/WallService.js'
 import { tagService } from './Service/TagService'
 import { signService } from './Service/SignService'
+import { rectangleService } from './Service/RectangleService.js'
+import { circleService } from './Service/CircleService.js'
+import { arrowService } from './Service/ArrowService.js'
+import { iconService } from './Service/IconService.js'
+import { tableService } from './Service/TableService.js'
 
 export default class Load {
     constructor(layer) {
@@ -18,31 +23,65 @@ export default class Load {
             floorplanService.initFloor(0)
             return;
         }
-        // for (let i = 0; i < floorsData.length; ++i) {
-        //     let floor = floorsData[i]
-        //     floorplanService.initFloor(i)
-        //     for (let key in floor.points) {
-        //         wallService.createPoint(floor.points[key].x, floor.points[key].y, floor.points[key].vectorId, i)
-        //     }
-
-        //     for (let key in floor.walls) {
-        //         wallService.createWall(floor.walls[key].start, floor.walls[key].end, floor.walls[key].vectorId, i)
-        //     }
-
-        //     for (let key in floor.tags) {
-        //         let tag = tagService.createTag(floor.tags[key].center, floor.tags[key].vectorId, i)
-        //         tag.setPoints2d()
-        //         tag.setTitle(floor.tags[key].title)
-        //         tag.setDes(floor.tags[key].des)
-        //         tag.setUnit(floor.tags[key].unit)
-        //         tag.setAdding(false)
-        //     }
-
-        //     for (let key in floor.signs) {
-        //         let sign = signService.createSign(floor.signs[key].center, floor.signs[key].geoType, floor.signs[key].vectorId)
-        //         sign.angle = floor.signs[key].angle
-        //     }
-        // }
+        for (let i = 0; i < floorsData.length; ++i) {
+            let floor = floorsData[i]
+            floorplanService.initFloor(i)
+            for (let key in floor.points) {
+                wallService.createPoint(floor.points[key].x, floor.points[key].y, floor.points[key].vectorId, i)
+            }
+
+            for (let key in floor.walls) {
+                wallService.createWall(floor.walls[key].start, floor.walls[key].end, floor.walls[key].vectorId, i)
+            }
+
+            for (let key in floor.tags) {
+                let tag = tagService.createTag(floor.tags[key].center, floor.tags[key].vectorId, i)
+                tag.setValue(floor.tags[key].value)
+            }
+
+            for (let key in floor.tables) {
+                let table = tableService.createTable(floor.tables[key].center, floor.tables[key].vectorId, i)
+                table.rowLen = floor.tables[key].rowLen
+                table.colLen = floor.tables[key].colLen
+                table.points = floor.tables[key].points
+                table.cells = floor.tables[key].cells
+            }
+
+            for (let key in floor.cells) {
+                let cell = tableService.createCell(floor.cells[key].parent,floor.cells[key].cellId, i)
+                cell.width = floor.cells[key].width
+                cell.height = floor.cells[key].height
+                cell.value = floor.cells[key].value
+                cell.colIndex = floor.cells[key].colIndex
+                cell.rowIndex = floor.cells[key].rowIndex
+            }
+
+            for (let key in floor.rectangles) {
+                rectangleService.createRectangle(floor.rectangles[key].points[0], floor.rectangles[key].points[2], floor.rectangles[key].vectorId,i)
+            }
+
+            for (let key in floor.circles) {
+                circleService.createCircle2(floor.circles[key].center, floor.circles[key].radius, floor.circles[key].vectorId,i)
+            }
+
+            for (let key in floor.arrows) {
+                arrowService.createArrow(floor.arrows[key].startPoint,floor.arrows[key].endPoint,floor.walls[key].vectorId,i)
+            }
+
+            for (let key in floor.icons) {
+                iconService.createIcon2(floor.icons[key].center,floor.icons[key].radius,floor.icons[key].value,floor.icons[key].vectorId,i)
+            }
+            //要更新value
+
+            for (let key in floor.signs) {
+                let sign = signService.createSign(floor.signs[key].center, floor.signs[key].geoType, floor.signs[key].vectorId,i)
+                sign.angle = floor.signs[key].angle
+            }
+
+            floorplanService.createTitle(floor.title.value, floor.title.vectorId, i)
+            floorplanService.createBgImage(floor.image.src, floor.image.vectorId, i)
+            floorplanService.createCompass(floor.compass.angle, floor.compass.vectorId, i)
+        }
     }
 
   

src/views/draw-file/board/editCAD/Renderer/Draw.js

@@ -766,6 +766,151 @@ export default class Draw {
         this.context.restore()
     }
 
+    drawTitle(geometry){
+        this.context.save()
+        this.setCanvasStyle(Style.Title)
+        let pt = {}
+        //pt.x = (this.context.canvas.width - this.context.measureText(geometry.value).width)/2
+        pt.x = this.context.canvas.width/2
+        pt.y = 50
+        this.context.fillText(geometry.value, pt.x, pt.y)
+        this.context.restore()
+    }
+
+    drawImage(geometry){
+        if(geometry.src != null){
+
+            const imgWidth = 600
+            const imgHeight = 400
+            const pt = {
+                x:30,
+                y:150
+            }
+
+            this.context.save()
+            if(geometry.image == null)
+            {
+                var img = new Image()
+                img.src = geometry.src;
+                img.crossOrigin=""
+                img.onload = function () {
+                    this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight)
+                }.bind(this)
+                geometry.image = img;
+            }
+            else{
+                this.context.drawImage(geometry.image, pt.x, pt.y, imgWidth, imgHeight)
+            }
+            this.context.restore()
+        }
+    }
+
+    drawCompass(geometry){
+        
+        this.context.save()
+        this.context.strokeStyle = Style.Compass.strokeStyle
+        this.context.fillStyle = Style.Compass.fillStyle
+
+        const center = {
+            x:800,
+            y:70
+        }
+
+        // const pt = {
+        //     x:800-32/2,
+        //     y:70+52/2
+        // }
+        this.context.translate(center.x,center.y)
+        this.context.rotate((geometry.angle) * Math.PI)
+        if(geometry.angle == 90){
+            this.context.translate( 32/2,  -52)
+        }
+        else if(geometry.angle == 180){
+            this.context.translate( -32,  -52)
+        }
+        else if(geometry.angle == 270){
+            this.context.translate( -52,  -32/2)
+        }
+        this.context.lineWidth = 1
+        this.context.miterLimit=4;
+        this.context.font="15px ''";
+
+        this.context.beginPath();
+        this.context.moveTo(12.5221,3.262);
+        this.context.lineTo(8.93807,3.262);
+        this.context.lineTo(8.93807,4.284);
+        this.context.lineTo(12.5221,4.284);
+        this.context.lineTo(12.5221,8.204);
+        this.context.bezierCurveTo(11.0241,8.778,9.54007,9.352,8.51807,9.688);
+        this.context.lineTo(8.99407,10.724);
+        this.context.bezierCurveTo(10.0021,10.304,11.2761,9.786,12.5221,9.24);
+        this.context.lineTo(12.5221,12.334);
+        this.context.lineTo(13.5861,12.334);
+        this.context.lineTo(13.5861,0);
+        this.context.lineTo(12.5221,0);
+        this.context.lineTo(12.5221,3.262);
+        this.context.closePath();
+        this.context.moveTo(17.6881,11.13);
+        this.context.bezierCurveTo(17.0721,11.13,16.9601,11.004,16.9601,10.29);
+        this.context.lineTo(16.9601,5.726);
+        this.context.bezierCurveTo(18.4581,4.9,20.0821,3.934,21.2581,2.982);
+        this.context.lineTo(20.4181,2.114);
+        this.context.bezierCurveTo(19.5781,2.912,18.2621,3.85,16.9601,4.648);
+        this.context.lineTo(16.9601,0);
+        this.context.lineTo(15.8961,0);
+        this.context.lineTo(15.8961,10.276);
+        this.context.bezierCurveTo(15.8961,11.746,16.2741,12.152,17.5901,12.152);
+        this.context.lineTo(19.7741,12.152);
+        this.context.bezierCurveTo(21.1321,12.152,21.4261,11.27,21.5521,8.722);
+        this.context.bezierCurveTo(21.2581,8.652,20.8241,8.442,20.5441,8.232);
+        this.context.bezierCurveTo(20.4461,10.556,20.3481,11.13,19.6901,11.13);
+        this.context.lineTo(17.6881,11.13);
+        this.context.closePath();
+        this.context.fill();
+        this.context.stroke();
+
+        this.context.beginPath();
+        this.context.moveTo(24.8494,49.3321);
+        this.context.lineTo(28.7452,51);
+        this.context.lineTo(27.3498,47.2775);
+        this.context.bezierCurveTo(30.224,44.385,32,40.3999,32,36);
+        this.context.bezierCurveTo(32,27.5465,25.4442,20.6242,17.1394,20.0399);
+        this.context.lineTo(15.9998,17);
+        this.context.lineTo(14.8602,20.04);
+        this.context.bezierCurveTo(6.55559,20.6245,0,27.5467,0,36);
+        this.context.bezierCurveTo(0,40.3998,1.77588,44.3847,4.64993,47.2772);
+        this.context.lineTo(3.25439,51);
+        this.context.lineTo(7.15046,49.3319);
+        this.context.bezierCurveTo(9.68503,51.0177,12.7278,52,16,52);
+        this.context.bezierCurveTo(19.2721,52,22.3148,51.0178,24.8494,49.3321);
+        this.context.closePath();
+        this.context.moveTo(26.5656,45.1856);
+        this.context.lineTo(17.9232,22.131);
+        this.context.bezierCurveTo(24.7452,23.0683,30,28.9205,30,36);
+        this.context.bezierCurveTo(30,39.5148,28.7048,42.7271,26.5656,45.1856);
+        this.context.closePath();
+        this.context.moveTo(14.0763,22.1311);
+        this.context.lineTo(5.43414,45.1852);
+        this.context.bezierCurveTo(3.29512,42.7268,2,39.5146,2,36);
+        this.context.bezierCurveTo(2,28.9206,7.25457,23.0685,14.0763,22.1311);
+        this.context.closePath();
+        this.context.moveTo(7.43459,47.0749);
+        this.context.bezierCurveTo(7.28407,46.9583,7.13599,46.8387,6.99045,46.7162);
+        this.context.lineTo(15,25.3497);
+        this.context.lineTo(15,43.8358);
+        this.context.lineTo(7.43459,47.0749);
+        this.context.closePath();
+        this.context.moveTo(9.4198,48.3604);
+        this.context.lineTo(15.9998,45.5432);
+        this.context.lineTo(22.58,48.3605);
+        this.context.bezierCurveTo(20.6184,49.4069,18.3785,50,16,50);
+        this.context.bezierCurveTo(13.6214,50,11.3814,49.4068,9.4198,48.3604);
+        this.context.closePath();
+        this.context.fill();
+        this.context.stroke();
+        this.context.restore();
+    }
+
     setCanvasStyle(style) {
         for (const key in style) {
             if (key != 'isFill' && key != 'isStroke') {

src/views/draw-file/board/editCAD/Renderer/Render.js

@@ -42,10 +42,21 @@ export default class Render {
                 return
             case VectorType.Table:
                 draw.drawTable(vector)
+                return
+            case VectorType.Title:
+                draw.drawTitle(vector)
+                return
+            case VectorType.Image:
+                draw.drawImage(vector)
+                return
+            case VectorType.Compass:
+                draw.drawCompass(vector)
+                return
         }
 
         if (signService.isSign(vector.geoType)) {
             draw.drawSign(vector)
+            return
         }
     }
 
@@ -123,6 +134,16 @@ export default class Render {
         if (!data) {
             return
         }
+
+        let title = data.title
+        this.drawGeometry(title)
+
+        let bgImage = data.image
+        this.drawGeometry(bgImage)
+
+        let compass = data.compass
+        this.drawGeometry(compass)
+
         let walls = data.walls
         for (let key in walls) {
             this.drawGeometry(walls[key])

src/views/draw-file/board/editCAD/Service/ArrowService.js

@@ -8,8 +8,8 @@ export default class ArrowService {
     constructor() {
     }
   
-    createArrow(startPosition,endPosition,vectorId) {
-        const arrow = new Arrow(startPosition, endPosition,vectorId)
+    createArrow(startPosition,endPosition,vectorId,floor) {
+        const arrow = new Arrow(startPosition, endPosition,vectorId,floor)
         floorplanService.addArrow(arrow)
         return arrow
     }

src/views/draw-file/board/editCAD/Service/CircleService.js

@@ -19,6 +19,12 @@ export default class CircleService {
         return circle
     }
 
+    createCircle2(center,radius,vectorId,floor) {
+        const circle = new Circle(center, radius,vectorId,floor)
+        floorplanService.addCircle(circle)
+        return circle
+    }
+
     updateCircleVertex(vectorId,newPosition,index){
         const circle = floorplanService.getCircle(vectorId)
         circle.updatePoints(newPosition,index)

src/views/draw-file/board/editCAD/Service/FloorplanService.js

@@ -2,6 +2,10 @@ import { floorplanData } from '../FloorplanData'
 import { coordinate } from '../Coordinate.js'
 import Constant from '../Constant'
 
+import Title from '../Geometry/Title.js'
+import Image from '../Geometry/Image.js'
+import Compass from '../Geometry/Compass.js'
+
 export class FloorplanService {
     constructor() {
         this.currentId = 0 // 当前可用id
@@ -400,6 +404,75 @@ export class FloorplanService {
     deleteFloorData() {
         floorplanData.floors = []
     }
+
+    createTitle(value,vectorId,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        const title = new Title(value,vectorId,floor)
+        return title
+    }
+
+    updateTitle(value,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        const title = floorplanData.floors[floor].title
+        title.setValue(value)
+    }
+
+    getTitle(floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        return floorplanData.floors[floor].title
+    }
+
+    createBgImage(value,vectorId,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        const image = new Image(value,vectorId,floor)
+        return image
+    }
+
+    updateBgImage(value,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        const img = floorplanData.floors[floor].image
+        img.setSrc(value)
+    }
+
+    getBgImage(floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        return floorplanData.floors[floor].image
+    }
+
+    createCompass(value,vectorId,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        const compass = new Compass(value,vectorId,floor)
+        return compass
+    }
+
+    updateCompass(value,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        const compass = floorplanData.floors[floor].compass
+        compass.setAngle(value)
+    }
+
+    getCompass(floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        return floorplanData.floors[floor].compass
+    }
 }
 
 const floorplanService = new FloorplanService()

src/views/draw-file/board/editCAD/Service/IconService.js

@@ -24,7 +24,7 @@ export default class IconService {
         return value;
     }
 
-    createIcon(leftTopPosition,rightDownPosition,value,vectorId) {
+    createIcon(leftTopPosition,rightDownPosition,value,vectorId,floor) {
         const radius = mathUtil.getDistance(leftTopPosition,rightDownPosition)/2
         const center = {
             x:(leftTopPosition.x+rightDownPosition.x)/2,
@@ -38,7 +38,13 @@ export default class IconService {
                 this.values.push(value);
             }
         }
-        const icon = new Icon(center, radius,value,vectorId)
+        const icon = new Icon(center, radius,value,vectorId,floor)
+        floorplanService.addIcon(icon)
+        return icon
+    }
+
+    createIcon2(center,radius,value,vectorId,floor) {
+        const icon = new Icon(center, radius,value,vectorId,floor)
         floorplanService.addIcon(icon)
         return icon
     }

src/views/draw-file/board/editCAD/Service/RectangleService.js

@@ -7,8 +7,8 @@ export default class RectangleService {
     constructor() {
     }
   
-    createRectangle(leftTopPosition,rightDownPosition,vectorId) {
-        const rectangle = new Rectangle(leftTopPosition,rightDownPosition,vectorId)
+    createRectangle(leftTopPosition,rightDownPosition,vectorId,floor) {
+        const rectangle = new Rectangle(leftTopPosition,rightDownPosition,vectorId,floor)
         floorplanService.addRectangle(rectangle)
         return rectangle
     }

src/views/draw-file/board/editCAD/Service/SignService.js

@@ -9,35 +9,35 @@ export default class SignService {
         this.signs = null
     }
   
-    createSign(position, geoType, vectorId) {
+    createSign(position, geoType, vectorId,floor) {
         let sign = null
         switch (geoType) {
             case VectorType.Cigaret:
-                sign = new Sign(position, vectorId, VectorType.Cigaret)
+                sign = new Sign(position, vectorId, VectorType.Cigaret,floor)
                 break
             case VectorType.FirePoint:
-                sign = new Sign(position, vectorId, VectorType.FirePoint)
+                sign = new Sign(position, vectorId, VectorType.FirePoint,floor)
                 break
             case VectorType.LeftFootPrint:
-                sign = new Sign(position, vectorId, VectorType.LeftFootPrint)
+                sign = new Sign(position, vectorId, VectorType.LeftFootPrint,floor)
                 break
             case VectorType.RightFootPrint:
-                sign = new Sign(position, vectorId, VectorType.RightFootPrint)
+                sign = new Sign(position, vectorId, VectorType.RightFootPrint,floor)
                 break
             case VectorType.LeftShoePrint:
-                sign = new Sign(position, vectorId, VectorType.LeftShoePrint)
+                sign = new Sign(position, vectorId, VectorType.LeftShoePrint,floor)
                 break
             case VectorType.RightShoePrint:
-                sign = new Sign(position, vectorId, VectorType.RightShoePrint)
+                sign = new Sign(position, vectorId, VectorType.RightShoePrint,floor)
                 break
             case VectorType.FingerPrint:
-                sign = new Sign(position, vectorId, VectorType.FingerPrint)
+                sign = new Sign(position, vectorId, VectorType.FingerPrint,floor)
                 break
             case VectorType.DeadBody:
-                sign = new Sign(position, vectorId, VectorType.DeadBody)
+                sign = new Sign(position, vectorId, VectorType.DeadBody,floor)
                 break
             case VectorType.BloodStain:
-                sign = new Sign(position, vectorId, VectorType.BloodStain)
+                sign = new Sign(position, vectorId, VectorType.BloodStain,floor)
                 break
         }
 

src/views/draw-file/board/editCAD/Style.js

@@ -24,6 +24,11 @@ const Style = {
         fillStyle: 'rgba(0,0,0,0)',
         lineWidth: 1,
     },
+    Compass: {
+        strokeStyle: 'rgb(0,0,0,1)',
+        fillStyle: 'rgba(0,0,0,0)',
+        lineWidth: 1,
+    },
     Rectangle:{
         strokeStyle: '#000000',
         lineWidth: 2,
@@ -150,6 +155,15 @@ const Style = {
             //strokeStyle: 'rgba(100,149,237,0.5)',
         },
     },
+    Title: {
+        font: '24px Microsoft YaHei',
+        fillStyle: '#000000',
+        strokeStyle: '#000000',
+        textAlign: 'center',
+        textBaseline: 'middle',
+        miterLimit: 10,
+        direction: 'ltr',
+    },
     Font: {
         //font: '14px Microsoft YaHei',
         font: 'px Microsoft YaHei',

src/views/draw-file/board/editCAD/enum/HistoryEvents.js

@@ -36,5 +36,9 @@ const HistoryEvents = {
     ModifySign: 'modifySign',
 
     //ModifyAngle: 'modifyAngle',
+
+    ModifyTitle: 'modifyTitle',
+    ModifyImage: 'modifyImage',
+    ModifyCompass: 'modifyCompass',
 }
 export default HistoryEvents

src/views/draw-file/board/editCAD/enum/VectorType.js

@@ -18,5 +18,8 @@ const VectorType = {
     FingerPrint: 'FingerPrint',          //指纹
     DeadBody: 'DeadBody',                //尸体
     BloodStain: 'BloodStain',            //血迹
+    Title:'Title',
+    Image:'Image',
+    Compass:'Compass',
 }
 export default VectorType