|
@@ -8,7 +8,7 @@ import ElementEvents from "../enum/ElementEvents.js";
|
|
|
import { elementService } from "../Service/ElementService.js";
|
|
|
import UIEvents from "@/graphic/enum/UIEvents.js";
|
|
|
|
|
|
-const imgCache = {}
|
|
|
+const imgCache = {};
|
|
|
const help = {
|
|
|
getVectorStyle(vector, geoType = vector.geoType) {
|
|
|
const geoId = vector?.vectorId;
|
|
@@ -86,29 +86,29 @@ const help = {
|
|
|
if (imgCache[src]) {
|
|
|
return imgCache[src];
|
|
|
}
|
|
|
- const img = new Image()
|
|
|
- img.src = src
|
|
|
- return imgCache[src] = new Promise(resolve => {
|
|
|
+ const img = new Image();
|
|
|
+ img.src = src;
|
|
|
+ return (imgCache[src] = new Promise((resolve) => {
|
|
|
img.onload = () => {
|
|
|
- resolve(img)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ resolve(img);
|
|
|
+ };
|
|
|
+ }));
|
|
|
+ },
|
|
|
};
|
|
|
|
|
|
export default class Draw {
|
|
|
constructor() {
|
|
|
- this.canvas = null
|
|
|
+ this.canvas = null;
|
|
|
this.context = null;
|
|
|
}
|
|
|
|
|
|
initContext(canvas) {
|
|
|
if (canvas) {
|
|
|
- this.canvas = canvas
|
|
|
+ this.canvas = canvas;
|
|
|
this.context = canvas.getContext("2d");
|
|
|
} else {
|
|
|
this.context = null;
|
|
|
- this.canvas = null
|
|
|
+ this.canvas = null;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -122,10 +122,10 @@ export default class Draw {
|
|
|
}
|
|
|
|
|
|
drawBackGroundImg(vector) {
|
|
|
- console.log(vector)
|
|
|
- const img = vector.imageData
|
|
|
- const width = help.getReal(img.width)
|
|
|
- const height = help.getReal(img.height)
|
|
|
+ console.log(vector);
|
|
|
+ const img = vector.imageData;
|
|
|
+ const width = help.getReal(img.width);
|
|
|
+ const height = help.getReal(img.height);
|
|
|
const center = coordinate.getScreenXY(vector.center);
|
|
|
this.context.save();
|
|
|
this.context.drawImage(
|
|
@@ -134,7 +134,7 @@ export default class Draw {
|
|
|
center.y - height / 2,
|
|
|
width,
|
|
|
height
|
|
|
- )
|
|
|
+ );
|
|
|
this.context.restore();
|
|
|
}
|
|
|
|
|
@@ -298,13 +298,15 @@ export default class Draw {
|
|
|
end
|
|
|
);
|
|
|
const pt = mathUtil.twoOrderBezier2(0.5, start, pt2, end);
|
|
|
-
|
|
|
+ const extremePoint = coordinate.getScreenXY(vector.extremePoint);
|
|
|
const ctx = this.context;
|
|
|
ctx.save();
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(
|
|
|
- pt.x,
|
|
|
- pt.y,
|
|
|
+ // pt.x,
|
|
|
+ // pt.y,
|
|
|
+ extremePoint.x,
|
|
|
+ extremePoint.y,
|
|
|
Style.ControlPoint.radius * coordinate.ratio,
|
|
|
0,
|
|
|
Math.PI * 2,
|
|
@@ -391,31 +393,27 @@ export default class Draw {
|
|
|
const start = coordinate.getScreenXY(startReal);
|
|
|
const endReal = dataService.getPoint(vector.endId);
|
|
|
const end = coordinate.getScreenXY(endReal);
|
|
|
- const ctx = this.context
|
|
|
+ const ctx = this.context;
|
|
|
|
|
|
- const ange = 30
|
|
|
+ const ange = 30;
|
|
|
const L = 20;
|
|
|
- let a = Math.atan2((end.y - start.y), (end.x - start.x));
|
|
|
- let xC = end.x - L * Math.cos(a + ange * Math.PI/180); // θ=30
|
|
|
- let yC = end.y - L * Math.sin(a + ange * Math.PI/180);
|
|
|
- let xD = end.x - L * Math.cos(a - ange * Math.PI/180);
|
|
|
- let yD = end.y - L * Math.sin(a - ange * Math.PI/180);
|
|
|
- ctx.save()
|
|
|
+ let a = Math.atan2(end.y - start.y, end.x - start.x);
|
|
|
+ let xC = end.x - L * Math.cos(a + (ange * Math.PI) / 180); // θ=30
|
|
|
+ let yC = end.y - L * Math.sin(a + (ange * Math.PI) / 180);
|
|
|
+ let xD = end.x - L * Math.cos(a - (ange * Math.PI) / 180);
|
|
|
+ let yD = end.y - L * Math.sin(a - (ange * Math.PI) / 180);
|
|
|
+ ctx.save();
|
|
|
|
|
|
- const style = help.setVectorStyle(
|
|
|
- this.context,
|
|
|
- vector,
|
|
|
- 'Arrow'
|
|
|
- );
|
|
|
+ const style = help.setVectorStyle(this.context, vector, "Arrow");
|
|
|
if (vector.arrowColor) {
|
|
|
- ctx.strokeStyle = vector.arrowColor
|
|
|
+ ctx.strokeStyle = vector.arrowColor;
|
|
|
}
|
|
|
ctx.beginPath();
|
|
|
|
|
|
ctx.moveTo(start.x, start.y);
|
|
|
ctx.lineTo(end.x, end.y);
|
|
|
|
|
|
- const lines = mathUtil.getArrow(start, end)
|
|
|
+ const lines = mathUtil.getArrow(start, end);
|
|
|
ctx.moveTo(lines[0].x, lines[0].y);
|
|
|
ctx.lineTo(lines[1].x, lines[1].y);
|
|
|
ctx.lineTo(lines[2].x, lines[2].y);
|
|
@@ -423,81 +421,81 @@ export default class Draw {
|
|
|
ctx.restore();
|
|
|
|
|
|
if ([Style.Focus.Arrow, Style.Select.Arrow].includes(style)) {
|
|
|
- this.drawPoint(startReal)
|
|
|
- this.drawPoint(endReal)
|
|
|
+ this.drawPoint(startReal);
|
|
|
+ this.drawPoint(endReal);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
drawMagnifier(vector) {
|
|
|
- const ctx = this.context
|
|
|
+ const ctx = this.context;
|
|
|
this.drawPoint({
|
|
|
...vector,
|
|
|
...vector.position,
|
|
|
radius: Style.Magnifier.radius,
|
|
|
- })
|
|
|
- const pt = coordinate.getScreenXY(vector.position)
|
|
|
- const target = coordinate.getScreenXY(vector.popPosition)
|
|
|
- const style = help.setVectorStyle(ctx, vector)
|
|
|
+ });
|
|
|
+ const pt = coordinate.getScreenXY(vector.position);
|
|
|
+ const target = coordinate.getScreenXY(vector.popPosition);
|
|
|
+ const style = help.setVectorStyle(ctx, vector);
|
|
|
const radius =
|
|
|
((vector.radius || style.radius) * coordinate.ratio * coordinate.zoom) /
|
|
|
coordinate.defaultZoom;
|
|
|
- const offset = radius / 2
|
|
|
- const targetPts = style === Style.Focus.Magnifier ? [
|
|
|
- mathUtil.translate(pt, target, pt, radius),
|
|
|
- target
|
|
|
- ] : null
|
|
|
+ const offset = radius / 2;
|
|
|
+ const targetPts =
|
|
|
+ style === Style.Focus.Magnifier
|
|
|
+ ? [mathUtil.translate(pt, target, pt, radius), target]
|
|
|
+ : null;
|
|
|
|
|
|
ctx.save();
|
|
|
- ctx.beginPath()
|
|
|
- ctx.moveTo(pt.x - offset, pt.y)
|
|
|
- ctx.lineTo(pt.x + offset, pt.y)
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(pt.x - offset, pt.y);
|
|
|
+ ctx.lineTo(pt.x + offset, pt.y);
|
|
|
ctx.stroke();
|
|
|
- ctx.beginPath()
|
|
|
- ctx.moveTo(pt.x, pt.y - offset)
|
|
|
- ctx.lineTo(pt.x, pt.y + offset)
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(pt.x, pt.y - offset);
|
|
|
+ ctx.lineTo(pt.x, pt.y + offset);
|
|
|
ctx.stroke();
|
|
|
|
|
|
if (targetPts) {
|
|
|
- ctx.beginPath()
|
|
|
- ctx.moveTo(targetPts[0].x, targetPts[0].y)
|
|
|
- ctx.lineTo(targetPts[1].x, targetPts[1].y)
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(targetPts[0].x, targetPts[0].y);
|
|
|
+ ctx.lineTo(targetPts[1].x, targetPts[1].y);
|
|
|
ctx.stroke();
|
|
|
|
|
|
- let img, imgBound
|
|
|
+ let img, imgBound;
|
|
|
if (vector.photoImage) {
|
|
|
- img = vector.photoImage
|
|
|
- imgBound = [0, 0, img.width, img.height]
|
|
|
+ img = vector.photoImage;
|
|
|
+ imgBound = [0, 0, img.width, img.height];
|
|
|
} else {
|
|
|
- const size = style.target.realRadius
|
|
|
- const backImg = dataService.getBackgroundImg()
|
|
|
- img = backImg.imageData
|
|
|
- const imgCenter = coordinate.getScreenXY(backImg.center)
|
|
|
+ const size = style.target.realRadius;
|
|
|
+ const backImg = dataService.getBackgroundImg();
|
|
|
+ img = backImg.imageData;
|
|
|
+ const imgCenter = coordinate.getScreenXY(backImg.center);
|
|
|
const start = {
|
|
|
x: imgCenter.x - img.width / 2,
|
|
|
- y: imgCenter.y - img.height / 2
|
|
|
- }
|
|
|
+ y: imgCenter.y - img.height / 2,
|
|
|
+ };
|
|
|
imgBound = [
|
|
|
pt.x - start.x - size,
|
|
|
pt.y - start.y - size,
|
|
|
size * 2,
|
|
|
- size * 2
|
|
|
- ]
|
|
|
+ size * 2,
|
|
|
+ ];
|
|
|
}
|
|
|
const size = help.getReal(style.target.radius);
|
|
|
- ctx.beginPath()
|
|
|
- ctx.arc(target.x, target.y, size, 0, 2*Math.PI);
|
|
|
- ctx.clip()
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(target.x, target.y, size, 0, 2 * Math.PI);
|
|
|
+ ctx.clip();
|
|
|
ctx.drawImage(
|
|
|
img,
|
|
|
...imgBound,
|
|
|
target.x - size,
|
|
|
target.y - size,
|
|
|
- size*2,
|
|
|
- size*2
|
|
|
+ size * 2,
|
|
|
+ size * 2
|
|
|
);
|
|
|
- ctx.strokeStyle = style.target.strokeStyle
|
|
|
- ctx.lineWidth = style.target.lineWidth
|
|
|
- ctx.stroke()
|
|
|
+ ctx.strokeStyle = style.target.strokeStyle;
|
|
|
+ ctx.lineWidth = style.target.lineWidth;
|
|
|
+ ctx.stroke();
|
|
|
}
|
|
|
ctx.restore();
|
|
|
}
|
|
@@ -505,11 +503,11 @@ export default class Draw {
|
|
|
drawCircle(element) {
|
|
|
this.drawPoint({
|
|
|
...element,
|
|
|
- geoType: 'Circle',
|
|
|
- ...element.center
|
|
|
+ geoType: "Circle",
|
|
|
+ ...element.center,
|
|
|
});
|
|
|
|
|
|
- element.points.forEach(point => this.drawPoint(point))
|
|
|
+ element.points.forEach((point) => this.drawPoint(point));
|
|
|
}
|
|
|
|
|
|
drawPoint(vector) {
|
|
@@ -517,9 +515,9 @@ export default class Draw {
|
|
|
const ctx = this.context;
|
|
|
const style = help.setVectorStyle(ctx, vector, vector.geoType || "Point");
|
|
|
if (vector.color) {
|
|
|
- ctx.strokeStyle = vector.color
|
|
|
+ ctx.strokeStyle = vector.color;
|
|
|
}
|
|
|
- const radius = help.getReal(vector.radius || style.radius)
|
|
|
+ const radius = help.getReal(vector.radius || style.radius);
|
|
|
ctx.save();
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(pt.x, pt.y, radius, 0, Math.PI * 2, true);
|
|
@@ -541,8 +539,8 @@ export default class Draw {
|
|
|
|
|
|
const pt = coordinate.getScreenXY(position);
|
|
|
const text = ctx.measureText(txt);
|
|
|
- pt.x -= text.width / 2
|
|
|
- pt.y += (text.actualBoundingBoxAscent + text.actualBoundingBoxDescent) / 2
|
|
|
+ pt.x -= text.width / 2;
|
|
|
+ pt.y += (text.actualBoundingBoxAscent + text.actualBoundingBoxDescent) / 2;
|
|
|
if (angle) {
|
|
|
ctx.translate(pt.x, pt.y);
|
|
|
ctx.rotate(angle);
|
|
@@ -556,19 +554,19 @@ export default class Draw {
|
|
|
// 文字
|
|
|
drawText(vector) {
|
|
|
help.setVectorStyle(this.context, vector);
|
|
|
- this.context.fillStyle = vector.color
|
|
|
- const oldFont = this.context.font
|
|
|
- this.context.font = `${vector.fontSize}px Microsoft YaHei`
|
|
|
+ this.context.fillStyle = vector.color;
|
|
|
+ const oldFont = this.context.font;
|
|
|
+ this.context.font = `${vector.fontSize}px Microsoft YaHei`;
|
|
|
this.drawTextByInfo(vector.center, vector.value, 0, false);
|
|
|
- this.context.font = oldFont
|
|
|
+ this.context.font = oldFont;
|
|
|
}
|
|
|
|
|
|
drawLine(vector) {
|
|
|
- console.log(vector)
|
|
|
+ console.log(vector);
|
|
|
if ([UIEvents.Arrow, UIEvents.MeasureLine].includes(vector.category)) {
|
|
|
return this.drawArrow(vector);
|
|
|
}
|
|
|
- console.log(vector)
|
|
|
+ console.log(vector);
|
|
|
let start = dataService.getPoint(vector.startId);
|
|
|
start = coordinate.getScreenXY(start);
|
|
|
let end = dataService.getPoint(vector.endId);
|