|
@@ -1105,7 +1105,7 @@ export default class Draw {
|
|
|
|
|
|
const screen = coordinate.getScreenXY(vector);
|
|
|
const textPt = coordinate.getXYFromScreenNotRatio({
|
|
|
- y: screen.y + bound.height + style.radius,
|
|
|
+ y: screen.y + bound.height + style.radius + 4 * coordinate.ratio,
|
|
|
x: screen.x - bound.width / 2,
|
|
|
});
|
|
|
|
|
@@ -1144,35 +1144,63 @@ export default class Draw {
|
|
|
|
|
|
// 文字
|
|
|
drawText(vector) {
|
|
|
- console.log(vector);
|
|
|
this.context.save();
|
|
|
- help.setVectorStyle(this.context, vector);
|
|
|
+ const [_, foo] = help.setVectorStyle(this.context, vector);
|
|
|
this.context.fillStyle = vector.color;
|
|
|
+ this.context.textBaseline = "bottom";
|
|
|
this.context.font = `${
|
|
|
vector.fontSize * coordinate.ratio
|
|
|
}px Microsoft YaHei`;
|
|
|
- const bound = help.getTextCenter(this.context, vector.value);
|
|
|
-
|
|
|
- // console.log(vector)
|
|
|
- const screen = coordinate.getScreenXY(vector.center);
|
|
|
- this.drawTextByInfo(
|
|
|
- // vector.center,
|
|
|
- coordinate.getXYFromScreenNotRatio({
|
|
|
- // y: screen.y + (bound.height + Style.Point.radius),
|
|
|
- y: screen.y + (bound.height + Style.Point.radius),
|
|
|
- x: screen.x - bound.width / 2,
|
|
|
- }),
|
|
|
- vector.value,
|
|
|
- -(vector.angle || 0),
|
|
|
- false
|
|
|
- );
|
|
|
+ const bound = vector
|
|
|
+ .getBound(this.context)
|
|
|
+ .map(coordinate.getScreenXY.bind(coordinate));
|
|
|
|
|
|
- this.context.restore();
|
|
|
+ this.context.fillText(vector.value, bound[3].x, bound[3].y);
|
|
|
|
|
|
+ if (foo) {
|
|
|
+ this.context.beginPath();
|
|
|
+ const padding = 2 * coordinate.ratio;
|
|
|
+ this.context.moveTo(bound[0].x - padding, bound[0].y - padding);
|
|
|
+ this.context.lineTo(bound[1].x + padding, bound[1].y - padding);
|
|
|
+ this.context.lineTo(bound[2].x + padding, bound[2].y + padding);
|
|
|
+ this.context.lineTo(bound[3].x - padding, bound[3].y + padding);
|
|
|
+ this.context.strokeStyle = "rgba(255, 153, 0, 1)";
|
|
|
+ this.context.fillStyle = "rgba(255, 153, 0, 0.30)";
|
|
|
+ this.context.lineWidth = 2 * coordinate.ratio;
|
|
|
+ this.context.setLineDash([6 * coordinate.ratio, 2 * coordinate.ratio]);
|
|
|
+ this.context.closePath();
|
|
|
+ this.context.stroke();
|
|
|
+ this.context.fill();
|
|
|
+ }
|
|
|
+ this.context.restore();
|
|
|
vector.displayPoint &&
|
|
|
- this.drawPoint({ ...vector.center, color: vector.color }, true);
|
|
|
+ this.drawPoint(
|
|
|
+ { ...vector.center, color: vector.color, fillColor: vector.color },
|
|
|
+ true
|
|
|
+ );
|
|
|
+
|
|
|
+ // const bound = help.getTextCenter(this.context, vector.value);
|
|
|
+
|
|
|
+ // // console.log(vector)
|
|
|
+ // const screen = coordinate.getScreenXY(vector.center);
|
|
|
+ // this.drawTextByInfo(
|
|
|
+ // // vector.center,
|
|
|
+ // coordinate.getXYFromScreenNotRatio({
|
|
|
+ // // y: screen.y + (bound.height + Style.Point.radius),
|
|
|
+ // y: screen.y + (bound.height + Style.Point.radius),
|
|
|
+ // x: screen.x - bound.width / 2,
|
|
|
+ // }),
|
|
|
+ // vector.value,
|
|
|
+ // -(vector.angle || 0),
|
|
|
+ // false
|
|
|
+ // );
|
|
|
+
|
|
|
+ // this.context.restore();
|
|
|
+
|
|
|
+ // vector.displayPoint &&
|
|
|
+ // this.drawPoint({ ...vector.center, color: vector.color }, true);
|
|
|
|
|
|
- // vector.getBound(this.context).forEach(this.drawPoint.bind(this))
|
|
|
+ // vector.getBound(this.context).forEach(this.drawPoint.bind(this));
|
|
|
}
|
|
|
|
|
|
drawSVG(vector) {
|