|
@@ -167,30 +167,16 @@ export default class Draw {
|
|
|
}
|
|
|
|
|
|
// 文字
|
|
|
- drawText(position, txt, screenCoord, angle) {
|
|
|
+ drawText(position, txt, screenCoord) {
|
|
|
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'
|
|
|
- }
|
|
|
+ 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.fillText(txt, pt.x, pt.y)
|
|
|
this.context.restore()
|
|
|
}
|
|
|
|
|
@@ -305,6 +291,10 @@ export default class Draw {
|
|
|
this.context.lineTo(0,geometry.height)
|
|
|
this.context.closePath();
|
|
|
this.context.stroke()
|
|
|
+
|
|
|
+ this.context.font = '24px Microsoft YaHei'
|
|
|
+ const fontWidth = this.context.measureText(geometry.value).width
|
|
|
+ this.context.fillText(geometry.value, geometry.width/2 - fontWidth/2, geometry.height/2-2)
|
|
|
this.context.restore()
|
|
|
}
|
|
|
|
|
@@ -767,13 +757,29 @@ export default class Draw {
|
|
|
}
|
|
|
|
|
|
drawTitle(geometry){
|
|
|
+
|
|
|
this.context.save()
|
|
|
this.setCanvasStyle(Style.Title)
|
|
|
- let pt = {}
|
|
|
+
|
|
|
+ const selectItem = stateService.getSelectItem()
|
|
|
+ const draggingItem = stateService.getDraggingItem()
|
|
|
+ const focusItem = stateService.getFocusItem()
|
|
|
+
|
|
|
+ if (selectItem && selectItem.type == VectorType.Title) {
|
|
|
+ this.context.strokeStyle = Style.Select.Title.strokeStyle
|
|
|
+ this.context.fillStyle = Style.Select.Title.fillStyle
|
|
|
+ } else if (draggingItem && draggingItem.type == VectorType.Title) {
|
|
|
+ this.context.strokeStyle = Style.Select.Title.strokeStyle
|
|
|
+ this.context.fillStyle = Style.Select.Title.fillStyle
|
|
|
+ }
|
|
|
+
|
|
|
+ if (focusItem && focusItem.type == VectorType.Title) {
|
|
|
+ this.context.strokeStyle = Style.Focus.Title.strokeStyle
|
|
|
+ this.context.fillStyle = Style.Focus.Title.fillStyle
|
|
|
+ }
|
|
|
+ //let pt = {}
|
|
|
//pt.x = (this.context.canvas.width - this.context.measureText(geometry.value).width)/2
|
|
|
- pt.x = this.context.canvas.width/2
|
|
|
- pt.y = 50
|
|
|
- this.context.fillText(geometry.value, pt.x, pt.y)
|
|
|
+ this.context.fillText(geometry.value, this.context.canvas.width/2, geometry.height)
|
|
|
this.context.restore()
|
|
|
}
|
|
|
|
|
@@ -811,16 +817,30 @@ export default class Draw {
|
|
|
this.context.strokeStyle = Style.Compass.strokeStyle
|
|
|
this.context.fillStyle = Style.Compass.fillStyle
|
|
|
|
|
|
- const center = {
|
|
|
- x:800,
|
|
|
- y:70
|
|
|
+ const selectItem = stateService.getSelectItem()
|
|
|
+ const draggingItem = stateService.getDraggingItem()
|
|
|
+ const focusItem = stateService.getFocusItem()
|
|
|
+
|
|
|
+ if (selectItem && selectItem.type == VectorType.Compass) {
|
|
|
+ if (geometry.vectorId == selectItem.vectorId) {
|
|
|
+ this.context.strokeStyle = Style.Select.Compass.strokeStyle
|
|
|
+ this.context.fillStyle = Style.Select.Compass.fillStyle
|
|
|
+ }
|
|
|
+ } else if (draggingItem && draggingItem.type == VectorType.Compass) {
|
|
|
+ if (geometry.vectorId == draggingItem.vectorId) {
|
|
|
+ this.context.strokeStyle = Style.Select.Compass.strokeStyle
|
|
|
+ this.context.fillStyle = Style.Select.Compass.fillStyle
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (focusItem && focusItem.type == VectorType.Compass) {
|
|
|
+ if (geometry.vectorId == focusItem.vectorId) {
|
|
|
+ this.context.strokeStyle = Style.Focus.Compass.strokeStyle
|
|
|
+ this.context.fillStyle = Style.Focus.Compass.fillStyle
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // const pt = {
|
|
|
- // x:800-32/2,
|
|
|
- // y:70+52/2
|
|
|
- // }
|
|
|
- this.context.translate(center.x,center.y)
|
|
|
+ this.context.translate(geometry.center.x,geometry.center.y)
|
|
|
this.context.rotate((geometry.angle) * Math.PI)
|
|
|
if(geometry.angle == 90){
|
|
|
this.context.translate( 32/2, -52)
|