public-fuse/src/view/case/draw/board/editCAD/Renderer/Draw.js

import { floorplanService } from '../Service/FloorplanService.js'
import { stateService } from '../Service/StateService.js'
import { coordinate } from '../Coordinate.js'
import Style from '../Style.js'
import VectorType from '../enum/VectorType.js'
import SelectState from '../enum/SelectState.js'
import { mathUtil } from '../MathUtil.js'
import ElementEvents from '../enum/ElementEvents.js'
import Constant from '../Constant.js'
import { signService } from '../Service/SignService.js'
export default class Draw {
    constructor() {
        this.context = null
    }

    initContext(canvas) {
        if (canvas) {
            this.context = canvas.getContext('2d')
        } else {
            this.context = null
        }
    }

    clear() {
        this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)
    }

    drawBackGround() {
        this.context.save()
        this.context.fillStyle = 'white';
        this.context.fillRect(0,0,this.context.canvas.width,this.context.canvas.height)
        this.context.restore()
    }

    drawFrame() {
        this.context.save()
        this.context.strokeStyle = 'black';
        const ratio =  this.context.canvas.width/297 ;
        this.context.strokeRect(ratio * 20, ratio * 20,this.context.canvas.width - 2*ratio * 20,this.context.canvas.height - 2*ratio * 20)
        this.context.restore()
    }

    drawWall(vector) {
        let start = floorplanService.getPoint(vector.start)
        let end = floorplanService.getPoint(vector.end)

        let points = []
        points.push(start)
        points.push(end)

        points = points.sort(sortNumber.bind(this))
        function sortNumber(a, b) {
            return mathUtil.getDistance(start, a) - mathUtil.getDistance(start, b)
        }

        this.context.save()
        this.context.beginPath()
        this.context.lineCap = 'round' //线段端点的样式

        this.context.lineWidth = Style.Wall.lineWidth * coordinate.ratio
        this.context.strokeStyle = vector.color

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        if (selectItem && selectItem.type == VectorType.Wall) {
            if (vector.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Wall.strokeStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.Wall) {
            if (vector.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Wall.strokeStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Wall) {
            if (vector.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Wall.strokeStyle
            }
        }

        for (let i = 0; i < points.length - 1; i += 2) {
            let point1 = coordinate.getScreenXY(points[i])
            let point2 = coordinate.getScreenXY(points[i + 1])
            this.context.moveTo(point1.x, point1.y)
            this.context.lineTo(point2.x, point2.y)
        }
        this.context.stroke()
        this.context.restore()
    }

    drawSpecialPoint() {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()
        let point = null

        this.context.save()
        if (selectItem) {
            point = floorplanService.getPoint(selectItem.vectorId)
            this.context.lineWidth = Style.Select.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Select.Point.strokeStyle
            this.context.fillStyle = Style.Select.Point.fillStyle
        }
        if (draggingItem) {
            point = floorplanService.getPoint(draggingItem.vectorId)
            this.context.lineWidth = Style.Select.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Select.Point.strokeStyle
            this.context.fillStyle = Style.Select.Point.fillStyle
        }
        if (focusItem) {
            point = floorplanService.getPoint(focusItem.vectorId)
            this.context.lineWidth = Style.Focus.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Focus.Point.strokeStyle
            this.context.fillStyle = Style.Focus.Point.fillStyle
        }
        if (point == null) {
            this.context.restore()
            return
        }
        const pt = coordinate.getScreenXY({ x: point.x, y: point.y })
        let radius = Style.Point.radius

        this.context.beginPath()
        this.context.arc(pt.x, pt.y, radius * coordinate.ratio, 0, Math.PI * 2, true)
        this.context.stroke()
        this.context.fill()
        this.context.restore()
    }

    drawPoint(vector) {
        const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y })
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        // this.context.save()
        // this.context.lineWidth = Style.Point.lineWidth * coordinate.ratio
        // this.context.strokeStyle = Style.Point.strokeStyle
        // this.context.fillStyle = Style.Point.fillStyle
        let radius = Style.Point.radius
        if (
            (draggingItem && draggingItem.type == VectorType.WallCorner && vector.vectorId == draggingItem.vectorId) ||
            (selectItem && selectItem.type == VectorType.WallCorner && vector.vectorId == selectItem.vectorId)
        ) {
            this.context.save()
            this.context.lineWidth = Style.Select.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Select.Point.strokeStyle
            this.context.fillStyle = Style.Select.Point.fillStyle
            radius = Style.Select.Point.radius
        } else if (focusItem && focusItem.type == VectorType.WallCorner && vector.vectorId == focusItem.vectorId) {
            this.context.save()
            this.context.lineWidth = Style.Focus.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Focus.Point.strokeStyle
            this.context.fillStyle = Style.Focus.Point.fillStyle
            radius = Style.Focus.Point.radius
        } else {
            return
        }

        this.context.beginPath()
        this.context.arc(pt.x, pt.y, radius * coordinate.ratio, 0, Math.PI * 2, true)
        this.context.stroke()
        this.context.fill()
        this.context.restore()

        // this.drawText({ x: vector.x, y: vector.y }, vector.vectorId)
    }

    // 文字
    drawText(position, txt, screenCoord) {
        this.context.save()
        this.setCanvasStyle(Style.Font)
        this.context.font = '12px Microsoft YaHei'

        let pt = { x: position.x, y: position.y }
        if (!screenCoord) {
            pt = coordinate.getScreenXY({ x: position.x, y: position.y })
        }
        this.context.fillText(txt, pt.x, pt.y)
        this.context.restore()
    }

    drawTag(geometry) {
        this.context.save()

        this.context.lineWidth = Style.Tag.lineWidth * coordinate.ratio
        this.context.strokeStyle = geometry.color
        this.context.fillStyle = geometry.color

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        if (selectItem && selectItem.type == VectorType.Tag) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Tag.strokeStyle
                this.context.fillStyle = Style.Select.Tag.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.Tag) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Tag.strokeStyle
                this.context.fillStyle = Style.Select.Tag.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Tag) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Tag.strokeStyle
                this.context.fillStyle = Style.Focus.Tag.fillStyle
            }
        }

        this.context.font = `400 ${geometry.fontSize* coordinate.ratio}px Microsoft YaHei`

        //根据文字的长度，更新标注范围
        //geometry.sideWidth = Math.max(this.context.measureText(geometry.value).width, this.context.measureText(parseFloat(geometry.value).toFixed(2)).width)
        let fontInfo = geometry.setFontLenAndHeight()
        let sideWidth = 0;
        for(let i=0;i<fontInfo.textValues.length;++i){
            sideWidth = Math.max(sideWidth,this.context.measureText(fontInfo.textValues[i]).width, this.context.measureText(parseFloat(fontInfo.textValues[i]).toFixed(2)).width)
        }
        geometry.sideWidth = sideWidth
        geometry.sideThickness = fontInfo.height * (geometry.fontSize)
        
        geometry.setPoints2d()

        let points2d = geometry.points2d
        let points = []
        for (let i = 0; i < points2d.length; ++i) {
            points[i] = coordinate.getScreenXY({ x: points2d[i].x, y: points2d[i].y })
        }

        let pt = coordinate.getScreenXY({ x: geometry.center.x, y: geometry.center.y })
        const fontWidth1 = geometry.sideWidth
        //let dy = (points[3].y - points[0].y)/fontInfo.textValues.length/2
        let dy = geometry.sideThickness/fontInfo.height/2*coordinate.ratio
        for(let i=0;i<fontInfo.textValues.length;++i){
            // const line1 = mathUtil.createLine1({ x: (points[0].x + points[3].x) / 2, y: (points[0].y + points[3].y) / 2 }, { x: (points[2].x + points[1].x) / 2, y: (points[2].y + points[1].y) / 2 })
            // const fontStart1 = mathUtil.getDisPointsLine(line1, pt, fontWidth1 / 2, fontWidth1 / 2)
    
            // if (fontStart1.newpoint1.x < fontStart1.newpoint2.x) {
            //     this.context.fillText(geometry.value, fontStart1.newpoint1.x, fontStart1.newpoint1.y)
            // } else {
            //     this.context.fillText(geometry.value, fontStart1.newpoint2.x, fontStart1.newpoint2.y)
            // }
            //let count = (2*(i-(fontInfo.textValues.length-1))+1)
            //let count = 1 * (fontInfo.textValues.length-i)
            let count = i+1
            count = 2* count  - fontInfo.textValues.length
            this.context.fillText(fontInfo.textValues[i], pt.x - fontWidth1/2, pt.y + dy*count)
        }



        // this.context.beginPath()
        // this.context.arc(pt.x, pt.y, 2 * coordinate.ratio, 0, Math.PI * 2, true)
        // this.context.stroke()
        // this.context.fill()

        // this.context.beginPath()
        // this.context.moveTo(points[0].x, points[0].y)
        // this.context.lineTo(points[1].x, points[1].y)
        // this.context.lineTo(points[2].x, points[2].y)
        // this.context.lineTo(points[3].x, points[3].y)
        // this.context.closePath();
        // this.context.stroke()

        this.context.restore()
    }

    drawTable(geometry){
        const leftTop = coordinate.getScreenXY({
            x:geometry.center.x - Math.abs(geometry.points[0].x - geometry.points[1].x)/2,
            y:geometry.center.y + Math.abs(geometry.points[0].y - geometry.points[3].y)/2,
        })

        for(let i=0;i<geometry.cells.length;++i){
            for(let j=0;j<geometry.cells[i].length;++j)
            {
                const cell = floorplanService.getCell(geometry.cells[i][j])
                const position = geometry.getCellPos(cell.vectorId)
                this.drawCell(cell,position.x + leftTop.x,position.y + leftTop.y)
            }
        }
    }

    drawCell(geometry,width,height){
        this.context.save()
        this.context.lineWidth = Style.Table.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Table.strokeStyle
        this.context.fillStyle = Style.Table.fillStyle

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        if (selectItem && selectItem.type == VectorType.Table) {
            if (geometry.parent == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Table.strokeStyle
                this.context.fillStyle = Style.Select.Table.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.Table) {
            if (geometry.parent == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Table.strokeStyle
                this.context.fillStyle = Style.Select.Table.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Table) {
            if (geometry.parent == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Table.strokeStyle
                this.context.fillStyle = Style.Focus.Table.fillStyle
            }
        }
        this.context.translate(width, height)
        this.context.beginPath()
        this.context.moveTo(0,0)
        this.context.lineTo(geometry.width* coordinate.ratio,0)
        this.context.lineTo(geometry.width* coordinate.ratio,geometry.height* coordinate.ratio)
        this.context.lineTo(0,geometry.height* coordinate.ratio)
        this.context.closePath();
        this.context.stroke()

        this.context.font = 12*coordinate.ratio+'px Microsoft YaHei'
        let fontWidth = this.context.measureText(geometry.value).width
        //如果是数字或者字母
        const patt = /[A-z0-9]/g;
        const alphanumeric = geometry.value.match(patt);
        if(alphanumeric){
            const alphanumericLen = geometry.value.match(patt).length;
            fontWidth = fontWidth * (geometry.value.length - alphanumericLen)/geometry.value.length + fontWidth * alphanumericLen/geometry.value.length*1.5
        }
        

        //let rowCount = Math.ceil(geometry.height/defaultHeight)               //分几行写
        let rowCount = Math.ceil(fontWidth/(geometry.width* coordinate.ratio))                        //分几行写，根据要写的文字的长度来判断

        if(rowCount == 1){
            this.context.textAlign = "center";
            this.context.textBaseline = "middle";
            this.context.fillText(geometry.value, geometry.width/2* coordinate.ratio, geometry.height/2* coordinate.ratio)
        }
        //大于1行
        else{
            const rowWidth = Math.ceil(fontWidth/rowCount)                            //每行的长度 
            const rowFontCount = Math.ceil(geometry.value.length/rowCount)          //每行的文字个数  
            this.context.textAlign = "left";
            for(let i=0;i<rowCount;++i){
                const value = geometry.value.substr(i*rowFontCount,rowFontCount)
                this.context.fillText(value, (geometry.width/2* coordinate.ratio- rowWidth/2), (18+18*i)* coordinate.ratio)
            }
        }

        this.context.restore()
    }

    drawRectangle(geometry){
        let points = []
        for(let i=0;i<geometry.points.length;++i){
            points.push(coordinate.getScreenXY(geometry.points[i]))
        }

        this.context.save()
        this.context.beginPath()
        this.context.lineCap = 'round' //线段端点的样式;

        this.context.lineWidth = Style.Rectangle.lineWidth * coordinate.ratio
        this.context.strokeStyle = geometry.color

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        let fillFlag = false
        
        if (selectItem && selectItem.type == VectorType.Rectangle) {
            if (geometry.vectorId == selectItem.vectorId) {
                if(selectItem.selectIndex == SelectState.All){
                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
                    this.context.fillStyle = Style.Select.Rectangle.fillStyle
                    fillFlag = true;
                }
                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1){
                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
                }
                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
                    this.drawCircle({
                        x:geometry.points[vertexIndex].x,
                        y:geometry.points[vertexIndex].y,
                        name: ElementEvents.StartAddWall
                    })
                }
            }
        } else if (draggingItem && draggingItem.type == VectorType.Rectangle) {
            if (geometry.vectorId == draggingItem.vectorId) {
                if(draggingItem.selectIndex == SelectState.All){
                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
                    this.context.fillStyle = Style.Select.Rectangle.fillStyle
                    fillFlag = true;
                }
                else if(draggingItem.selectIndex.indexOf(SelectState.Side)>-1){
                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
                }
                else if(draggingItem.selectIndex.indexOf(SelectState.Vertex)>-1){
                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
                    let vertexIndex = draggingItem.selectIndex.replace(SelectState.Vertex+'_','');
                    this.drawCircle({
                        x:geometry.points[vertexIndex].x,
                        y:geometry.points[vertexIndex].y,
                        name: ElementEvents.StartAddWall
                    })
                }
            }
        }

        if (focusItem && focusItem.type == VectorType.Rectangle) {
            if (geometry.vectorId == focusItem.vectorId) {
                if(focusItem.selectIndex == SelectState.All){
                    this.context.strokeStyle = Style.Focus.Rectangle.strokeStyle
                    this.context.fillStyle = Style.Focus.Rectangle.fillStyle
                    fillFlag = true;
                }
                else if(focusItem.selectIndex.indexOf(SelectState.Side)>-1){
                    this.context.strokeStyle = Style.Focus.Rectangle.strokeStyle
                }
                else if(focusItem.selectIndex.indexOf(SelectState.Vertex)>-1){
                    this.context.strokeStyle = Style.Focus.Rectangle.strokeStyle
                    let vertexIndex = focusItem.selectIndex.replace(SelectState.Vertex+'_','');
                    this.drawCircle({
                        x:geometry.points[vertexIndex].x,
                        y:geometry.points[vertexIndex].y,
                        name: ElementEvents.StartAddWall
                    })
                }
            }
        }

        this.context.moveTo(points[0].x, points[0].y)
        for (let i = 1; i < points.length; ++i) {
            this.context.lineTo(points[i].x, points[i].y)
        }
        this.context.closePath();
        this.context.stroke()
        if(fillFlag){
            this.context.fill()
        }
        this.context.restore()
    }

    drawCircleGeo(geometry)
    {
        let radius = geometry.radius * coordinate.res * coordinate.zoom/Constant.defaultZoom * coordinate.ratio
        const twoPi = Math.PI * 2
        const pt = coordinate.getScreenXY(geometry.center)

        this.context.save()
        
        this.context.lineWidth = Style.Circle.lineWidth * coordinate.ratio
        this.context.strokeStyle = geometry.color

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()
        let fillFlag = false
        
        if (selectItem && selectItem.type == VectorType.Circle) {
            if (geometry.vectorId == selectItem.vectorId) {
                if(selectItem.selectIndex == SelectState.All){
                    this.context.strokeStyle = Style.Select.Circle.strokeStyle
                    this.context.fillStyle = Style.Select.Circle.fillStyle
                    fillFlag = true;
                    this.drawRec(geometry.points)
                }
                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
                    this.context.strokeStyle = Style.Select.Circle.strokeStyle
                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
                    this.drawCircle({
                        x:geometry.points[vertexIndex].x,
                        y:geometry.points[vertexIndex].y,
                        name: ElementEvents.StartAddWall
                    })
                    this.drawRec(geometry.points)
                }
            }
        } else if (draggingItem && draggingItem.type == VectorType.Circle) {
            if (geometry.vectorId == draggingItem.vectorId) {
                if(draggingItem.selectIndex == SelectState.All){
                    this.context.strokeStyle = Style.Select.Circle.strokeStyle
                    this.context.fillStyle = Style.Select.Circle.fillStyle
                    fillFlag = true;
                    this.drawRec(geometry.points)
                }
                else if(draggingItem.selectIndex.indexOf(SelectState.Vertex)>-1){
                    this.context.strokeStyle = Style.Select.Circle.strokeStyle
                    let vertexIndex = draggingItem.selectIndex.replace(SelectState.Vertex+'_','');
                    this.drawCircle({
                        x:geometry.points[vertexIndex].x,
                        y:geometry.points[vertexIndex].y,
                        name: ElementEvents.StartAddWall
                    })
                    this.drawRec(geometry.points)
                }
            }
        }

        if (focusItem && focusItem.type == VectorType.Circle) {
            if (geometry.vectorId == focusItem.vectorId) {
                if(focusItem.selectIndex == SelectState.All){
                    this.context.strokeStyle = Style.Focus.Circle.strokeStyle
                    this.context.fillStyle = Style.Focus.Circle.fillStyle
                    fillFlag = true;
                }
                else if(focusItem.selectIndex.indexOf(SelectState.Vertex)>-1){
                    this.context.strokeStyle = Style.Focus.Circle.strokeStyle
                    let vertexIndex = focusItem.selectIndex.replace(SelectState.Vertex+'_','');
                    this.drawCircle({
                        x:geometry.points[vertexIndex].x,
                        y:geometry.points[vertexIndex].y,
                        name: ElementEvents.StartAddWall
                    })
                    this.drawRec(geometry.points)
                }
            }
        }


        this.context.beginPath()
        this.context.arc(pt.x, pt.y, radius, 0, twoPi, true)
        this.context.stroke()
        if(fillFlag){
            this.context.fill()
        }
        this.context.restore()
    }

    drawIcon(geometry)
    {
        let radius = geometry.radius * coordinate.res * coordinate.zoom/Constant.defaultZoom * coordinate.ratio
        const twoPi = Math.PI * 2
        const pt = coordinate.getScreenXY(geometry.center)

        this.context.save()
        this.context.strokeStyle = Style.Icon.strokeStyle

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()
        let fillFlag = false
        
        if (selectItem && selectItem.type == VectorType.Icon) {
            if (geometry.vectorId == selectItem.vectorId) {
                if(selectItem.selectIndex == SelectState.All){
                    this.context.strokeStyle = Style.Select.Icon.strokeStyle
                    this.context.fillStyle = Style.Select.Icon.fillStyle
                    fillFlag = true;
                }
                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
                    this.context.strokeStyle = Style.Select.Icon.strokeStyle
                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
                    this.drawCircle({
                        x:geometry.points[vertexIndex].x,
                        y:geometry.points[vertexIndex].y,
                        name: ElementEvents.StartAddWall
                    })
                    this.drawRec(geometry.points)
                }
            }
        } else if (draggingItem && draggingItem.type == VectorType.Icon) {
            if (geometry.vectorId == draggingItem.vectorId) {
                if(draggingItem.selectIndex == SelectState.All){
                    this.context.strokeStyle = Style.Select.Icon.strokeStyle
                    this.context.fillStyle = Style.Select.Icon.fillStyle
                    fillFlag = true;
                }
                else if(draggingItem.selectIndex.indexOf(SelectState.Vertex)>-1){
                    this.context.strokeStyle = Style.Select.Icon.strokeStyle
                    let vertexIndex = draggingItem.selectIndex.replace(SelectState.Vertex+'_','');
                    this.drawCircle({
                        x:geometry.points[vertexIndex].x,
                        y:geometry.points[vertexIndex].y,
                        name: ElementEvents.StartAddWall
                    })
                    this.drawRec(geometry.points)
                }
            }
        }

        if (focusItem && focusItem.type == VectorType.Icon) {
            if (geometry.vectorId == focusItem.vectorId) {
                if(focusItem.selectIndex == SelectState.All){
                    this.context.strokeStyle = Style.Focus.Icon.strokeStyle
                    this.context.fillStyle = Style.Focus.Icon.fillStyle
                    fillFlag = true;
                }
                else if(focusItem.selectIndex.indexOf(SelectState.Vertex)>-1){
                    this.context.strokeStyle = Style.Focus.Icon.strokeStyle
                    let vertexIndex = focusItem.selectIndex.replace(SelectState.Vertex+'_','');
                    this.drawCircle({
                        x:geometry.points[vertexIndex].x,
                        y:geometry.points[vertexIndex].y,
                        name: ElementEvents.StartAddWall
                    })
                    this.drawRec(geometry.points)
                }
            }
        }


        this.context.beginPath()
        this.context.arc(pt.x, pt.y, radius, 0, twoPi, true)
        this.context.stroke()
        if(fillFlag){
            this.context.fill()
        }
        this.context.restore()

        this.context.save()
        this.setCanvasStyle(Style.Font)
        
        let fontSize = Math.ceil(radius * 14/20);
        this.context.font = fontSize + Style.Font.font   
        let center = coordinate.getScreenXY(geometry.center);
        this.context.fillText(geometry.value, center.x , center.y)
        this.context.restore()
    }

    drawArrow(geometry){

        this.context.save()
        this.context.beginPath()
        this.context.lineCap = 'round' //线段端点的样式
        this.context.strokeStyle = geometry.color
        this.context.lineWidth = Style.Arrow.lineWidth * coordinate.ratio

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        if (selectItem && selectItem.type == VectorType.Arrow) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Arrow.strokeStyle
                if(selectItem.selectIndex == SelectState.Start){
                    this.drawCircle({
                        x:geometry.startPoint.x,
                        y:geometry.startPoint.y,
                        name: ElementEvents.StartAddWall
                    })
                }
                else if(selectItem.selectIndex == SelectState.End){
                    this.drawCircle({
                        x:geometry.endPoint.x,
                        y:geometry.endPoint.y,
                        name: ElementEvents.StartAddWall
                    })
                }
            }
        } else if (draggingItem && draggingItem.type == VectorType.Arrow) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Arrow.strokeStyle
                if(draggingItem.selectIndex == SelectState.Start){
                    this.drawCircle({
                        x:geometry.startPoint.x,
                        y:geometry.startPoint.y,
                        name: ElementEvents.StartAddWall
                    })
                }
                else if(draggingItem.selectIndex == SelectState.End){
                    this.drawCircle({
                        x:geometry.endPoint.x,
                        y:geometry.endPoint.y,
                        name: ElementEvents.StartAddWall
                    })
                }
            }
        }

        if (focusItem && focusItem.type == VectorType.Arrow) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Arrow.strokeStyle
                if(focusItem.selectIndex == SelectState.Start){
                    this.drawCircle({
                        x:geometry.startPoint.x,
                        y:geometry.startPoint.y,
                        name: ElementEvents.StartAddWall
                    })
                }
                else if(focusItem.selectIndex == SelectState.End){
                    this.drawCircle({
                        x:geometry.endPoint.x,
                        y:geometry.endPoint.y,
                        name: ElementEvents.StartAddWall
                    })
                }
            }
        }

        let point1 = coordinate.getScreenXY(geometry.startPoint)
        let point2 = coordinate.getScreenXY(geometry.endPoint)
       
        var headlen = 10; //自定义箭头线的长度
        var theta = 20; //自定义箭头线与直线的夹角，个人觉得45°刚刚好
        //箭头线终点坐标
        var arrowX, arrowY; 
        let fromX = point2.x;
        let fromY = point2.y;
        let toX = point1.x;
        let toY = point1.y;
        // 计算各角度和对应的箭头终点坐标
        var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI;
        var angle1 = (angle + theta) * Math.PI / 180;
        var angle2 = (angle - theta) * Math.PI / 180;
        var topX = headlen * Math.cos(angle1);
        var topY = headlen * Math.sin(angle1);
        var botX = headlen * Math.cos(angle2);
        var botY = headlen * Math.sin(angle2);
        this.context.beginPath();
        //画直线
        this.context.moveTo(fromX, fromY);
        this.context.lineTo(toX, toY);
    
        arrowX = toX + topX;
        arrowY = toY + topY;
        //画上边箭头线
        this.context.moveTo(arrowX, arrowY);
        this.context.lineTo(toX, toY);
    
        arrowX = toX + botX;
        arrowY = toY + botY;
        //画下边箭头线
        this.context.lineTo(arrowX, arrowY);
        this.context.stroke()
        this.context.restore()
    }

    drawCircle(element) {
        let radius = null
        const twoPi = Math.PI * 2
        const pt = coordinate.getScreenXY(element)

        this.context.save()
        if (element.name == ElementEvents.StartAddWall) {
            radius = Style.Element.StartAddWall.radius * coordinate.ratio
            this.context.strokeStyle = Style.Element.StartAddWall.strokeStyle
            this.context.fillStyle = Style.Element.StartAddWall.fillStyle
        }

        this.context.beginPath()
        this.context.arc(pt.x, pt.y, radius, 0, twoPi, true)
        this.context.stroke()
        this.context.fill()
        this.context.restore()
    }

    drawRec(points){
        let point = coordinate.getScreenXY(points[0])
        this.context.moveTo(point.x, point.y)
        for (let i = 1; i < points.length; ++i) {
            point = coordinate.getScreenXY(points[i])
            this.context.lineTo(point.x, point.y)
        }
        this.context.closePath();
        this.context.stroke()
    }

    drawLine(element) {
        let start = coordinate.getScreenXY(element.start)
        let end = coordinate.getScreenXY(element.end)

        this.context.save()
        if (element.name == ElementEvents.VCheckLinesX) {
            this.context.lineWidth = Style.Element.VCheckLinesX.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.VCheckLinesX.strokeStyle
            this.context.setLineDash([3, 2, 2])
            start.y = 0
            end.y = this.context.canvas.clientHeight
        } else if (element.name == ElementEvents.VCheckLinesY) {
            this.context.lineWidth = Style.Element.VCheckLinesY.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.VCheckLinesY.strokeStyle
            this.context.setLineDash([3, 2, 2])
            start.x = 0
            end.x = this.context.canvas.clientWidth
        } else if (element.name == ElementEvents.NewWall) {
            this.context.lineWidth = Style.Element.NewWall.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.NewWall.strokeStyle
            if (element.state == 'error') {
                this.context.strokeStyle = Style.Element.NewWall.errorStrokeStyle
            }
        } else if (element.name == ElementEvents.CheckLinesX) {
            this.context.lineWidth = Style.Element.CheckLinesX.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.CheckLinesX.strokeStyle
            this.context.setLineDash([3, 2, 2])
        } else if (element.name == ElementEvents.CheckLinesY) {
            this.context.lineWidth = Style.Element.CheckLinesY.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.CheckLinesY.strokeStyle
            this.context.setLineDash([3, 2, 2])
        }

        this.context.beginPath()
        this.context.moveTo(start.x, start.y)
        this.context.lineTo(end.x, end.y)
        this.context.stroke()
        this.context.restore()

        this.context.save()
        this.context.lineWidth = Style.Point.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Point.strokeStyle
        this.context.fillStyle = Style.Point.fillStyle
        let radius = Style.Point.radius
        this.context.beginPath()
        this.context.arc(start.x, start.y, radius * coordinate.ratio, 0, Math.PI * 2, true)
        this.context.stroke()
        this.context.fill()
        this.context.restore()
    }

    drawTitle(geometry){
        
        this.context.save()
        this.setCanvasStyle(Style.Title)

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        if (selectItem && selectItem.type == VectorType.Title) {
            this.context.strokeStyle = Style.Select.Title.strokeStyle
            this.context.fillStyle = Style.Select.Title.fillStyle
        } else if (draggingItem && draggingItem.type == VectorType.Title) {
            this.context.strokeStyle = Style.Select.Title.strokeStyle
            this.context.fillStyle = Style.Select.Title.fillStyle
        }

        if (focusItem && focusItem.type == VectorType.Title) {
            this.context.strokeStyle = Style.Focus.Title.strokeStyle
            this.context.fillStyle = Style.Focus.Title.fillStyle
        }
        //this.context.font = `400 ${geometry.fontSize}px Microsoft YaHei`
        this.context.font = `${24*coordinate.ratio}px Microsoft YaHei`
        this.context.fillText(geometry.value, this.context.canvas.width/2, geometry.height*coordinate.ratio)
        this.context.restore()
    }
    
    drawBgImage(geometry){
        if(geometry.url != null){
            const pt = {
                x:geometry.center.x*coordinate.ratio,
                y:geometry.center.y*coordinate.ratio
            }

            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)
            {
                var img = new Image()
                img.src = geometry.src;
                img.crossOrigin=""
                img.onload = function () {
                    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, -geometry.width*coordinate.ratio/2, -geometry.height*coordinate.ratio/2, geometry.width*coordinate.ratio, geometry.height*coordinate.ratio)
                }
                else{
                    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)
                }   
            }

            const focusItem = stateService.getFocusItem()
            const selectItem = stateService.getSelectItem()
            if (focusItem && focusItem.type == VectorType.BgImage) {
                if (geometry.vectorId == focusItem.vectorId) {
                    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*coordinate.ratio/2, -geometry.height*coordinate.ratio/2, geometry.width, geometry.height)
                }
            }
            else if (selectItem && selectItem.type == VectorType.BgImage) {
                if (geometry.vectorId == selectItem.vectorId) {
                    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*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()
        }
    }

    drawCustomImage(geometry){
        if(geometry.url != null){
            const pt = coordinate.getScreenXY(geometry.center)
            this.context.save()

            this.context.translate(pt.x, pt.y)
            this.context.scale(geometry.scale,geometry.scale)
            this.context.translate(-1*geometry.ratio*geometry.width/2*coordinate.ratio, -1*geometry.ratio*geometry.height/2*coordinate.ratio)
            this.context.rotate((geometry.angle / 180) * Math.PI)
            this.context.translate(geometry.ratio*geometry.width/2*coordinate.ratio, geometry.ratio*geometry.height/2*coordinate.ratio)
            

            if(geometry.image == null)
            {
                var img = new Image()
                img.src = geometry.url;
                img.crossOrigin=""
                img.onload = function () {
                    this.context.drawImage(img, -img.width*coordinate.ratio, -img.height*coordinate.ratio)
                }.bind(this)
                geometry.image = img;
            }
            else{
                if(geometry.hasOwnProperty('width')){
                    this.context.drawImage(geometry.image, -geometry.ratio * geometry.width*coordinate.ratio, -geometry.ratio * geometry.height*coordinate.ratio,geometry.ratio * geometry.width*coordinate.ratio, geometry.ratio * geometry.height*coordinate.ratio)
                }
                else{
                    this.context.drawImage(geometry.image, -geometry.ratio * geometry.width*coordinate.ratio, -geometry.ratio * geometry.height*coordinate.ratio,geometry.ratio * geometry.width*coordinate.ratio, geometry.ratio * geometry.height*coordinate.ratio)
                }
                
            }
            const focusItem = stateService.getFocusItem()
            const selectItem = stateService.getSelectItem()
            if (focusItem && focusItem.type == VectorType.CustomImage) {
                if (geometry.vectorId == focusItem.vectorId) {
                    this.context.lineWidth = 2/geometry.scale;
                    this.context.strokeStyle = Style.Select.Tag.strokeStyle
                    this.context.fillStyle = Style.Select.Tag.fillStyle
                    this.context.strokeRect( -geometry.ratio * geometry.width, -geometry.ratio * geometry.height, geometry.ratio * geometry.width, geometry.ratio * geometry.height)
                }
            }
            else if (selectItem && selectItem.type == VectorType.CustomImage) {
                if (geometry.vectorId == selectItem.vectorId) {
                    this.context.lineWidth = 2/geometry.scale;
                    this.context.strokeStyle = Style.Select.Tag.strokeStyle
                    this.context.fillStyle = Style.Select.Tag.fillStyle
                    this.context.strokeRect( -geometry.ratio * geometry.width, -geometry.ratio * geometry.height, geometry.ratio * geometry.width, geometry.ratio * geometry.height)
                }
            }

            this.context.restore()

            // this.context.save()
            // if(geometry.points.length>1){
                
            //     this.context.strokeStyle = 'red'
            //     this.context.lineWidth = 4
            //     let p0 = coordinate.getScreenXY(geometry.points[0])
            //     let p1 = coordinate.getScreenXY(geometry.points[1])
            //     let p2 = coordinate.getScreenXY(geometry.points[2])
            //     let p3 = coordinate.getScreenXY(geometry.points[3])
            //     this.context.beginPath()
            //     this.context.moveTo(p0.x,p0.y);
            //     this.context.lineTo(p3.x,p3.y);
            //     this.context.lineTo(p2.x,p2.y);
            //     this.context.lineTo(p1.x,p1.y);
            //     this.context.closePath()
            //     this.context.stroke();
            // }
            // this.context.restore()
            // this.context.beginPath()
            // this.context.arc(pt.x-geometry.ratio * geometry.width/4*geometry.scale, pt.y-geometry.ratio * geometry.height/4*geometry.scale, 2 * coordinate.ratio, 0, Math.PI * 2, true)
            // this.context.stroke()
            // this.context.fill()
            // this.context.restore()
        }
      }

    drawCompass(geometry){
        
        this.context.save()
        this.context.strokeStyle = Style.Compass.strokeStyle
        this.context.fillStyle = Style.Compass.fillStyle

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        if (selectItem && selectItem.type == VectorType.Compass) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Compass.strokeStyle
                this.context.fillStyle = Style.Select.Compass.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.Compass) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Compass.strokeStyle
                this.context.fillStyle = Style.Select.Compass.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Compass) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Compass.strokeStyle
                this.context.fillStyle = Style.Focus.Compass.fillStyle
            }
        }

        this.context.translate(geometry.center.x*coordinate.ratio,geometry.center.y*coordinate.ratio)
        this.context.scale(coordinate.ratio,coordinate.ratio)
        this.context.translate(16, 36)
        this.context.rotate((geometry.angle)/180 * Math.PI)
        this.context.translate(-16, -36)
        
        //this.context.translate(18,26)
        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();

        this.context.save()
        this.context.font = 12*coordinate.ratio+`px Microsoft YaHei`
        let value = '角度：'+geometry.angle + '°';
        let fontWidth = this.context.measureText(value).width
        this.context.fillText(value, (geometry.center.x*coordinate.ratio-fontWidth/5), (geometry.center.y+85)*coordinate.ratio)
        this.context.restore()
    }

    setCanvasStyle(style) {
        for (const key in style) {
            if (key != 'isFill' && key != 'isStroke') {
                this.context[key] = style[key]
            }
        }
    }

    /*************************************************************************************家具**********************************************************************************************/
    drawSign(geometry) {
        if (geometry.geoType == VectorType.Cigaret) {
            this.drawCigaret(geometry)
            this.drawTestCircle(geometry)
        } else if (geometry.geoType == VectorType.FirePoint) {
            this.drawFirePoint(geometry)
            this.drawTestCircle(geometry)
        } else if (geometry.geoType == VectorType.LeftFootPrint) {
            this.drawLeftFootPrint(geometry)
            this.drawTestCircle(geometry)
        } else if (geometry.geoType == VectorType.RightFootPrint) {
            this.drawRightFootPrint(geometry)
            this.drawTestCircle(geometry)
        } else if (geometry.geoType == VectorType.LeftShoePrint) {
            this.drawLeftShoePrint(geometry)
            this.drawTestCircle(geometry)
        } else if (geometry.geoType == VectorType.RightShoePrint) {
            this.drawRightShoePrint(geometry)
            this.drawTestCircle(geometry)
        } else if (geometry.geoType == VectorType.FingerPrint) {
            this.drawFingerPrint(geometry)
            this.drawTestCircle(geometry)
        } else if (geometry.geoType == VectorType.DeadBody) {
            this.drawDeadBody(geometry)
            this.drawTestCircle(geometry)
        } else if (geometry.geoType == VectorType.BloodStain) {
            this.drawBloodStain(geometry)
            this.drawTestCircle(geometry)
        }
    }

    drawTestCircle(geometry) {
        // let radius = 0.1 * coordinate.res
        // const twoPi = Math.PI * 2
        // const center = coordinate.getScreenXY(geometry.center)

        // this.context.save()

        // this.context.strokeStyle = 'blue'
        // this.context.fillStyle = 'red'

        // this.context.beginPath()
        // this.context.arc(center.x, center.y, radius, 0, twoPi, true)
        // this.context.stroke()
        // this.context.fill()
        // this.context.restore()
    }

    drawCigaret(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle = Style.Sign.strokeStyle
        this.context.fillStyle = "rgba(0,0,0,1)";

        if (selectItem && selectItem.type == VectorType.Cigaret) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.Cigaret) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Cigaret) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Sign.strokeStyle
                this.context.fillStyle = Style.Focus.Sign.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)

        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio, (geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom)

        this.context.miterLimit = 4
        this.context.font = "15px ''"
        
        this.context.beginPath();
        this.context.moveTo(38.6342,4);
        this.context.bezierCurveTo(38.6342,4,41.1545,9.5,39.1546,12.5);
        this.context.bezierCurveTo(37.1547,15.5,39.1546,19,39.1546,19);
        this.context.bezierCurveTo(36.0776,15.923,34.9395,14,37.1547,10.5);
        this.context.bezierCurveTo(39.3699,7,38.6342,4,38.6342,4);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(4,29);
        this.context.bezierCurveTo(2.89543,29,2,29.8954,2,31);
        this.context.lineTo(2,39);
        this.context.bezierCurveTo(2,40.1046,2.89543,41,4,41);
        this.context.lineTo(34,41);
        this.context.lineTo(34,29);
        this.context.lineTo(4,29);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
    
        this.context.beginPath();
        this.context.moveTo(40.7714,20.5);
        this.context.bezierCurveTo(38.7716,17.5,41.2918,12,41.2918,12);
        this.context.bezierCurveTo(41.2918,12,40.5561,15,42.7713,18.5);
        this.context.bezierCurveTo(44.9866,22,43.8485,23.923,40.7714,27);
        this.context.bezierCurveTo(40.7714,27,42.7713,23.5,40.7714,20.5);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
      
        this.context.beginPath();
        this.context.moveTo(37.5,29);
        this.context.bezierCurveTo(36.6716,29,36,29.6716,36,30.5);
        this.context.lineTo(36,39.5);
        this.context.bezierCurveTo(36,40.3284,36.6716,41,37.5,41);
        this.context.bezierCurveTo(38.3284,41,39,40.3284,39,39.5);
        this.context.lineTo(39,30.5);
        this.context.bezierCurveTo(39,29.6716,38.3284,29,37.5,29);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
       
        this.context.beginPath();
        this.context.moveTo(42,29);
        this.context.bezierCurveTo(41.1716,29,40.5,29.6716,40.5,30.5);
        this.context.lineTo(40.5,39.5);
        this.context.bezierCurveTo(40.5,40.3284,41.1716,41,42,41);
        this.context.bezierCurveTo(42.8284,41,43.5,40.3284,43.5,39.5);
        this.context.lineTo(43.5,30.5);
        this.context.bezierCurveTo(43.5,29.6716,42.8284,29,42,29);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.restore();
    }
    
    drawFirePoint(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle="rgba(0,0,0,0)";
        this.context.miterLimit=4;
        this.context.font="15px ''";
        this.context.fillStyle="rgba(255,77,79,1)";

        if (selectItem && selectItem.type == VectorType.FirePoint) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.FirePoint) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.FirePoint) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Sign.strokeStyle
                this.context.fillStyle = Style.Focus.Sign.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)
        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32*coordinate.ratio, (geometry.getLen() * geometry.scale * coordinate.res) / 32*coordinate.ratio)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32)

        this.context.beginPath();
        this.context.moveTo(6.15863,28.8837);
        this.context.bezierCurveTo(4.84988,35.4972,11.9564,43.3721,15.8216,45);
        this.context.bezierCurveTo(15.8216,45,13.2504,38.8,14.8553,34.7442);
        this.context.bezierCurveTo(16.7879,29.8605,19.6868,25.9535,19.6868,25.9535);
        this.context.bezierCurveTo(19.6868,25.9535,20.1699,26.9302,20.6531,28.8837);
        this.context.bezierCurveTo(21.1363,30.8372,21.1363,31.3256,21.1363,31.3256);
        this.context.bezierCurveTo(21.1363,31.3256,22.9249,29.2771,23.5519,27.4186);
        this.context.bezierCurveTo(24.4676,24.7049,24.0351,20.093,24.0351,20.093);
        this.context.bezierCurveTo(24.0351,20.093,29.8166,25.9798,31.2823,30.8372);
        this.context.bezierCurveTo(32.8795,36.1307,30.7991,45,30.7991,45);
        this.context.bezierCurveTo(30.7991,45,40.7338,38.6512,41.9116,29.8605);
        this.context.bezierCurveTo(42.9992,21.7424,33.698,11.3023,33.698,11.3023);
        this.context.bezierCurveTo(33.698,11.3023,34.148,13.8357,33.698,15.6977);
        this.context.bezierCurveTo(33.3976,16.9405,32.2486,18.6279,32.2486,18.6279);
        this.context.bezierCurveTo(32.2486,18.6279,30.7991,13.884,27.9004,9.83721);
        this.context.bezierCurveTo(25.5478,6.55294,20.6531,3,20.6531,3);
        this.context.bezierCurveTo(20.6531,3,20.6531,9.34884,19.2037,13.7442);
        this.context.bezierCurveTo(17.7542,18.1395,12.9227,22.5349,12.9227,22.5349);
        this.context.lineTo(11.4733,15.2093);
        this.context.bezierCurveTo(10.0238,17.9767,7.12508,24,6.15863,28.8837);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
        this.context.restore();
    }

    drawLeftFootPrint(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle="rgba(0,0,0,0)";
        this.context.miterLimit=4;
        this.context.font="15px ''";
        this.context.fillStyle="rgba(0,0,0,1)";

        if (selectItem && selectItem.type == VectorType.LeftFootPrint) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.LeftFootPrint) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.LeftFootPrint) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Sign.strokeStyle
                this.context.fillStyle = Style.Focus.Sign.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)
        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio, (geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom)

        this.context.beginPath();
        this.context.moveTo(26.5,7);
        this.context.bezierCurveTo(25.1193,7,24,5.88071,24,4.5);
        this.context.bezierCurveTo(24,3.11929,25.1193,2,26.5,2);
        this.context.bezierCurveTo(27.8807,2,29,3.11929,29,4.5);
        this.context.bezierCurveTo(29,5.88071,27.8807,7,26.5,7);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(32,12);
        this.context.bezierCurveTo(30.3431,12,29,10.6569,29,9);
        this.context.bezierCurveTo(29,7.34315,30.3431,6,32,6);
        this.context.bezierCurveTo(33.6569,6,35,7.34315,35,9);
        this.context.bezierCurveTo(35,10.6569,33.6569,12,32,12);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(18,5);
        this.context.bezierCurveTo(18,6.10457,18.8954,7,20,7);
        this.context.bezierCurveTo(21.1046,7,22,6.10457,22,5);
        this.context.bezierCurveTo(22,3.89543,21.1046,3,20,3);
        this.context.bezierCurveTo(18.8954,3,18,3.89543,18,5);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(15,10);
        this.context.bezierCurveTo(13.8954,10,13,9.10457,13,8);
        this.context.bezierCurveTo(13,6.89543,13.8954,6,15,6);
        this.context.bezierCurveTo(16.1046,6,17,6.89543,17,8);
        this.context.bezierCurveTo(17,9.10457,16.1046,10,15,10);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(10,12.5);
        this.context.bezierCurveTo(10,13.3284,10.6716,14,11.5,14);
        this.context.bezierCurveTo(12.3284,14,13,13.3284,13,12.5);
        this.context.bezierCurveTo(13,11.6716,12.3284,11,11.5,11);
        this.context.bezierCurveTo(10.6716,11,10,11.6716,10,12.5);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(29.0721,31.5068);
        this.context.bezierCurveTo(29.0721,31.5068,28.037,29.0085,29.0721,27.2243);
        this.context.bezierCurveTo(30.1072,25.4402,30.9125,23.8936,31.6392,20.6224);
        this.context.bezierCurveTo(32.3658,17.3511,30.3143,9.73826,22.1998,10.0059);
        this.context.bezierCurveTo(14.0852,10.2735,13.2572,17.4108,13.0088,21.4254);
        this.context.bezierCurveTo(12.7604,25.44,17.8113,38.0193,21.4544,42.1233);
        this.context.bezierCurveTo(25.0975,46.2273,27.6647,46.5838,29.9831,45.424);
        this.context.bezierCurveTo(32.3016,44.2642,33.3778,42.5692,32.881,40.4282);
        this.context.bezierCurveTo(32.3842,38.2873,29.0721,31.5068,29.0721,31.5068);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
        this.context.restore();
    }

    drawRightFootPrint(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle="rgba(0,0,0,0)";
        this.context.miterLimit=4;
        this.context.font="15px ''";
        this.context.fillStyle="rgba(0,0,0,1)";

        if (selectItem && selectItem.type == VectorType.RightFootPrint) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.RightFootPrint) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.RightFootPrint) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Sign.strokeStyle
                this.context.fillStyle = Style.Focus.Sign.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)
        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio, (geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom)

        this.context.beginPath();
        this.context.moveTo(18.5,7);
        this.context.bezierCurveTo(19.8807,7,21,5.88071,21,4.5);
        this.context.bezierCurveTo(21,3.11929,19.8807,2,18.5,2);
        this.context.bezierCurveTo(17.1193,2,16,3.11929,16,4.5);
        this.context.bezierCurveTo(16,5.88071,17.1193,7,18.5,7);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(13,12);
        this.context.bezierCurveTo(14.6569,12,16,10.6569,16,9);
        this.context.bezierCurveTo(16,7.34315,14.6569,6,13,6);
        this.context.bezierCurveTo(11.3431,6,10,7.34315,10,9);
        this.context.bezierCurveTo(10,10.6569,11.3431,12,13,12);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(27,5);
        this.context.bezierCurveTo(27,6.10457,26.1046,7,25,7);
        this.context.bezierCurveTo(23.8954,7,23,6.10457,23,5);
        this.context.bezierCurveTo(23,3.89543,23.8954,3,25,3);
        this.context.bezierCurveTo(26.1046,3,27,3.89543,27,5);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(30,10);
        this.context.bezierCurveTo(31.1046,10,32,9.10457,32,8);
        this.context.bezierCurveTo(32,6.89543,31.1046,6,30,6);
        this.context.bezierCurveTo(28.8954,6,28,6.89543,28,8);
        this.context.bezierCurveTo(28,9.10457,28.8954,10,30,10);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(35,12.5);
        this.context.bezierCurveTo(35,13.3284,34.3284,14,33.5,14);
        this.context.bezierCurveTo(32.6716,14,32,13.3284,32,12.5);
        this.context.bezierCurveTo(32,11.6716,32.6716,11,33.5,11);
        this.context.bezierCurveTo(34.3284,11,35,11.6716,35,12.5);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(15.9279,31.5068);
        this.context.bezierCurveTo(15.9279,31.5068,16.963,29.0085,15.9279,27.2243);
        this.context.bezierCurveTo(14.8928,25.4402,14.0875,23.8936,13.3608,20.6224);
        this.context.bezierCurveTo(12.6342,17.3511,14.6857,9.73826,22.8002,10.0059);
        this.context.bezierCurveTo(30.9148,10.2735,31.7428,17.4108,31.9912,21.4254);
        this.context.bezierCurveTo(32.2396,25.44,27.1887,38.0193,23.5456,42.1233);
        this.context.bezierCurveTo(19.9025,46.2273,17.3353,46.5838,15.0169,45.424);
        this.context.bezierCurveTo(12.6984,44.2642,11.6222,42.5692,12.119,40.4282);
        this.context.bezierCurveTo(12.6158,38.2873,15.9279,31.5068,15.9279,31.5068);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
        this.context.restore();
    }

    drawLeftShoePrint(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle="rgba(0,0,0,0)";
        this.context.miterLimit=4;
        this.context.fillStyle="rgba(0,0,0,1)";
        this.context.font="   15px ''";

        if (selectItem && selectItem.type == VectorType.LeftShoePrint) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.LeftShoePrint) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.LeftShoePrint) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Sign.strokeStyle
                this.context.fillStyle = Style.Focus.Sign.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)
        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio, (geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom)

        this.context.beginPath();
        this.context.moveTo(29.9064,30.2635);
        this.context.lineTo(18.3897,31.999);
        this.context.bezierCurveTo(18.3897,31.999,14,24.0766,14,18.5101);
        this.context.bezierCurveTo(14,9.43774,16.8732,1.75238,22.3803,2.00508);
        this.context.bezierCurveTo(28.3968,2.28117,31,9.00467,31,15.3264);
        this.context.bezierCurveTo(31,18.8919,30.7015,20.0653,29.9867,22.8753);
        this.context.bezierCurveTo(29.7961,23.6244,29.5759,24.4898,29.3239,25.5478);
        this.context.bezierCurveTo(28.9957,26.926,29.9064,30.2635,29.9064,30.2635);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(30.5,34);
        this.context.lineTo(19,35.4383);
        this.context.bezierCurveTo(19,35.4383,19.316,39.7531,19.8057,42.3198);
        this.context.bezierCurveTo(20.2953,44.8865,22.9828,46.465,26.2418,45.8773);
        this.context.bezierCurveTo(29.5007,45.2895,32.4426,43.1091,31.9447,40.287);
        this.context.bezierCurveTo(31.4469,37.4649,30.5,34,30.5,34);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
        this.context.restore();
    }

    drawRightShoePrint(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle="rgba(0,0,0,0)";
        this.context.miterLimit=4;
        this.context.font="15px ''";
        this.context.fillStyle="rgba(0,0,0,1)";

        if (selectItem && selectItem.type == VectorType.RightShoePrint) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.RightShoePrint) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.RightShoePrint) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Sign.strokeStyle
                this.context.fillStyle = Style.Focus.Sign.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)
        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio, (geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom)

        this.context.beginPath();
        this.context.moveTo(16.0936,30.2635);
        this.context.lineTo(27.6103,31.999);
        this.context.bezierCurveTo(27.6103,31.999,32,24.0766,32,18.5101);
        this.context.bezierCurveTo(32,9.43774,29.1268,1.75238,23.6197,2.00508);
        this.context.bezierCurveTo(17.6032,2.28117,15,9.00467,15,15.3264);
        this.context.bezierCurveTo(15,18.8919,15.2985,20.0653,16.0133,22.8753);
        this.context.bezierCurveTo(16.2039,23.6244,16.4241,24.4898,16.6761,25.5478);
        this.context.bezierCurveTo(17.0043,26.926,16.0936,30.2635,16.0936,30.2635);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(15.5,34);
        this.context.lineTo(27,35.4383);
        this.context.bezierCurveTo(27,35.4383,26.684,39.7531,26.1943,42.3198);
        this.context.bezierCurveTo(25.7047,44.8865,23.0172,46.465,19.7582,45.8773);
        this.context.bezierCurveTo(16.4993,45.2895,13.5574,43.1091,14.0553,40.287);
        this.context.bezierCurveTo(14.5531,37.4649,15.5,34,15.5,34);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
        this.context.restore();
    }

    drawFingerPrint(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle="rgba(0,0,0,0)";
        this.context.miterLimit=4;
        this.context.font="15px ''";
        this.context.fillStyle="rgba(0,0,0,1)";

        if (selectItem && selectItem.type == VectorType.FingerPrint) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.FingerPrint) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.FingerPrint) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Sign.strokeStyle
                this.context.fillStyle = Style.Focus.Sign.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)
        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio, (geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom)

        this.context.beginPath();
        this.context.moveTo(43.4999,21.5);
        this.context.bezierCurveTo(43.4999,16.542,39.7109,10.8816,34.1276,7.63537);
        this.context.bezierCurveTo(28.4657,4.34348,20.8249,3.43868,12.9856,8.14233);
        this.context.bezierCurveTo(6.24753,12.1852,4.43294,18.9936,4.70686,25.2575);
        this.context.bezierCurveTo(4.97928,31.4873,7.31395,37.4063,9.18082,40.0733);
        this.context.bezierCurveTo(9.49752,40.5258,10.121,40.6358,10.5735,40.3191);
        this.context.bezierCurveTo(11.026,40.0024,11.136,39.3789,10.8193,38.9265);
        this.context.bezierCurveTo(9.18619,36.5933,6.96197,31.0477,6.70495,25.1701);
        this.context.bezierCurveTo(6.44942,19.3268,8.13483,13.3852,14.0146,9.85731);
        this.context.bezierCurveTo(21.1752,5.56085,28.0343,6.40615,33.1223,9.36438);
        this.context.bezierCurveTo(38.289,12.3683,41.4999,17.458,41.4999,21.5);
        this.context.bezierCurveTo(41.4999,24.6008,40.785,26.4882,39.8962,27.6385);
        this.context.bezierCurveTo(39.0131,28.7814,37.8743,29.3053,36.8039,29.5194);
        this.context.bezierCurveTo(33.9357,30.0933,31.4302,27.9399,30.9899,24.8585);
        this.context.bezierCurveTo(30.438,20.9948,27.6176,17.4999,23,17.4999);
        this.context.bezierCurveTo(20.6398,17.4999,18.5331,18.6977,17.4181,20.9277);
        this.context.bezierCurveTo(16.3192,23.1255,16.2513,26.1767,17.5583,29.8362);
        this.context.bezierCurveTo(18.5365,32.5753,20.7176,35.1665,22.999,37.2483);
        this.context.bezierCurveTo(25.2933,39.3417,27.7947,41.0153,29.5528,41.8943);
        this.context.bezierCurveTo(30.0468,42.1413,30.6474,41.9411,30.8944,41.4471);
        this.context.bezierCurveTo(31.1414,40.9531,30.9412,40.3525,30.4472,40.1055);
        this.context.bezierCurveTo(28.8719,39.3178,26.5208,37.7543,24.3471,35.7709);
        this.context.bezierCurveTo(22.1606,33.7757,20.2584,31.4503,19.4417,29.1636);
        this.context.bezierCurveTo(18.2488,25.8233,18.4309,23.3744,19.207,21.8222);
        this.context.bezierCurveTo(19.9669,20.3022,21.3602,19.4999,23,19.4999);
        this.context.bezierCurveTo(26.3823,19.4999,28.562,22.0051,29.01,25.1413);
        this.context.bezierCurveTo(29.5699,29.0599,32.9258,32.3349,37.1962,31.4806);
        this.context.bezierCurveTo(38.6259,31.1946,40.237,30.4684,41.4788,28.8614);
        this.context.bezierCurveTo(42.7149,27.2617,43.4999,24.8992,43.4999,21.5);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(28.3137,13.9002);
        this.context.bezierCurveTo(24.531,12.0661,19.8915,12.2936,16.2281,16.1858);
        this.context.bezierCurveTo(12.5481,20.0959,12.3111,24.8487,13.7047,29.4641);
        this.context.bezierCurveTo(15.1069,34.1077,18.1345,38.4781,20.738,41.3257);
        this.context.bezierCurveTo(21.1106,41.7333,21.0823,42.3658,20.6747,42.7385);
        this.context.bezierCurveTo(20.2671,43.1112,19.6346,43.0828,19.2619,42.6752);
        this.context.bezierCurveTo(16.5321,39.6895,13.3063,35.0635,11.7901,30.0422);
        this.context.bezierCurveTo(10.2654,24.9927,10.445,19.4122,14.7717,14.8151);
        this.context.bezierCurveTo(19.1085,10.2073,24.719,9.93463,29.1863,12.1005);
        this.context.bezierCurveTo(33.601,14.241,36.9999,18.8096,36.9999,24.0005);
        this.context.bezierCurveTo(36.9999,24.5528,36.5522,25.0005,35.9999,25.0005);
        this.context.bezierCurveTo(35.4477,25.0005,34.9999,24.5528,34.9999,24.0005);
        this.context.bezierCurveTo(34.9999,19.6911,32.1489,15.7597,28.3137,13.9002);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(23.3825,24.507);
        this.context.bezierCurveTo(23.93,24.4422,24.4265,24.8327,24.4928,25.3797);
        this.context.lineTo(24.493,25.381);
        this.context.bezierCurveTo(24.493,25.3814,24.4932,25.3825,23.5001,25.5001);
        this.context.lineTo(22.507,25.6177);
        this.context.bezierCurveTo(22.4421,25.0693,22.834,24.572,23.3825,24.507);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(23.5001,25.5001);
        this.context.lineTo(24.4932,25.3825);
        this.context.lineTo(24.4934,25.3844);
        this.context.lineTo(24.498,25.4166);
        this.context.bezierCurveTo(24.5026,25.4479,24.5105,25.4984,24.5228,25.5664);
        this.context.bezierCurveTo(24.5472,25.7024,24.5887,25.9078,24.6548,26.1683);
        this.context.bezierCurveTo(24.7871,26.6901,25.0169,27.4283,25.4033,28.2707);
        this.context.bezierCurveTo(26.1756,29.9543,27.5658,32.0393,30.0477,33.6633);
        this.context.bezierCurveTo(32.5055,35.2717,35.0375,35.6213,36.9758,35.563);
        this.context.bezierCurveTo(37.9445,35.534,38.7565,35.403,39.3219,35.2806);
        this.context.bezierCurveTo(39.6041,35.2195,39.8233,35.1608,39.9682,35.1188);
        this.context.bezierCurveTo(40.0407,35.0978,40.0944,35.081,40.1279,35.0701);
        this.context.bezierCurveTo(40.1373,35.0671,40.1451,35.0645,40.1512,35.0625);
        this.context.bezierCurveTo(40.1561,35.0609,40.16,35.0596,40.1629,35.0586);
        this.context.lineTo(40.1665,35.0574);
        this.context.lineTo(40.1686,35.0566);
        this.context.bezierCurveTo(40.6887,34.8739,41.2588,35.1466,41.4428,35.6665);
        this.context.bezierCurveTo(41.6271,36.1871,41.3544,36.7586,40.8337,36.9428);
        this.context.lineTo(40.5001,36.0001);
        this.context.bezierCurveTo(40.8337,36.9428,40.8342,36.9427,40.8337,36.9428);
        this.context.lineTo(40.8319,36.9435);
        this.context.lineTo(40.8295,36.9443);
        this.context.lineTo(40.8233,36.9465);
        this.context.lineTo(40.8046,36.9529);
        this.context.bezierCurveTo(40.7893,36.958,40.7687,36.9649,40.7427,36.9733);
        this.context.bezierCurveTo(40.6909,36.99,40.618,37.0128,40.5254,37.0396);
        this.context.bezierCurveTo(40.3403,37.0933,40.0763,37.1636,39.7451,37.2353);
        this.context.bezierCurveTo(39.0837,37.3785,38.1486,37.5287,37.0358,37.5621);
        this.context.bezierCurveTo(34.8114,37.6289,31.8434,37.2285,28.9525,35.3369);
        this.context.bezierCurveTo(26.0858,33.4609,24.476,31.0459,23.5854,29.1045);
        this.context.bezierCurveTo(23.1404,28.1344,22.8731,27.2789,22.7161,26.66);
        this.context.bezierCurveTo(22.6376,26.3502,22.5864,26.0986,22.5543,25.9202);
        this.context.bezierCurveTo(22.5383,25.8309,22.527,25.7598,22.5195,25.7088);
        this.context.bezierCurveTo(22.5157,25.6833,22.5129,25.6628,22.5108,25.6476);
        this.context.lineTo(22.5084,25.6286);
        this.context.lineTo(22.5076,25.6222);
        this.context.lineTo(22.5073,25.6197);
        this.context.lineTo(22.507,25.6177);
        this.context.bezierCurveTo(22.507,25.6172,22.507,25.6177,23.5001,25.5001);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
        this.context.restore();
    }

    drawDeadBody(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle="rgba(0,0,0,0)";
        this.context.miterLimit=4;
        this.context.font="15px ''";
        this.context.fillStyle="#040101";

        if (selectItem && selectItem.type == VectorType.DeadBody) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.DeadBody) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.DeadBody) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Sign.strokeStyle
                this.context.fillStyle = Style.Focus.Sign.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)
        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio, (geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom)

        this.context.beginPath();
        this.context.moveTo(5.91335,12.2268);
        this.context.bezierCurveTo(4.35883,11.5123,3.17581,11.4098,2.00721,12.6867);
        this.context.lineTo(2,13.7478);
        this.context.bezierCurveTo(2.29231,15.0665,3.42071,15.5909,4.46298,16.0752);
        this.context.bezierCurveTo(4.51387,16.0989,4.56455,16.1224,4.61492,16.146);
        this.context.bezierCurveTo(11.3957,19.2976,16.3298,24.5608,21.2386,29.8665);
        this.context.bezierCurveTo(21.9491,30.6341,21.8878,31.0197,20.7841,31.1647);
        this.context.bezierCurveTo(19.2801,31.3628,18.7752,32.3001,19.0853,33.6654);
        this.context.bezierCurveTo(19.5326,35.6498,20.0123,37.627,20.6327,39.5689);
        this.context.bezierCurveTo(20.7153,39.9046,20.8859,40.2134,21.1276,40.4646);
        this.context.bezierCurveTo(21.3692,40.7159,21.6735,40.9009,22.0104,41.0015);
        this.context.lineTo(22.7318,41.0015);
        this.context.bezierCurveTo(23.5253,40.5699,23.9725,39.9403,23.785,39.0313);
        this.context.bezierCurveTo(23.7124,38.6795,23.6668,38.3204,23.6213,37.9616);
        this.context.bezierCurveTo(23.5492,37.3932,23.4772,36.8256,23.2981,36.29);
        this.context.bezierCurveTo(22.8184,34.8645,23.3702,34.5816,24.6975,34.7372);
        this.context.bezierCurveTo(26.9098,34.9961,28.9508,33.7344,30.5482,32.747);
        this.context.bezierCurveTo(31.0238,32.453,31.46,32.1833,31.8497,31.9853);
        this.context.bezierCurveTo(32.2324,31.7909,32.6231,31.5841,33.0213,31.3734);
        this.context.bezierCurveTo(34.3907,30.6486,35.848,29.8773,37.3681,29.4032);
        this.context.bezierCurveTo(37.9053,29.2344,38.2276,29.511,38.5499,29.7877);
        this.context.bezierCurveTo(38.6194,29.8473,38.6888,29.9069,38.7603,29.962);
        this.context.bezierCurveTo(40.191,31.0821,41.6277,32.2081,43.0705,33.34);
        this.context.bezierCurveTo(43.9,33.9908,44.7584,34.2986,45.5772,33.3789);
        this.context.bezierCurveTo(46.3959,32.4593,45.9018,31.6634,45.1444,30.956);
        this.context.bezierCurveTo(44.6458,30.494,44.1439,30.0346,43.6418,29.575);
        this.context.bezierCurveTo(42.4948,28.5252,41.3468,27.4745,40.2355,26.3895);
        this.context.bezierCurveTo(39.3158,25.4876,38.4213,25.0313,37.0796,25.5442);
        this.context.bezierCurveTo(34.0823,26.6973,25.2493,20.2632,24.7877,18.7175);
        this.context.bezierCurveTo(24.4268,17.5159,24.8984,16.0559,25.3601,14.6263);
        this.context.bezierCurveTo(25.5168,14.1411,25.6724,13.6594,25.794,13.1925);
        this.context.bezierCurveTo(26.1835,11.6715,25.5343,10.7589,24.1889,10.3628);
        this.context.bezierCurveTo(21.4117,9.55275,18.6056,8.84533,15.796,8.13791);
        this.context.bezierCurveTo(14.768,7.87969,13.7293,7.87262,13.3686,9.16721);
        this.context.bezierCurveTo(13.0404,10.3522,13.6211,11.0136,14.7356,11.4133);
        this.context.bezierCurveTo(16.5065,12.0535,18.263,12.7256,20.0159,13.433);
        this.context.bezierCurveTo(20.0817,13.4588,20.1525,13.4826,20.2245,13.5068);
        this.context.bezierCurveTo(20.6456,13.6484,21.1094,13.8043,20.8815,14.4658);
        this.context.bezierCurveTo(20.4549,15.6984,20.0227,16.9292,19.5629,18.2388);
        this.context.bezierCurveTo(19.3774,18.7669,19.1875,19.3079,18.9916,19.8671);
        this.context.bezierCurveTo(14.9916,16.4537,10.4759,14.3208,5.91335,12.2268);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(34.7105,32.0067);
        this.context.bezierCurveTo(32.6436,31.8937,31.1351,33.2167,31.0119,35.2432);
        this.context.bezierCurveTo(30.9738,35.7034,31.0276,36.1666,31.17,36.6057);
        this.context.bezierCurveTo(31.3124,37.0448,31.5406,37.4509,31.8411,37.8002);
        this.context.bezierCurveTo(32.1417,38.1495,32.5086,38.435,32.9204,38.6399);
        this.context.bezierCurveTo(33.3322,38.8448,33.7805,38.965,34.2391,38.9935);
        this.context.bezierCurveTo(35.1675,39.0499,36.0808,38.7378,36.7827,38.1244);
        this.context.bezierCurveTo(37.4845,37.511,37.9188,36.6452,37.9922,35.7133);
        this.context.bezierCurveTo(38.0231,35.2524,37.9623,34.79,37.8134,34.353);
        this.context.bezierCurveTo(37.6645,33.916,37.4305,33.5132,37.1249,33.1681);
        this.context.bezierCurveTo(36.8194,32.823,36.4486,32.5426,36.034,32.3432);
        this.context.bezierCurveTo(35.6195,32.1438,35.1695,32.0294,34.7105,32.0067);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
        this.context.restore();
    }

    drawBloodStain(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle="rgba(0,0,0,0)";
        this.context.miterLimit=4;
        this.context.font="15px ''";
        this.context.fillStyle="rgba(255,77,79,1)";

        if (selectItem && selectItem.type == VectorType.BloodStain) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.BloodStain) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Sign.strokeStyle
                this.context.fillStyle = Style.Select.Sign.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.BloodStain) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Sign.strokeStyle
                this.context.fillStyle = Style.Focus.Sign.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)
        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio, (geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom*coordinate.ratio)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32 * coordinate.zoom/Constant.defaultZoom)

        this.context.beginPath();
        this.context.moveTo(11.7832,43.4124);
        this.context.bezierCurveTo(13.9788,44.5378,19.4679,44.5355,19.468,38.91);
        this.context.bezierCurveTo(19.468,33.2844,21.1146,29.3458,26.0549,28.7831);
        this.context.bezierCurveTo(26.3893,28.745,26.7385,28.7077,27.1002,28.669);
        this.context.bezierCurveTo(32.0834,28.1363,39.425,27.3516,42.5224,20.9046);
        this.context.bezierCurveTo(44.2471,17.3148,41.7011,10.7791,28.2507,7.40168);
        this.context.bezierCurveTo(14.3038,3.89964,6.84294,7.40168,5.19509,13.0273);
        this.context.bezierCurveTo(3.54725,18.6528,12.8799,26.5313,12.8799,26.5313);
        this.context.bezierCurveTo(12.8799,26.5313,16.1646,30.722,15.0766,33.2844);
        this.context.bezierCurveTo(14.9608,34.6355,13.8708,35.0844,12.6391,35.5917);
        this.context.bezierCurveTo(11.5358,36.0461,10.3188,36.5474,9.58641,37.7858);
        this.context.bezierCurveTo(8.03737,40.4055,9.58751,42.2871,11.7832,43.4124);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(32.8372,34.4465);
        this.context.bezierCurveTo(32.3576,36.4893,31.5484,37,29.9586,37);
        this.context.bezierCurveTo(28.3688,37,26.6003,35.9786,27.08,34.4465);
        this.context.bezierCurveTo(27.5598,32.9144,29.5522,32,31.1421,32);
        this.context.bezierCurveTo(32.7319,32,33.3169,32.4037,32.8372,34.4465);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();

        this.context.beginPath();
        this.context.moveTo(37.4462,43);
        this.context.bezierCurveTo(38.8566,43,40,42.3284,40,41.5);
        this.context.bezierCurveTo(40,40.6716,38.3459,40,36.9355,40);
        this.context.bezierCurveTo(35.525,40,35,40.6716,35,41.5);
        this.context.bezierCurveTo(35,42.3284,36.0358,43,37.4462,43);
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
        this.context.restore();
    }
    /***************************************************************************************************************************************************************************************/
}

const draw = new Draw()
export { draw }