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 { compassService } from '../Service/CompassService' import { furnitureService } from '../Service/FurnitureService.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(color) { this.context.save() this.context.fillStyle = color this.context.fillRect(0, 0, this.context.canvas.width, this.context.canvas.height) this.context.restore() } // setSVGAttr(svgId,width,height){ // } drawWall(vector, styleType) { let start = floorplanService.getPoint(vector.start) let end = floorplanService.getPoint(vector.end) let points = [] points.push(start) for (let i = 0; i < vector.children.length; ++i) { let symbol = floorplanService.getSymbol(vector.children[i]) points.push(symbol.startPoint) points.push(symbol.endPoint) } 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.lineJoin= 'miter'; this.context.strokeStyle = Style.Wall.strokeStyle if (vector.out || vector.important) { this.context.lineWidth = Style.Wall.important.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Wall.important.strokeStyle } else { this.context.lineWidth = Style.Wall.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Wall.strokeStyle } const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() //下载的时候，根据样式 if (styleType) { if (styleType == 'style-1') { if (vector.out || vector.important) { this.context.lineWidth = Style.DownLoad.style1.Wall.important.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Wall.important.strokeStyle } else { this.context.lineWidth = Style.DownLoad.style1.Wall.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Wall.strokeStyle } } else if (styleType == 'style-2') { if (vector.out || vector.important) { this.context.lineWidth = Style.DownLoad.style2.Wall.important.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Wall.important.strokeStyle } else { this.context.lineWidth = Style.DownLoad.style2.Wall.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Wall.strokeStyle } } else if (styleType == 'style-3') { if (vector.out || vector.important) { this.context.lineWidth = Style.DownLoad.style3.Wall.important.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Wall.important.strokeStyle } else { this.context.lineWidth = Style.DownLoad.style3.Wall.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Wall.strokeStyle } } else if (styleType == 'style-4') { if (vector.out || vector.important) { this.context.lineWidth = Style.DownLoad.style4.Wall.important.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Wall.important.strokeStyle } else { this.context.lineWidth = Style.DownLoad.style4.Wall.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Wall.strokeStyle } } } else { if (selectItem && selectItem.type == VectorType.Wall) { if (vector.vectorId == selectItem.vectorId) { if (vector.out || vector.important) { this.context.strokeStyle = Style.Select.Wall_out.strokeStyle } else { this.context.strokeStyle = Style.Select.Wall.strokeStyle } } } else if (draggingItem && draggingItem.type == VectorType.Wall) { if (vector.vectorId == draggingItem.vectorId) { if (vector.out || vector.important) { this.context.strokeStyle = Style.Select.Wall_out.strokeStyle } else { 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() // const mid = { // x: (start.x + end.x) / 2, // y: (start.y + end.y) / 2, // } // this.drawText(mid, vector.vectorId) if ( (selectItem && selectItem.type == VectorType.Wall && vector.vectorId == selectItem.vectorId) || (draggingItem && draggingItem.type == VectorType.Wall && vector.vectorId == draggingItem.vectorId) || (focusItem && focusItem.type == VectorType.Wall && vector.vectorId == focusItem.vectorId) ) { //添加测量值 this.drawMeasureTxt(start, end) } } 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, angle) { this.context.save() this.setCanvasStyle(Style.Font) if (coordinate.ratio == Constant.ratio) { this.context.font = '36px Microsoft YaHei' } else { 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 }) } if (angle) { this.context.translate(pt.x, pt.y) this.context.rotate(angle) //this.context.strokeText(txt, 0, 0) this.context.fillText(txt, 0, 0) } else { //this.context.strokeText(txt, pt.x, pt.y) this.context.fillText(txt, pt.x, pt.y) } this.context.restore() } drawSingleDoor(geometry, styleType, noEnter) { 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 }) } const distance = mathUtil.getDistance(points[0], points[1]) this.context.save() this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio this.context.lineCap = 'square' this.context.strokeStyle = Style.Symbol.strokeStyle let isFill = false if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Symbol.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Symbol.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Symbol.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Symbol.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.SingleDoor && selectItem.selectIndex == SelectState.All) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle this.context.fillStyle = Style.Select.Symbol.fillStyle isFill = true } } else if (draggingItem && draggingItem.type == VectorType.SingleDoor && draggingItem.selectIndex == SelectState.All) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle this.context.fillStyle = Style.Select.Symbol.fillStyle isFill = true } } if (focusItem && focusItem.type == VectorType.SingleDoor) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Symbol.strokeStyle this.context.fillStyle = Style.Focus.Symbol.fillStyle isFill = true } } } this.context.beginPath() this.context.moveTo(points[0].x, points[0].y) this.context.lineTo(points[1].x, points[1].y) this.context.arcTo(points[2].x, points[2].y, points[3].x, points[3].y, distance) // 创建弧 this.context.closePath() this.context.stroke() if (isFill) { this.context.fill() } this.context.restore() if (!noEnter && geometry.enter != null) { this.drawEntranceDoor(geometry) } } drawDoubleDoor(geometry, styleType, noEnter) { 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 }) } const distance = mathUtil.getDistance(points[0], points[1]) this.context.save() this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio this.context.lineCap = 'square' this.context.strokeStyle = Style.Symbol.strokeStyle let isFill = false if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Symbol.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Symbol.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Symbol.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Symbol.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.DoubleDoor && selectItem.selectIndex == SelectState.All) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle this.context.fillStyle = Style.Select.Symbol.fillStyle isFill = true } } else if (draggingItem && draggingItem.type == VectorType.DoubleDoor && draggingItem.selectIndex == SelectState.All) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle this.context.fillStyle = Style.Select.Symbol.fillStyle isFill = true } } if (focusItem && focusItem.type == VectorType.DoubleDoor) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Symbol.strokeStyle this.context.fillStyle = Style.Focus.Symbol.fillStyle isFill = true } } } this.context.beginPath() this.context.moveTo(points[0].x, points[0].y) this.context.lineTo(points[1].x, points[1].y) this.context.arcTo(points[4].x, points[4].y, points[5].x, points[5].y, distance) // 创建弧 this.context.closePath() this.context.stroke() if (isFill) { this.context.fill() } this.context.beginPath() this.context.moveTo(points[2].x, points[2].y) this.context.lineTo(points[1].x, points[1].y) this.context.arcTo(points[4].x, points[4].y, points[3].x, points[3].y, distance) // 创建弧 this.context.closePath() this.context.stroke() if (isFill) { this.context.fill() } this.context.restore() if (!noEnter && geometry.enter != null) { this.drawEntranceDoor(geometry) } } drawSlideDoor(geometry, styleType, noEnter) { 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 }) } this.context.save() this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Symbol.strokeStyle //this.context.fillStyle = Style.Symbol.fillStyle if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Symbol.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Symbol.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Symbol.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Symbol.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.SlideDoor && selectItem.selectIndex == SelectState.All) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle } } else if (draggingItem && draggingItem.type == VectorType.SlideDoor && draggingItem.selectIndex == SelectState.All) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle } } if (focusItem && focusItem.type == VectorType.SlideDoor) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Symbol.strokeStyle } } } 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.beginPath() this.context.moveTo(points[4].x, points[4].y) this.context.lineTo(points[5].x, points[5].y) this.context.lineTo(points[6].x, points[6].y) this.context.lineTo(points[7].x, points[7].y) this.context.closePath() this.context.stroke() this.context.restore() if (!noEnter && geometry.enter != null) { this.drawEntranceDoor(geometry) } } drawSingleWindow(geometry, styleType) { 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 }) } this.context.save() this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Symbol.strokeStyle if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Symbol.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Symbol.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Symbol.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Symbol.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.SingleWindow && selectItem.selectIndex == SelectState.All) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle } } else if (draggingItem && draggingItem.type == VectorType.SingleWindow && draggingItem.selectIndex == SelectState.All) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle } } if (focusItem && focusItem.type == VectorType.SingleWindow) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Symbol.strokeStyle } } } this.context.beginPath() this.context.moveTo(points[0].x, points[0].y) this.context.lineTo(points[1].x, points[1].y) this.context.stroke() this.context.beginPath() this.context.moveTo(points[2].x, points[2].y) this.context.lineTo(points[3].x, points[3].y) this.context.lineTo(points[4].x, points[4].y) this.context.lineTo(points[5].x, points[5].y) this.context.closePath() this.context.stroke() this.context.restore() } drawBayWindow(geometry, styleType) { 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 }) } this.context.save() this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Symbol.strokeStyle //this.context.fillStyle = Style.Symbol.fillStyle let isFill = false if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Symbol.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Symbol.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Symbol.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Symbol.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.BayWindow && selectItem.selectIndex == SelectState.All) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle this.context.fillStyle = Style.Select.Symbol.fillStyle isFill = true } } else if (draggingItem && draggingItem.type == VectorType.BayWindow && draggingItem.selectIndex == SelectState.All) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle this.context.fillStyle = Style.Select.Symbol.fillStyle isFill = true } } if (focusItem && focusItem.type == VectorType.BayWindow) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Symbol.strokeStyle this.context.fillStyle = Style.Focus.Symbol.fillStyle isFill = true } } } 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() if (isFill) { this.context.fill() } this.context.beginPath() this.context.moveTo(points[5].x, points[5].y) this.context.lineTo(points[6].x, points[6].y) this.context.lineTo(points[7].x, points[7].y) this.context.lineTo(points[4].x, points[4].y) //this.context.closePath() this.context.stroke() this.context.restore() } drawFrenchWindow(geometry, styleType) { 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 }) } this.context.save() this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Symbol.strokeStyle if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Symbol.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Symbol.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Symbol.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Symbol.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.FrenchWindow && selectItem.selectIndex == SelectState.All) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle } } else if (draggingItem && draggingItem.type == VectorType.FrenchWindow && draggingItem.selectIndex == SelectState.All) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle } } if (focusItem && focusItem.type == VectorType.FrenchWindow) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Symbol.strokeStyle } } } this.context.beginPath() this.context.moveTo(points[0].x, points[0].y) this.context.lineTo(points[1].x, points[1].y) this.context.moveTo(points[2].x, points[2].y) this.context.lineTo(points[3].x, points[3].y) this.context.moveTo(points[4].x, points[4].y) this.context.lineTo(points[5].x, points[5].y) this.context.moveTo(points[2].x, points[2].y) this.context.lineTo(points[4].x, points[4].y) this.context.moveTo(points[3].x, points[3].y) this.context.lineTo(points[5].x, points[5].y) this.context.moveTo(points[6].x, points[6].y) this.context.lineTo(points[7].x, points[7].y) this.context.stroke() this.context.restore() } drawPass(geometry, styleType) { 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 }) } this.context.save() this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Symbol.strokeStyle if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Symbol.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Symbol.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Symbol.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Symbol.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Symbol.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.Pass && selectItem.selectIndex == SelectState.All) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle } } else if (draggingItem && draggingItem.type == VectorType.Pass && draggingItem.selectIndex == SelectState.All) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Symbol.strokeStyle } } if (focusItem && focusItem.type == VectorType.Pass) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Symbol.strokeStyle } } } 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.beginPath() this.context.moveTo(points[4].x, points[4].y) this.context.lineTo(points[5].x, points[5].y) this.context.setLineDash([3, 2, 2]) //this.context.dashedLine(points[4].x, points[4].y, points[5].x, points[5].y, dashGapArray); this.context.stroke() this.context.beginPath() this.context.moveTo(points[6].x, points[6].y) this.context.lineTo(points[7].x, points[7].y) this.context.setLineDash([3, 2, 2]) //this.context.dashedLine(points[6].x, points[6].y, points[7].x, points[7].y, dashGapArray); this.context.stroke() this.context.restore() } drawBeam(geometry, styleType) { 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 }) } this.context.save() this.context.lineWidth = Style.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Component.strokeStyle let isFill = false if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Component.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Component.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Component.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Component.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.Beam) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Component.strokeStyle this.context.fillStyle = Style.Select.Component.fillStyle isFill = true } } else if (draggingItem && draggingItem.type == VectorType.Beam) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Component.strokeStyle this.context.fillStyle = Style.Select.Component.fillStyle isFill = true } } if (focusItem && focusItem.type == VectorType.Beam) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Component.strokeStyle this.context.fillStyle = Style.Focus.Component.fillStyle isFill = true } } } 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() if (isFill) { this.context.fill() } //this.context.beginPath() this.context.moveTo(points[0].x, points[0].y) this.context.lineTo(points[2].x, points[2].y) //this.context.stroke() //this.context.beginPath() this.context.moveTo(points[1].x, points[1].y) this.context.lineTo(points[3].x, points[3].y) this.context.stroke() this.context.restore() } drawFlue(geometry, styleType) { 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 }) } this.context.save() this.context.lineWidth = Style.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Component.strokeStyle let isFill = false if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Component.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Component.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Component.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Component.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.Flue) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Component.strokeStyle this.context.fillStyle = Style.Select.Component.fillStyle isFill = true } } else if (draggingItem && draggingItem.type == VectorType.Flue) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Component.strokeStyle this.context.fillStyle = Style.Select.Component.fillStyle isFill = true } } if (focusItem && focusItem.type == VectorType.Flue) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Component.strokeStyle this.context.fillStyle = Style.Focus.Component.fillStyle isFill = true } } } 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() if (isFill) { this.context.fill() } this.context.beginPath() this.context.moveTo(points[4].x, points[4].y) this.context.lineTo(points[5].x, points[5].y) this.context.lineTo(points[6].x, points[6].y) this.context.lineTo(points[7].x, points[7].y) this.context.closePath() this.context.stroke() this.context.moveTo(points[4].x, points[4].y) this.context.lineTo(points[8].x, points[8].y) this.context.lineTo(points[6].x, points[6].y) this.context.stroke() this.context.restore() } drawCorridor(geometry, styleType) { 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 }) } this.context.save() this.context.lineWidth = Style.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Component.strokeStyle if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Component.strokeStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Component.strokeStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Component.strokeStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Component.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Component.strokeStyle } } else { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() if (selectItem && selectItem.type == VectorType.Corridor) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Component.strokeStyle } } else if (draggingItem && draggingItem.type == VectorType.Corridor) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Component.strokeStyle } } if (focusItem && focusItem.type == VectorType.Corridor) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Component.strokeStyle } } } 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() for (let i = 4; i < points.length - 1; i += 2) { this.context.moveTo(points[i].x, points[i].y) this.context.lineTo(points[i + 1].x, points[i + 1].y) } this.context.stroke() this.context.restore() } drawTag(geometry, styleType, hide) { this.context.save() this.context.lineWidth = Style.Tag.lineWidth * coordinate.ratio this.context.strokeStyle = Style.Tag.strokeStyle this.context.fillStyle = Style.Tag.fillStyle if (styleType) { if (styleType == 'style-1') { this.context.lineWidth = Style.DownLoad.style1.Tag.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style1.Tag.strokeStyle this.context.fillStyle = Style.DownLoad.style1.Tag.fillStyle } else if (styleType == 'style-2') { this.context.lineWidth = Style.DownLoad.style2.Tag.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style2.Tag.strokeStyle this.context.fillStyle = Style.DownLoad.style2.Tag.fillStyle } else if (styleType == 'style-3') { this.context.lineWidth = Style.DownLoad.style3.Tag.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style3.Tag.strokeStyle this.context.fillStyle = Style.DownLoad.style3.Tag.fillStyle } else if (styleType == 'style-4') { this.context.lineWidth = Style.DownLoad.style4.Tag.lineWidth * coordinate.ratio this.context.strokeStyle = Style.DownLoad.style4.Tag.strokeStyle this.context.fillStyle = Style.DownLoad.style4.Tag.fillStyle } } else { 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 } } } //正在添加 if (geometry.adding) { 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 }) } this.context.strokeStyle = Style.Tag.strokeStyle_adding this.context.fillStyle = Style.Tag.fillStyle_adding 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() for (let i = 4; i < points.length - 1; i += 2) { this.context.moveTo(points[i].x, points[i].y) this.context.lineTo(points[i + 1].x, points[i + 1].y) } this.context.stroke() } else { const fontSize = coordinate.ratio == Constant.ratio ? 36 : 12 this.context.font = `400 ${fontSize}px Microsoft YaHei` //根据文字的长度，更新标注范围 let title = geometry.title if (!hide && (title == null || title.trim() == '')) { console.log(floorplanService.$app.config) // title = '请输入名称' title = floorplanService.$app.config.i18n('cad.input') } geometry.des += '' if (geometry.des != '') { geometry.sideWidth = Math.max(this.context.measureText(title).width, this.context.measureText(parseFloat(geometry.des.replace(',', '')).toFixed(2)).width) 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 = { x: geometry.center.x, y: geometry.center.y } pt = coordinate.getScreenXY({ x: geometry.center.x, y: geometry.center.y }) const fontWidth1 = this.context.measureText(title).width 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 }) let fontWidth2 = this.context.measureText(geometry.des + 'm²').width if (geometry.des != '' && geometry.unit == 'ft') { fontWidth2 = this.context.measureText(parseFloat(geometry.des.replace(',', '')).toFixed(2) + 'ft²').width } const line2 = mathUtil.createLine1(points[2], points[3]) const fontStart1 = mathUtil.getDisPointsLine(line1, pt, fontWidth1 / 2, fontWidth1 / 2) const fontStart2 = mathUtil.getDisPointsLine(line2, { x: (points[2].x + points[3].x) / 2, y: (points[2].y + points[3].y) / 2 }, fontWidth2 / 2, fontWidth2 / 2) if (fontStart1.newpoint1.x < fontStart1.newpoint2.x) { this.context.fillText(title, fontStart1.newpoint1.x, fontStart1.newpoint1.y) } else { this.context.fillText(title, fontStart1.newpoint2.x, fontStart1.newpoint2.y) } } this.context.restore() } // drawFurniture2(geometry) { // // //this.app.store.getAppImage(`images/cad/furnitures/${this.uiControl.selectUI}.svg`).then(img => {}) // // var img = new Image() // // // img.src = 'chart.svg'; // // // if(geometry.geoType == ''){ // // // img.src = ''; // // // } // // document.body.appendChild(img) // // img.onload = function () { // // var width = img.clientWidth * 1.5 // // var height = img.clientHeight * 1.5 // // var x = 2 // // var y = 2 // // this.context.drawImage(img, x, y, width, height) // // } // this.context.save() // let imgWidth = geometry.sideLength * coordinate.res*50 // let imgHeight = geometry.sideLength * coordinate.res*50 // const pt = coordinate.getScreenXY({ // x: geometry.center.x - geometry.sideLength *50/ 2, // y: geometry.center.y + geometry.sideLength *50/ 2, // }) // // furnitureService.getFurniture(geometry.geoType).then(img => { // // this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight) // // }) // let img = furnitureService.getFurniture(geometry.geoType) // this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight) // 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 } else if (element.name == ElementEvents.StartSymbolPoints) { radius = Style.Element.StartSymbolPoints.radius * coordinate.ratio this.context.strokeStyle = Style.Element.StartSymbolPoints.strokeStyle this.context.fillStyle = Style.Element.StartSymbolPoints.fillStyle } else if (element.name == ElementEvents.EndSymbolPoints) { radius = Style.Element.EndSymbolPoints.radius * coordinate.ratio this.context.strokeStyle = Style.Element.EndSymbolPoints.strokeStyle this.context.fillStyle = Style.Element.EndSymbolPoints.fillStyle } else if (element.name == 'pano') { radius = Style.Pano.radius * coordinate.ratio this.context.strokeStyle = Style.Pano.strokeStyle this.context.fillStyle = Style.Pano.fillStyle this.context.lineWidth = Style.Pano.lineWidth } this.context.beginPath() this.context.arc(pt.x, pt.y, radius, 0, twoPi, true) this.context.stroke() this.context.fill() this.context.restore() } 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.state == 'normal-out') { this.context.strokeStyle = Style.Element.NewWall.strokeStyle_out this.context.lineWidth = Style.Element.NewWall.lineWidth_out * coordinate.ratio } } 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() if (element.name == ElementEvents.NewWall) { //添加测量值 this.drawMeasureTxt(element.start, element.end) } 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() } drawCompass(styleType) { const padTop = 160 const padRight = 310 let img = null if (styleType == 'style-1' || styleType == 'style-3') { img = compassService.getWhiteImg() } else { img = compassService.getBlackImg() } let angle = floorplanService.getCompass() this.context.save() this.context.translate((coordinate.width - padRight) * coordinate.ratio, padTop * coordinate.ratio) this.context.rotate((angle / 180) * Math.PI) this.context.scale(coordinate.ratio / 2, coordinate.ratio / 2) this.context.drawImage(img, -img.width / 2, -img.height / 2) this.context.restore() } setCanvasStyle(style) { for (const key in style) { if (key != 'isFill' && key != 'isStroke') { this.context[key] = style[key] } } } /*************************************************************************************家具**********************************************************************************************/ drawFurniture(geometry) { if (geometry.geoType == VectorType.TV) { this.drawTV(geometry) } else if (geometry.geoType == VectorType.CombinationSofa) { this.drawCombinationSofa(geometry) } else if (geometry.geoType == VectorType.SingleSofa) { this.drawSingleSofa(geometry) } else if (geometry.geoType == VectorType.TeaTable) { this.drawTeaTable(geometry) } else if (geometry.geoType == VectorType.Carpet) { this.drawCarpet(geometry) } else if (geometry.geoType == VectorType.Plant) { this.drawPlant(geometry) } else if (geometry.geoType == VectorType.DiningTable) { this.drawDiningTable(geometry) } else if (geometry.geoType == VectorType.DoubleBed) { this.drawDoubleBed(geometry) } else if (geometry.geoType == VectorType.SingleBed) { this.drawSingleBed(geometry) } else if (geometry.geoType == VectorType.Wardrobe) { this.drawWardrobe(geometry) } else if (geometry.geoType == VectorType.Dresser) { this.drawDresser(geometry) } else if (geometry.geoType == VectorType.BedsideCupboard) { this.drawBedsideCupboard(geometry) } else if (geometry.geoType == VectorType.Pillow) { this.drawPillow(geometry) } else if (geometry.geoType == VectorType.GasStove) { this.drawGasStove(geometry) } else if (geometry.geoType == VectorType.Cupboard) { this.drawCupboard(geometry) } else if (geometry.geoType == VectorType.Bathtub) { this.drawBathtub(geometry) } else if (geometry.geoType == VectorType.Closestool) { this.drawClosestool(geometry) } else if (geometry.geoType == VectorType.Washstand) { this.drawWashstand(geometry) } else if (geometry.geoType == VectorType.Desk) { this.drawDesk(geometry) } else if (geometry.geoType == VectorType.BalconyChair) { this.drawBalconyChair(geometry) } else if (geometry.geoType == VectorType.Elevator) { this.drawElevator(geometry) } } drawTV(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.TV) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.TV) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.TV) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(0.5, 12.5) this.context.lineTo(31.5, 12.5) this.context.lineTo(31.5, 20.5) this.context.lineTo(0.5, 20.5) this.context.lineTo(0.5, 12.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(7.5, 16.5) this.context.lineTo(24.5, 16.5) this.context.lineTo(24.5, 18.5) this.context.lineTo(7.5, 18.5) this.context.lineTo(7.5, 16.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(22, 16.5) this.context.lineTo(21, 14.5) this.context.lineTo(11, 14.5) this.context.lineTo(10, 16.5) this.context.fill() this.context.stroke() this.context.restore() } drawCombinationSofa(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.CombinationSofa) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.CombinationSofa) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.CombinationSofa) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(4, 16) this.context.lineTo(19, 16) this.context.lineTo(19, 25) this.context.lineTo(4, 25) this.context.lineTo(4, 16) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(6, 18) this.context.lineTo(17, 18) this.context.lineTo(17, 23) this.context.lineTo(6, 23) this.context.lineTo(6, 18) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(21.5, 19.5) this.context.bezierCurveTo(21.5, 18.9477, 21.9477, 18.5, 22.5, 18.5) this.context.lineTo(30.5, 18.5) this.context.bezierCurveTo(31.0523, 18.5, 31.5, 18.9477, 31.5, 19.5) this.context.lineTo(31.5, 24.5) this.context.bezierCurveTo(31.5, 25.0523, 31.0523, 25.5, 30.5, 25.5) this.context.lineTo(22.5, 25.5) this.context.bezierCurveTo(21.9477, 25.5, 21.5, 25.0523, 21.5, 24.5) this.context.lineTo(21.5, 19.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(3.5, 4.5) this.context.bezierCurveTo(3.5, 3.94772, 3.94772, 3.5, 4.5, 3.5) this.context.lineTo(17.5, 3.5) this.context.bezierCurveTo(18.0523, 3.5, 18.5, 3.94772, 18.5, 4.5) this.context.lineTo(18.5, 11.5) this.context.bezierCurveTo(18.5, 12.0523, 18.0523, 12.5, 17.5, 12.5) this.context.lineTo(4.5, 12.5) this.context.bezierCurveTo(3.94772, 12.5, 3.5, 12.0523, 3.5, 11.5) this.context.lineTo(3.5, 4.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(3.5, 5.5) this.context.lineTo(1.5, 5.5) this.context.bezierCurveTo(0.947715, 5.5, 0.5, 5.94772, 0.5, 6.5) this.context.lineTo(0.5, 10.5) this.context.bezierCurveTo(0.5, 11.0523, 0.947715, 11.5, 1.5, 11.5) this.context.lineTo(3.5, 11.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(18.5, 5.5) this.context.lineTo(20.5, 5.5) this.context.bezierCurveTo(21.0523, 5.5, 21.5, 5.94772, 21.5, 6.5) this.context.lineTo(21.5, 10.5) this.context.bezierCurveTo(21.5, 11.0523, 21.0523, 11.5, 20.5, 11.5) this.context.lineTo(18.5, 11.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(4, 6.5) this.context.lineTo(18, 6.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(22.5, 25.5) this.context.lineTo(22.5, 27.5) this.context.bezierCurveTo(22.5, 28.0523, 22.9477, 28.5, 23.5, 28.5) this.context.lineTo(29.5, 28.5) this.context.bezierCurveTo(30.0523, 28.5, 30.5, 28.0523, 30.5, 27.5) this.context.lineTo(30.5, 25.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(22.5, 18.5) this.context.lineTo(22.5, 16.5) this.context.bezierCurveTo(22.5, 15.9477, 22.9477, 15.5, 23.5, 15.5) this.context.lineTo(29.5, 15.5) this.context.bezierCurveTo(30.0523, 15.5, 30.5, 15.9477, 30.5, 16.5) this.context.lineTo(30.5, 18.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(28.5, 19) this.context.lineTo(28.5, 25) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(8.5, 4) this.context.lineTo(8.5, 12) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(13.5, 4) this.context.lineTo(13.5, 12) this.context.fill() this.context.stroke() this.context.restore() } drawSingleSofa(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.SingleSofa) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.SingleSofa) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.SingleSofa) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(23, 8.5) this.context.lineTo(27.5, 8.5) this.context.bezierCurveTo(28.0523, 8.5, 28.5, 8.94772, 28.5, 9.5) this.context.lineTo(28.5, 22.5) this.context.bezierCurveTo(28.5, 23.0523, 28.0523, 23.5, 27.5, 23.5) this.context.lineTo(23, 23.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(9, 8.5) this.context.lineTo(4.5, 8.5) this.context.bezierCurveTo(3.94772, 8.5, 3.5, 8.94772, 3.5, 9.5) this.context.lineTo(3.5, 22.5) this.context.bezierCurveTo(3.5, 23.0523, 3.94772, 23.5, 4.5, 23.5) this.context.lineTo(9, 23.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(9.5, 7.5) this.context.bezierCurveTo(9.5, 6.94771, 9.94772, 6.5, 10.5, 6.5) this.context.lineTo(21.5, 6.5) this.context.bezierCurveTo(22.0523, 6.5, 22.5, 6.94772, 22.5, 7.5) this.context.lineTo(22.5, 24.5) this.context.bezierCurveTo(22.5, 25.0523, 22.0523, 25.5, 21.5, 25.5) this.context.lineTo(10.5, 25.5) this.context.bezierCurveTo(9.94772, 25.5, 9.5, 25.0523, 9.5, 24.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(10, 12.5) this.context.lineTo(22, 12.5) this.context.fill() this.context.stroke() this.context.restore() } drawTeaTable(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.TeaTable) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.TeaTable) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.TeaTable) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(1.5, 8.5) this.context.lineTo(30.5, 8.5) this.context.lineTo(30.5, 23.5) this.context.lineTo(1.5, 23.5) this.context.lineTo(1.5, 8.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(3.5, 10.5) this.context.lineTo(28.5, 10.5) this.context.lineTo(28.5, 21.5) this.context.lineTo(3.5, 21.5) this.context.lineTo(3.5, 10.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(3.5, 21.5) this.context.lineTo(14.5, 10.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(28.5, 13.5) this.context.lineTo(22.5, 19.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(16.5, 21.5) this.context.lineTo(23, 15) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(28.5, 17) this.context.lineTo(24, 21.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(16.5, 21.5) this.context.lineTo(23, 15) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(7.5, 21.5) this.context.lineTo(18.5, 10.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(3.5, 15.5) this.context.lineTo(8.5, 10.5) this.context.fill() this.context.stroke() this.context.restore() } drawCarpet(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Carpet) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Carpet) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Carpet) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(31.5, 16) this.context.bezierCurveTo(31.5, 21.5228, 24.8366, 25.5, 16, 25.5) this.context.bezierCurveTo(7.16344, 25.5, 0.5, 21.5228, 0.5, 16) this.context.bezierCurveTo(0.5, 10.4772, 7.16344, 6.5, 16, 6.5) this.context.bezierCurveTo(24.8366, 6.5, 31.5, 10.4772, 31.5, 16) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(0.5, 16) this.context.lineTo(4.5, 16.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(5, 9.5) this.context.lineTo(6.5, 12.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(9, 7.5) this.context.lineTo(10, 10.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(16, 9.5) this.context.lineTo(18.5, 6.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(27.5, 16) this.context.bezierCurveTo(27.5, 20.0695, 22.2711, 22.5, 16, 22.5) this.context.bezierCurveTo(9.7289, 22.5, 4.5, 20.0695, 4.5, 16) this.context.bezierCurveTo(4.5, 11.9305, 9.7289, 9.5, 16, 9.5) this.context.bezierCurveTo(22.2711, 9.5, 27.5, 11.9305, 27.5, 16) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(27, 17.5) this.context.lineTo(30.5, 19.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(10, 21.5) this.context.lineTo(8.5, 24.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(21.5, 7) this.context.bezierCurveTo(21.5, 7, 20.5, 7.5, 20.5, 8.5) this.context.bezierCurveTo(20.5, 9.5, 21, 10, 21, 10) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(12.5, 22.5) this.context.lineTo(11.5, 25) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(20.5001, 22) this.context.bezierCurveTo(20.5001, 22, 19.3705, 22.759, 19, 23.5) this.context.bezierCurveTo(18.5, 24.5, 19.0001, 25.5, 19.0001, 25.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(24.5, 20.5) this.context.lineTo(25.5, 23.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(27.5, 15) this.context.lineTo(31, 14) this.context.fill() this.context.stroke() this.context.restore() } drawPlant(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Plant) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Plant) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Plant) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(16.0702, 14.54) this.context.bezierCurveTo(15.9302, 14.31, 15.7701, 14.05, 15.6201, 13.76) this.context.bezierCurveTo(14.8408, 12.4391, 14.4298, 10.9336, 14.4298, 9.39999) this.context.bezierCurveTo(14.4298, 7.8664, 14.8408, 6.36081, 15.6201, 5.03998) this.context.bezierCurveTo(15.8611, 4.58601, 16.1317, 4.1484, 16.4302, 3.72998) this.context.bezierCurveTo(16.7286, 4.1484, 16.9992, 4.58601, 17.2401, 5.03998) this.context.bezierCurveTo(17.9803, 6.37702, 18.3885, 7.87232, 18.4302, 9.39999) this.context.bezierCurveTo(18.4354, 9.47657, 18.4354, 9.5534, 18.4302, 9.62997) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(7.9801, 15.98) this.context.bezierCurveTo(6.6152, 15.993, 5.25947, 15.7557, 3.9801, 15.28) this.context.bezierCurveTo(3.60847, 15.1397, 3.24756, 14.9726, 2.90015, 14.78) this.context.bezierCurveTo(3.21211, 14.5116, 3.54669, 14.2707, 3.90015, 14.06) this.context.bezierCurveTo(5.22554, 13.2482, 6.73712, 12.7903, 8.29016, 12.73) this.context.bezierCurveTo(9.15355, 12.6749, 10.0202, 12.7525, 10.8601, 12.96) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(23.4602, 22.59) this.context.bezierCurveTo(23.9779, 23.4363, 24.3718, 24.3522, 24.6302, 25.31) this.context.bezierCurveTo(24.7381, 25.6898, 24.815, 26.0777, 24.8602, 26.47) this.context.bezierCurveTo(24.464, 26.3786, 24.0761, 26.2548, 23.7002, 26.1) this.context.bezierCurveTo(22.2631, 25.4958, 21.0035, 24.5356, 20.0402, 23.31) this.context.bezierCurveTo(19.0654, 22.1493, 18.4441, 20.7332, 18.2502, 19.23) this.context.bezierCurveTo(18.2452, 19.1935, 18.2452, 19.1565, 18.2502, 19.12) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(18.0201, 18.79) this.context.bezierCurveTo(18.289, 19.8049, 18.4268, 20.8501, 18.4302, 21.9) this.context.bezierCurveTo(18.3982, 23.7828, 17.9865, 25.6399, 17.2201, 27.36) this.context.bezierCurveTo(16.9871, 27.9045, 16.7234, 28.4354, 16.4302, 28.95) this.context.bezierCurveTo(16.1369, 28.4354, 15.8731, 27.9045, 15.6401, 27.36) this.context.bezierCurveTo(14.8737, 25.6399, 14.4622, 23.7828, 14.4302, 21.9) this.context.lineTo(14.4302, 21.9) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(15.7802, 14.98) this.context.bezierCurveTo(15.7769, 14.9568, 15.7769, 14.9332, 15.7802, 14.91) this.context.lineTo(16.0302, 14.53) this.context.bezierCurveTo(16.1729, 14.3156, 16.3264, 14.1087, 16.4901, 13.91) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(17.2201, 17.35) this.context.bezierCurveTo(16.8106, 17.2814, 16.4063, 17.1845, 16.0101, 17.06) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(23.9001, 9.38) this.context.bezierCurveTo(24.8831, 9.14548, 25.8897, 9.02471, 26.9001, 9.02002) this.context.bezierCurveTo(27.5704, 9.02021, 28.2395, 9.07706, 28.9001, 9.19) this.context.lineTo(29.1702, 9.24002) this.context.bezierCurveTo(29.1702, 9.34002, 29.1701, 9.44, 29.0901, 9.56) this.context.bezierCurveTo(28.6759, 10.9776, 27.9845, 12.2989, 27.0558, 13.4473) this.context.bezierCurveTo(26.1271, 14.5957, 24.9797, 15.5483, 23.6802, 16.25) this.context.lineTo(23.5502, 16.31) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(16.2902, 15.19) this.context.bezierCurveTo(16.2902, 15.19, 16.2902, 15.12, 16.2902, 15.08) this.context.lineTo(16.2902, 14.94) this.context.bezierCurveTo(16.3291, 14.6435, 16.3859, 14.3496, 16.4602, 14.06) this.context.lineTo(16.4602, 13.93) this.context.bezierCurveTo(16.8635, 12.4153, 17.4975, 10.9717, 18.3401, 9.64999) this.context.bezierCurveTo(18.6001, 9.23999, 18.8802, 8.81, 19.2002, 8.37) this.context.bezierCurveTo(20.5088, 6.52287, 22.1501, 4.93576, 24.0402, 3.68997) this.context.bezierCurveTo(24.573, 3.35365, 25.1276, 3.053, 25.7002, 2.78998) this.context.bezierCurveTo(25.7076, 3.42365, 25.654, 4.05658, 25.5402, 4.67999) this.context.bezierCurveTo(25.2507, 6.33791, 24.6647, 7.93003, 23.8102, 9.37997) this.context.bezierCurveTo(23.5307, 9.86497, 23.227, 10.3356, 22.9001, 10.79) this.context.bezierCurveTo(21.6488, 12.5924, 19.9543, 14.0423, 17.9801, 15) this.context.bezierCurveTo(17.5625, 15.1915, 17.1314, 15.3519, 16.6902, 15.48) this.context.lineTo(16.3102, 15.59) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(12.9901, 14.58) this.context.bezierCurveTo(12.2143, 14.1057, 11.4845, 13.56, 10.8102, 12.95) this.context.bezierCurveTo(10.5402, 12.72, 10.2701, 12.47, 10.0001, 12.19) this.context.bezierCurveTo(8.5657, 10.7859, 7.41477, 9.11892, 6.61011, 7.28) this.context.bezierCurveTo(6.39455, 6.78774, 6.21745, 6.27957, 6.0802, 5.76001) this.context.bezierCurveTo(6.61731, 5.84803, 7.14586, 5.98184, 7.66016, 6.16) this.context.bezierCurveTo(9.55116, 6.80258, 11.2641, 7.88174, 12.6602, 9.31) this.context.bezierCurveTo(14.0736, 10.6511, 15.1084, 12.3413, 15.6602, 14.21) this.context.bezierCurveTo(15.7402, 14.49, 15.7901, 14.76, 15.8401, 14.99) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(11.1301, 22.84) this.context.bezierCurveTo(9.47432, 23.8584, 7.59868, 24.4653, 5.66016, 24.61) this.context.bezierCurveTo(4.9583, 24.6744, 4.25203, 24.6744, 3.55017, 24.61) this.context.lineTo(3.16016, 24.61) this.context.bezierCurveTo(3.16016, 24.49, 3.16016, 24.33, 3.16016, 24.15) this.context.bezierCurveTo(3.22801, 23.4121, 3.36532, 22.6821, 3.57019, 21.97) this.context.bezierCurveTo(4.18103, 19.7501, 5.52348, 17.8015, 7.38013, 16.44) this.context.bezierCurveTo(7.56306, 16.303, 7.75341, 16.1761, 7.9502, 16.06) this.context.bezierCurveTo(9.44614, 15.1201, 11.1838, 14.637, 12.9502, 14.67) this.context.lineTo(13.2701, 14.67) this.context.lineTo(13.7201, 14.67) this.context.bezierCurveTo(14.3987, 14.7284, 15.0692, 14.8591, 15.7201, 15.06) this.context.lineTo(15.7201, 15.06) this.context.lineTo(15.8701, 15.06) this.context.lineTo(16.1902, 15.16) this.context.lineTo(16.3302, 15.21) this.context.bezierCurveTo(16.3302, 15.3, 16.3302, 15.41, 16.3302, 15.54) this.context.bezierCurveTo(16.2457, 16.0399, 16.1186, 16.5317, 15.9502, 17.01) this.context.bezierCurveTo(15.9502, 17.08, 15.9501, 17.16, 15.8701, 17.24) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(23.5802, 16.31) this.context.bezierCurveTo(23.6966, 16.364, 23.8101, 16.4241, 23.9202, 16.49) this.context.bezierCurveTo(25.4558, 17.4575, 26.6812, 18.8459, 27.4502, 20.49) this.context.bezierCurveTo(27.7426, 21.0659, 27.9965, 21.6605, 28.2102, 22.27) this.context.lineTo(28.2902, 22.51) this.context.lineTo(28.0402, 22.56) this.context.bezierCurveTo(27.4061, 22.6801, 26.7646, 22.757, 26.1201, 22.79) this.context.bezierCurveTo(25.2303, 22.8383, 24.3379, 22.7846, 23.4602, 22.63) this.context.bezierCurveTo(22.5677, 22.4742, 21.7086, 22.1664, 20.9202, 21.72) this.context.bezierCurveTo(19.8482, 21.0758, 18.9327, 20.2014, 18.2401, 19.16) this.context.lineTo(18.0201, 18.83) this.context.bezierCurveTo(17.7901, 18.47, 17.5801, 18.11, 17.4001, 17.76) this.context.lineTo(17.2201, 17.39) this.context.bezierCurveTo(16.9992, 16.9318, 16.8056, 16.461, 16.6401, 15.98) this.context.lineTo(16.5602, 15.74) this.context.lineTo(16.8102, 15.69) this.context.bezierCurveTo(17.4312, 15.5743, 18.0593, 15.5008, 18.6902, 15.47) this.context.bezierCurveTo(20.3653, 15.3236, 22.0499, 15.613, 23.5802, 16.31) this.context.lineTo(23.5802, 16.31) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(11.1301, 22.84) this.context.bezierCurveTo(11.2192, 21.7269, 11.5001, 20.6375, 11.9602, 19.62) this.context.bezierCurveTo(12.5529, 18.2225, 13.5309, 17.0224, 14.7802, 16.16) this.context.bezierCurveTo(14.9538, 16.04, 15.1341, 15.9298, 15.3202, 15.83) this.context.lineTo(15.5302, 15.73) this.context.bezierCurveTo(15.636, 15.6714, 15.7463, 15.6213, 15.8601, 15.58) this.context.bezierCurveTo(15.8601, 15.66, 15.8601, 15.74, 15.8601, 15.84) this.context.bezierCurveTo(15.8723, 16.0832, 15.8723, 16.3268, 15.8601, 16.57) this.context.bezierCurveTo(15.8601, 16.72, 15.8601, 16.88, 15.8601, 17.05) this.context.bezierCurveTo(15.8601, 17.22, 15.8601, 17.21, 15.8601, 17.3) this.context.bezierCurveTo(15.7267, 18.5244, 15.3887, 19.7176, 14.8601, 20.83) this.context.bezierCurveTo(14.7044, 21.192, 14.5241, 21.5428, 14.3202, 21.88) this.context.bezierCurveTo(13.759, 22.908, 13.0288, 23.8343, 12.1602, 24.62) this.context.bezierCurveTo(11.8633, 24.887, 11.5493, 25.1341, 11.2201, 25.36) this.context.bezierCurveTo(11.1265, 24.962, 11.063, 24.5576, 11.0302, 24.15) this.context.bezierCurveTo(11.0324, 23.7115, 11.0658, 23.2737, 11.1301, 22.84) this.context.lineTo(11.1301, 22.84) this.context.closePath() this.context.fill() this.context.stroke() this.context.restore() } drawDiningTable(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.DiningTable) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.DiningTable) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.DiningTable) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(2.5, 10.5) this.context.lineTo(29.5, 10.5) this.context.lineTo(29.5, 21.5) this.context.lineTo(2.5, 21.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(14.5, 10) this.context.lineTo(14.5, 3.5) this.context.lineTo(5.5, 3.5) this.context.lineTo(5.5, 10) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(14.5, 22) this.context.lineTo(14.5, 28.5) this.context.lineTo(5.5, 28.5) this.context.lineTo(5.5, 22) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(26.5, 10) this.context.lineTo(26.5, 3.5) this.context.lineTo(17.5, 3.5) this.context.lineTo(17.5, 10) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(26.5, 22) this.context.lineTo(26.5, 28.5) this.context.lineTo(17.5, 28.5) this.context.lineTo(17.5, 22) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(6, 5.5) this.context.lineTo(14, 5.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(6, 26.5) this.context.lineTo(14, 26.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(18, 5.5) this.context.lineTo(26, 5.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(18, 26.5) this.context.lineTo(26, 26.5) this.context.fill() this.context.stroke() this.context.restore() } drawDoubleBed(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.DoubleBed) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.DoubleBed) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.DoubleBed) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.beginPath() this.context.moveTo(0.5, 3.5) this.context.lineTo(31.5, 3.5) this.context.lineTo(31.5, 28.5) this.context.lineTo(0.5, 28.5) this.context.lineTo(0.5, 3.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(1, 9.5) this.context.lineTo(31, 9.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(14.5, 9) this.context.lineTo(14.5, 7.5) this.context.bezierCurveTo(14.5, 6.39543, 13.6046, 5.5, 12.5, 5.5) this.context.lineTo(5.5, 5.5) this.context.bezierCurveTo(4.39543, 5.5, 3.5, 6.39543, 3.5, 7.5) this.context.lineTo(3.5, 9) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(28.5, 9) this.context.lineTo(28.5, 7.5) this.context.bezierCurveTo(28.5, 6.39543, 27.6046, 5.5, 26.5, 5.5) this.context.lineTo(19.5, 5.5) this.context.bezierCurveTo(18.3954, 5.5, 17.5, 6.39543, 17.5, 7.5) this.context.lineTo(17.5, 9) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(1, 12.5) this.context.lineTo(31, 12.5) this.context.fill() this.context.stroke() this.context.restore() } drawSingleBed(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.SingleBed) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.SingleBed) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.SingleBed) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.beginPath() this.context.moveTo(6.5, 3.5) this.context.lineTo(25.5, 3.5) this.context.lineTo(25.5, 28.5) this.context.lineTo(6.5, 28.5) this.context.lineTo(6.5, 3.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(7, 9.5) this.context.lineTo(25, 9.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(7, 12.5) this.context.lineTo(25, 12.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(22.5, 9) this.context.lineTo(22.5, 7.5) this.context.bezierCurveTo(22.5, 6.39543, 21.6046, 5.5, 20.5, 5.5) this.context.lineTo(11.5, 5.5) this.context.bezierCurveTo(10.3954, 5.5, 9.5, 6.39543, 9.5, 7.5) this.context.lineTo(9.5, 9) this.context.fill() this.context.stroke() this.context.restore() } drawWardrobe(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.WallCorner) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.WallCorner) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.WallCorner) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(1.5, 7.5) this.context.lineTo(30.5, 7.5) this.context.lineTo(30.5, 23.5) this.context.lineTo(1.5, 23.5) this.context.lineTo(1.5, 7.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(3.5, 9.5) this.context.lineTo(28.5, 9.5) this.context.lineTo(28.5, 21.5) this.context.lineTo(3.5, 21.5) this.context.lineTo(3.5, 9.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(4, 15.5) this.context.lineTo(28, 15.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(6.5, 12) this.context.lineTo(7.5, 19) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(10.5, 12) this.context.lineTo(10.5, 19) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(15.5, 12) this.context.lineTo(15.5, 19) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(19.5, 12) this.context.lineTo(21.5, 19) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(25.5, 12) this.context.lineTo(25.5, 19) this.context.fill() this.context.stroke() this.context.restore() } drawDresser(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Dresser) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Dresser) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Dresser) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(2.5, 4.5) this.context.lineTo(29.5, 4.5) this.context.lineTo(29.5, 16.5) this.context.bezierCurveTo(29.5, 17.6046, 28.6046, 18.5, 27.5, 18.5) this.context.lineTo(4.5, 18.5) this.context.bezierCurveTo(3.39543, 18.5, 2.5, 17.6046, 2.5, 16.5) this.context.lineTo(2.5, 4.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(7.5, 6.5) this.context.lineTo(24.5, 6.5) this.context.lineTo(24.5, 8.5) this.context.lineTo(7.5, 8.5) this.context.lineTo(7.5, 6.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(9.5, 25) this.context.bezierCurveTo(9.5, 23.067, 11.067, 21.5, 13, 21.5) this.context.lineTo(19, 21.5) this.context.bezierCurveTo(20.933, 21.5, 22.5, 23.067, 22.5, 25) this.context.lineTo(22.5, 25) this.context.bezierCurveTo(22.5, 26.933, 20.933, 28.5, 19, 28.5) this.context.lineTo(13, 28.5) this.context.bezierCurveTo(11.067, 28.5, 9.5, 26.933, 9.5, 25) this.context.lineTo(9.5, 25) this.context.closePath() this.context.fill() this.context.stroke() this.context.restore() } drawBedsideCupboard(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.BedsideCupboard) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.BedsideCupboard) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.BedsideCupboard) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(2.5, 3.5) this.context.lineTo(28.5, 3.5) this.context.lineTo(28.5, 29.5) this.context.lineTo(2.5, 29.5) this.context.lineTo(2.5, 3.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(4.5, 5.5) this.context.lineTo(26.5, 5.5) this.context.lineTo(26.5, 27.5) this.context.lineTo(4.5, 27.5) this.context.lineTo(4.5, 5.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(23.5, 16.5) this.context.bezierCurveTo(23.5, 20.9183, 19.9183, 24.5, 15.5, 24.5) this.context.bezierCurveTo(11.0817, 24.5, 7.5, 20.9183, 7.5, 16.5) this.context.bezierCurveTo(7.5, 12.0817, 11.0817, 8.5, 15.5, 8.5) this.context.bezierCurveTo(19.9183, 8.5, 23.5, 12.0817, 23.5, 16.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(20.5, 16.5) this.context.bezierCurveTo(20.5, 19.2614, 18.2614, 21.5, 15.5, 21.5) this.context.bezierCurveTo(12.7386, 21.5, 10.5, 19.2614, 10.5, 16.5) this.context.bezierCurveTo(10.5, 13.7386, 12.7386, 11.5, 15.5, 11.5) this.context.bezierCurveTo(18.2614, 11.5, 20.5, 13.7386, 20.5, 16.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(20.5, 16.5) this.context.bezierCurveTo(20.5, 19.2614, 18.2614, 21.5, 15.5, 21.5) this.context.bezierCurveTo(12.7386, 21.5, 10.5, 19.2614, 10.5, 16.5) this.context.bezierCurveTo(10.5, 13.7386, 12.7386, 11.5, 15.5, 11.5) this.context.bezierCurveTo(18.2614, 11.5, 20.5, 13.7386, 20.5, 16.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(16.5, 16.5) this.context.bezierCurveTo(16.5, 17.0523, 16.0523, 17.5, 15.5, 17.5) this.context.bezierCurveTo(14.9477, 17.5, 14.5, 17.0523, 14.5, 16.5) this.context.bezierCurveTo(14.5, 15.9477, 14.9477, 15.5, 15.5, 15.5) this.context.bezierCurveTo(16.0523, 15.5, 16.5, 15.9477, 16.5, 16.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(11, 18.5) this.context.lineTo(14.5, 17) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(16.5, 17) this.context.lineTo(20, 18.5) this.context.moveTo(15.5, 11.5) this.context.lineTo(15.5, 15.5) this.context.fill() this.context.stroke() this.context.restore() } drawPillow(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Pillow) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Pillow) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Pillow) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.beginPath() this.context.moveTo(18.0747, 9) this.context.bezierCurveTo(16.2223, 9.05191, 14.3762, 9.23862, 12.5513, 9.55861) this.context.bezierCurveTo(11.8131, 9.80487, 11.014, 9.80487, 10.2758, 9.55861) this.context.bezierCurveTo(8.86176, 9.28479, 8.69606, 10.8291, 9.17107, 11.7492) this.context.bezierCurveTo(9.01642, 12.3187, 8.78433, 13.2716, 8.65177, 13.8631) this.context.bezierCurveTo(7.54709, 17.9485, 8.14367, 21.3439, 8.98323, 25.3198) this.context.bezierCurveTo(9.16793, 25.9353, 9.14078, 26.5943, 8.90596, 27.1928) this.context.bezierCurveTo(8.62979, 28.6276, 10.2315, 28.7262, 11.1815, 28.2881) this.context.bezierCurveTo(15.52, 29.157, 19.9815, 29.2386, 24.3494, 28.529) this.context.bezierCurveTo(24.7471, 28.529, 25.454, 28.3538, 25.7964, 28.3428) this.context.bezierCurveTo(26.7354, 28.6057, 28.3593, 28.6824, 28.1826, 27.2475) this.context.bezierCurveTo(27.8733, 26.4132, 27.8733, 25.497, 28.1826, 24.6626) this.context.bezierCurveTo(28.4367, 23.414, 28.6686, 22.0449, 28.8343, 20.7744) this.context.bezierCurveTo(29.6297, 17.4885, 27.8512, 14.2026, 28.0611, 10.9168) this.context.bezierCurveTo(28.1106, 10.7308, 28.1099, 10.5352, 28.0589, 10.3496) this.context.bezierCurveTo(28.008, 10.164, 27.9086, 9.99502, 27.7709, 9.85957) this.context.bezierCurveTo(27.6332, 9.72413, 27.462, 9.62701, 27.2744, 9.57803) this.context.bezierCurveTo(27.0868, 9.52904, 26.8895, 9.5299, 26.7024, 9.5805) this.context.bezierCurveTo(26.3084, 9.74462, 25.8765, 9.7977, 25.4541, 9.73386) this.context.bezierCurveTo(23.013, 9.33025, 20.548, 9.0851, 18.0747, 9) this.context.lineTo(18.0747, 9) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(23.4453, 9.5) this.context.bezierCurveTo(23.2025, 8.27344, 22.9884, 7.04688, 23.067, 5.82031) this.context.bezierCurveTo(23.1141, 5.64371, 23.1134, 5.45793, 23.0649, 5.28169) this.context.bezierCurveTo(23.0164, 5.10544, 22.9217, 4.94495, 22.7905, 4.81632) this.context.bezierCurveTo(22.6593, 4.68769, 22.4961, 4.59547, 22.3174, 4.54894) this.context.bezierCurveTo(22.1387, 4.50242, 21.9507, 4.50323, 21.7724, 4.55129) this.context.bezierCurveTo(21.3971, 4.70716, 20.9855, 4.75756, 20.5831, 4.69693) this.context.bezierCurveTo(18.2573, 4.31363, 15.9087, 4.08082, 13.5522, 4) this.context.bezierCurveTo(11.7872, 4.0493, 10.0283, 4.22661, 8.28964, 4.5305) this.context.bezierCurveTo(7.58628, 4.76437, 6.82488, 4.76437, 6.12153, 4.5305) this.context.bezierCurveTo(4.77431, 4.27046, 4.61643, 5.73711, 5.06901, 6.61086) this.context.bezierCurveTo(4.92166, 7.15175, 4.70054, 8.0567, 4.57423, 8.6184) this.context.bezierCurveTo(3.52172, 12.4983, 4.09013, 15.7228, 4.89004, 19.4987) this.context.bezierCurveTo(5.06602, 20.0832, 5.04015, 20.709, 4.81642, 21.2774) this.context.bezierCurveTo(4.55329, 22.64, 6.07937, 22.7337, 6.98453, 22.3176) this.context.bezierCurveTo(7.41836, 22.4042, 7.85347, 22.4826, 8.28964, 22.5527) this.context.fill() this.context.stroke() this.context.restore() } drawGasStove(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.GasStove) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.GasStove) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.GasStove) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.beginPath() this.context.moveTo(0.5, 8.5) this.context.bezierCurveTo(0.5, 7.94772, 0.947715, 7.5, 1.5, 7.5) this.context.lineTo(30.5, 7.5) this.context.bezierCurveTo(31.0523, 7.5, 31.5, 7.94772, 31.5, 8.5) this.context.lineTo(31.5, 24.5) this.context.bezierCurveTo(31.5, 25.0523, 31.0523, 25.5, 30.5, 25.5) this.context.lineTo(1.5, 25.5) this.context.bezierCurveTo(0.947716, 25.5, 0.5, 25.0523, 0.5, 24.5) this.context.lineTo(0.5, 8.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(1, 20.5) this.context.lineTo(31, 20.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(13.5, 14) this.context.bezierCurveTo(13.5, 16.4853, 11.4853, 18.5, 9, 18.5) this.context.bezierCurveTo(6.51472, 18.5, 4.5, 16.4853, 4.5, 14) this.context.bezierCurveTo(4.5, 11.5147, 6.51472, 9.5, 9, 9.5) this.context.bezierCurveTo(11.4853, 9.5, 13.5, 11.5147, 13.5, 14) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(13.5, 23) this.context.bezierCurveTo(13.5, 23.2761, 13.2761, 23.5, 13, 23.5) this.context.bezierCurveTo(12.7239, 23.5, 12.5, 23.2761, 12.5, 23) this.context.bezierCurveTo(12.5, 22.7239, 12.7239, 22.5, 13, 22.5) this.context.bezierCurveTo(13.2761, 22.5, 13.5, 22.7239, 13.5, 23) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(19.5, 23) this.context.bezierCurveTo(19.5, 23.2761, 19.2761, 23.5, 19, 23.5) this.context.bezierCurveTo(18.7239, 23.5, 18.5, 23.2761, 18.5, 23) this.context.bezierCurveTo(18.5, 22.7239, 18.7239, 22.5, 19, 22.5) this.context.bezierCurveTo(19.2761, 22.5, 19.5, 22.7239, 19.5, 23) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(10.5, 14) this.context.bezierCurveTo(10.5, 14.8284, 9.82843, 15.5, 9, 15.5) this.context.bezierCurveTo(8.17157, 15.5, 7.5, 14.8284, 7.5, 14) this.context.bezierCurveTo(7.5, 13.1716, 8.17157, 12.5, 9, 12.5) this.context.bezierCurveTo(9.82843, 12.5, 10.5, 13.1716, 10.5, 14) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(4.5, 9.5) this.context.lineTo(6.5, 11.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(11.5, 16.5) this.context.lineTo(13.5, 18.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(6.5, 16.5) this.context.lineTo(4.5, 18.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(27.5, 14) this.context.bezierCurveTo(27.5, 16.4853, 25.4853, 18.5, 23, 18.5) this.context.bezierCurveTo(20.5147, 18.5, 18.5, 16.4853, 18.5, 14) this.context.bezierCurveTo(18.5, 11.5147, 20.5147, 9.5, 23, 9.5) this.context.bezierCurveTo(25.4853, 9.5, 27.5, 11.5147, 27.5, 14) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(24.5, 14) this.context.bezierCurveTo(24.5, 14.8284, 23.8284, 15.5, 23, 15.5) this.context.bezierCurveTo(22.1716, 15.5, 21.5, 14.8284, 21.5, 14) this.context.bezierCurveTo(21.5, 13.1716, 22.1716, 12.5, 23, 12.5) this.context.bezierCurveTo(23.8284, 12.5, 24.5, 13.1716, 24.5, 14) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(18.5, 9.5) this.context.lineTo(20.5, 11.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(25.5, 16.5) this.context.lineTo(27.5, 18.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(20.5, 16.5) this.context.lineTo(18.5, 18.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(13.5, 9.5) this.context.lineTo(11.5, 11.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(27.5, 9.5) this.context.lineTo(25.5, 11.5) this.context.fill() this.context.stroke() this.context.restore() } drawCupboard(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Cupboard) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Cupboard) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Cupboard) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.beginPath() this.context.moveTo(21, 7.5) this.context.bezierCurveTo(21.8284, 7.5, 22.5, 6.82843, 22.5, 6) this.context.bezierCurveTo(22.5, 5.17157, 21.8284, 4.5, 21, 4.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(21, 17.5) this.context.bezierCurveTo(21.8284, 17.5, 22.5, 16.8284, 22.5, 16) this.context.bezierCurveTo(22.5, 15.1716, 21.8284, 14.5, 21, 14.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(21, 27.5) this.context.bezierCurveTo(21.8284, 27.5, 22.5, 26.8284, 22.5, 26) this.context.bezierCurveTo(22.5, 25.1716, 21.8284, 24.5, 21, 24.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(12.5, 0.5) this.context.lineTo(20.5, 0.5) this.context.lineTo(20.5, 31.5) this.context.lineTo(12.5, 31.5) this.context.lineTo(12.5, 0.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(18.5, 1) this.context.lineTo(18.5, 31) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(13, 21.5) this.context.lineTo(20, 21.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(13, 10.5) this.context.lineTo(20, 10.5) this.context.fill() this.context.stroke() this.context.restore() } drawBathtub(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Bathtub) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Bathtub) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Bathtub) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.beginPath() this.context.moveTo(0.5, 7.5) this.context.lineTo(31.5, 7.5) this.context.lineTo(31.5, 24.5) this.context.lineTo(0.5, 24.5) this.context.lineTo(0.5, 7.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(2.5, 16) this.context.bezierCurveTo(2.5, 12.4101, 5.41015, 9.5, 9, 9.5) this.context.lineTo(23, 9.5) this.context.bezierCurveTo(26.5899, 9.5, 29.5, 12.4101, 29.5, 16) this.context.lineTo(29.5, 16) this.context.bezierCurveTo(29.5, 19.5899, 26.5899, 22.5, 23, 22.5) this.context.lineTo(9, 22.5) this.context.bezierCurveTo(5.41015, 22.5, 2.5, 19.5899, 2.5, 16) this.context.lineTo(2.5, 16) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(1, 15.5) this.context.lineTo(5.5, 15.5) this.context.lineTo(5.5, 16.5) this.context.lineTo(1, 16.5) this.context.lineTo(1, 15.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(26.5, 16) this.context.bezierCurveTo(26.5, 16.2761, 26.2761, 16.5, 26, 16.5) this.context.bezierCurveTo(25.7239, 16.5, 25.5, 16.2761, 25.5, 16) this.context.bezierCurveTo(25.5, 15.7239, 25.7239, 15.5, 26, 15.5) this.context.bezierCurveTo(26.2761, 15.5, 26.5, 15.7239, 26.5, 16) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(11.5, 20.5) this.context.lineTo(20.5, 20.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(13.5, 20.5) this.context.lineTo(13.5, 22.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(18.5, 20.5) this.context.lineTo(18.5, 22.5) this.context.fill() this.context.stroke() this.context.restore() } drawClosestool(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Closestool) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Closestool) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Closestool) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.beginPath() this.context.moveTo(5.5, 3.5) this.context.bezierCurveTo(5.5, 2.94772, 5.94772, 2.5, 6.5, 2.5) this.context.lineTo(25.5, 2.5) this.context.bezierCurveTo(26.0523, 2.5, 26.5, 2.94772, 26.5, 3.5) this.context.lineTo(26.5, 9.5) this.context.bezierCurveTo(26.5, 10.0523, 26.0523, 10.5, 25.5, 10.5) this.context.lineTo(6.5, 10.5) this.context.bezierCurveTo(5.94772, 10.5, 5.5, 10.0523, 5.5, 9.5) this.context.lineTo(5.5, 3.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(9.5, 12.6485) this.context.bezierCurveTo(9.5, 12.5665, 9.56649, 12.5, 9.64851, 12.5) this.context.lineTo(22.3515, 12.5) this.context.bezierCurveTo(22.4335, 12.5, 22.5, 12.5665, 22.5, 12.6485) this.context.lineTo(22.5, 21) this.context.bezierCurveTo(22.5, 24.5899, 19.5899, 27.5, 16, 27.5) this.context.lineTo(16, 27.5) this.context.bezierCurveTo(12.4101, 27.5, 9.5, 24.5899, 9.5, 21) this.context.lineTo(9.5, 12.6485) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(7.5, 10.5) this.context.lineTo(7.5, 21) this.context.bezierCurveTo(7.5, 25.6944, 11.3056, 29.5, 16, 29.5) this.context.lineTo(16, 29.5) this.context.bezierCurveTo(20.6944, 29.5, 24.5, 25.6944, 24.5, 21) this.context.lineTo(24.5, 10.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(17.5, 6) this.context.bezierCurveTo(17.5, 6.82843, 16.8284, 7.5, 16, 7.5) this.context.bezierCurveTo(15.1716, 7.5, 14.5, 6.82843, 14.5, 6) this.context.bezierCurveTo(14.5, 5.17157, 15.1716, 4.5, 16, 4.5) this.context.bezierCurveTo(16.8284, 4.5, 17.5, 5.17157, 17.5, 6) this.context.closePath() this.context.fill() this.context.stroke() this.context.restore() } drawWashstand(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Washstand) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Washstand) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Washstand) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(13.5, 9) this.context.bezierCurveTo(13.5, 9.27614, 13.2761, 9.5, 13, 9.5) this.context.bezierCurveTo(12.7239, 9.5, 12.5, 9.27614, 12.5, 9) this.context.bezierCurveTo(12.5, 8.72386, 12.7239, 8.5, 13, 8.5) this.context.bezierCurveTo(13.2761, 8.5, 13.5, 8.72386, 13.5, 9) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(19.5, 9) this.context.bezierCurveTo(19.5, 9.27614, 19.2761, 9.5, 19, 9.5) this.context.bezierCurveTo(18.7239, 9.5, 18.5, 9.27614, 18.5, 9) this.context.bezierCurveTo(18.5, 8.72386, 18.7239, 8.5, 19, 8.5) this.context.bezierCurveTo(19.2761, 8.5, 19.5, 8.72386, 19.5, 9) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(16.5, 17) this.context.bezierCurveTo(16.5, 17.2761, 16.2761, 17.5, 16, 17.5) this.context.bezierCurveTo(15.7239, 17.5, 15.5, 17.2761, 15.5, 17) this.context.bezierCurveTo(15.5, 16.7239, 15.7239, 16.5, 16, 16.5) this.context.bezierCurveTo(16.2761, 16.5, 16.5, 16.7239, 16.5, 17) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(26.5, 17) this.context.bezierCurveTo(26.5, 20.0376, 21.799, 22.5, 16, 22.5) this.context.bezierCurveTo(10.201, 22.5, 5.5, 20.0376, 5.5, 17) this.context.bezierCurveTo(5.5, 13.9624, 10.201, 11.5, 16, 11.5) this.context.bezierCurveTo(21.799, 11.5, 26.5, 13.9624, 26.5, 17) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(2.5, 6.5) this.context.lineTo(29.5, 6.5) this.context.lineTo(29.5, 25.5) this.context.lineTo(2.5, 25.5) this.context.lineTo(2.5, 6.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(15.5, 9) this.context.bezierCurveTo(15.5, 8.72386, 15.7239, 8.5, 16, 8.5) this.context.lineTo(16, 8.5) this.context.bezierCurveTo(16.2761, 8.5, 16.5, 8.72386, 16.5, 9) this.context.lineTo(16.5, 14) this.context.bezierCurveTo(16.5, 14.2761, 16.2761, 14.5, 16, 14.5) this.context.lineTo(16, 14.5) this.context.bezierCurveTo(15.7239, 14.5, 15.5, 14.2761, 15.5, 14) this.context.lineTo(15.5, 9) this.context.closePath() this.context.fill() this.context.stroke() this.context.restore() } drawDesk(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Desk) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Desk) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Desk) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.beginPath() this.context.moveTo(3.5, 7.5) this.context.lineTo(28.5, 7.5) this.context.lineTo(28.5, 19.5) this.context.lineTo(3.5, 19.5) this.context.lineTo(3.5, 7.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(11.5, 20) this.context.lineTo(11.5, 22) this.context.bezierCurveTo(11.5, 24.4853, 13.5147, 26.5, 16, 26.5) this.context.lineTo(16, 26.5) this.context.bezierCurveTo(18.4853, 26.5, 20.5, 24.4853, 20.5, 22) this.context.lineTo(20.5, 20) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(15.5, 10.5) this.context.lineTo(25.5, 10.5) this.context.lineTo(25.5, 16.5) this.context.lineTo(15.5, 16.5) this.context.lineTo(15.5, 10.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(20.5, 11) this.context.lineTo(20.5, 16) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(17.5, 12.5) this.context.lineTo(18.5, 12.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(22.5, 12.5) this.context.lineTo(23.5, 12.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(17.5, 14.5) this.context.lineTo(18.5, 14.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(22.5, 14.5) this.context.lineTo(23.5, 14.5) this.context.fill() this.context.stroke() this.context.restore() } drawBalconyChair(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.BalconyChair) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.BalconyChair) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.BalconyChair) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.beginPath() this.context.arc(16, 16, 4.5, 0, 6.283185307179586, false) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(0.5, 12.3182) this.context.bezierCurveTo(0.5, 11.8663, 0.866313, 11.5, 1.31818, 11.5) this.context.lineTo(8.68182, 11.5) this.context.bezierCurveTo(9.13369, 11.5, 9.5, 11.8663, 9.5, 12.3182) this.context.lineTo(9.5, 16) this.context.bezierCurveTo(9.5, 18.4853, 7.48528, 20.5, 5, 20.5) this.context.lineTo(5, 20.5) this.context.bezierCurveTo(2.51472, 20.5, 0.5, 18.4853, 0.5, 16) this.context.lineTo(0.5, 12.3182) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(22.5, 12.3182) this.context.bezierCurveTo(22.5, 11.8663, 22.8663, 11.5, 23.3182, 11.5) this.context.lineTo(30.6818, 11.5) this.context.bezierCurveTo(31.1337, 11.5, 31.5, 11.8663, 31.5, 12.3182) this.context.lineTo(31.5, 16) this.context.bezierCurveTo(31.5, 18.4853, 29.4853, 20.5, 27, 20.5) this.context.lineTo(27, 20.5) this.context.bezierCurveTo(24.5147, 20.5, 22.5, 18.4853, 22.5, 16) this.context.lineTo(22.5, 12.3182) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(0.5, 13.5) this.context.lineTo(0.5, 13.5) this.context.bezierCurveTo(0.5, 15.9853, 2.51472, 18, 5, 18) this.context.lineTo(5, 18) this.context.bezierCurveTo(7.48528, 18, 9.5, 15.9853, 9.5, 13.5) this.context.lineTo(9.5, 13.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(22.5, 13.5) this.context.lineTo(22.5, 13.5) this.context.bezierCurveTo(22.5, 15.9853, 24.5147, 18, 27, 18) this.context.lineTo(27, 18) this.context.bezierCurveTo(29.4853, 18, 31.5, 15.9853, 31.5, 13.5) this.context.lineTo(31.5, 13.5) this.context.fill() this.context.stroke() this.context.restore() } drawElevator(geometry) { const selectItem = stateService.getSelectItem() const draggingItem = stateService.getDraggingItem() const focusItem = stateService.getFocusItem() this.context.save() this.context.strokeStyle = Style.Furniture.strokeStyle this.context.fillStyle = Style.Furniture.fillStyle if (selectItem && selectItem.type == VectorType.Elevator) { if (geometry.vectorId == selectItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } else if (draggingItem && draggingItem.type == VectorType.Elevator) { if (geometry.vectorId == draggingItem.vectorId) { this.context.strokeStyle = Style.Select.Furniture.strokeStyle this.context.fillStyle = Style.Select.Furniture.fillStyle } } if (focusItem && focusItem.type == VectorType.Elevator) { if (geometry.vectorId == focusItem.vectorId) { this.context.strokeStyle = Style.Focus.Furniture.strokeStyle this.context.fillStyle = Style.Focus.Furniture.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, (geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32) this.context.miterLimit = 4 this.context.font = "15px ''" this.context.beginPath() this.context.moveTo(2.5, 29.5) this.context.lineTo(10.5, 29.5) this.context.lineTo(10.5, 27.5) this.context.lineTo(4.5, 27.5) this.context.lineTo(4.5, 4.5) this.context.lineTo(27.5, 4.5) this.context.lineTo(27.5, 27.5) this.context.lineTo(20.5, 27.5) this.context.lineTo(20.5, 29.5) this.context.lineTo(29.5, 29.5) this.context.lineTo(29.5, 2.5) this.context.lineTo(2.5, 2.5) this.context.lineTo(2.5, 29.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(11, 28.5) this.context.lineTo(20, 28.5) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(8.5, 9.5) this.context.lineTo(8.5, 7.5) this.context.lineTo(23.5, 7.5) this.context.lineTo(23.5, 9.5) this.context.lineTo(8.5, 9.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(24.5, 12.5) this.context.lineTo(7.5, 12.5) this.context.lineTo(7.5, 24.5) this.context.lineTo(24.5, 24.5) this.context.lineTo(24.5, 12.5) this.context.closePath() this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(8, 13) this.context.lineTo(24, 24) this.context.fill() this.context.stroke() this.context.beginPath() this.context.moveTo(24, 13) this.context.lineTo(8, 24) this.context.fill() this.context.stroke() this.context.restore() } // drawDoubleBed(geometry){ // //开始画矢量 // this.context.save() // /* // let imgWidth = geometry.sideLength * coordinate.res*50 // let imgHeight = geometry.sideLength * coordinate.res*50 // const pt = coordinate.getScreenXY({ // x: geometry.center.x - geometry.sideLength *50/ 2, // y: geometry.center.y + geometry.sideLength *50/ 2, // }) // // furnitureService.getFurniture(geometry.geoType).then(img => { // // this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight) // // }) // let img = furnitureService.getFurniture(geometry.geoType) // this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight) // this.context.restore() // */ // const pt = coordinate.getScreenXY({ // x: geometry.center.x - geometry.sideLength / 2, // y: geometry.center.y + geometry.sideLength / 2, // }) // this.context.translate(pt.x, pt.y) // this.context.rotate((geometry.angle / 180) * Math.PI) // this.context.scale(geometry.sideLength, geometry.sideLength) // this.context.restore() // } /***************************************************************************************************************************************************************************************/ } const draw = new Draw() export { draw }