This commit is contained in:
徐旦 2025-06-15 16:27:09 +08:00
commit eabd121f31

View File

@ -156,8 +156,8 @@ export class EditorService extends Meta2d {
}; };
const { x: x1, y: y1 } = this.getPointRect(p1)!; const { x: x1, y: y1 } = this.getPointRect(p1)!;
const { x: x2, y: y2 } = this.getPointRect(p2)!; const { x: x2, y: y2 } = this.getPointRect(p2)!;
const cp1 = { x: x1 + (c1?.x ?? x2 - x1), y: y1 + (c1?.y ?? 0) }; const cp1 = { x: x1 + (c1?.x ?? 0), y: y1 + (c1?.y ?? 0) };
const cp2 = { x: x2 + (c2?.x ?? 0), y: y2 + (c2?.y ?? y1 - y2) }; const cp2 = { x: x2 + (c2?.x ?? 0), y: y2 + (c2?.y ?? 0) };
switch (type) { switch (type) {
case MapRouteType.线: case MapRouteType.线:
route.c1 = cp1; route.c1 = cp1;
@ -531,7 +531,7 @@ export class EditorService extends Meta2d {
const line = this.connectLine(p1, p2, undefined, undefined, false); const line = this.connectLine(p1, p2, undefined, undefined, false);
id ||= line.id!; id ||= line.id!;
this.changePenId(line.id!, id); this.changePenId(line.id!, id);
const pen: MapPen = { tags: ['route'], route: { type }, lineWidth: 2, iconSize: 10 }; const pen: MapPen = { tags: ['route'], route: { type }, lineWidth: 1 };
this.setValue({ id, ...pen }, { render: false, history: false, doEvent: false }); this.setValue({ id, ...pen }, { render: false, history: false, doEvent: false });
this.updateLineType(line, type); this.updateLineType(line, type);
this.active(id); this.active(id);
@ -789,38 +789,38 @@ function anchorPoint(pen: MapPen): void {
function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void { function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
const theme = sTheme.editor; const theme = sTheme.editor;
const { active, lineWidth: w = 2, iconSize: s = 10 } = pen.calculative ?? {}; const { active, lineWidth: s = 1 } = pen.calculative ?? {};
const [p1, p2] = pen.calculative?.worldAnchors ?? []; const [p1, p2] = pen.calculative?.worldAnchors ?? [];
const { x: x1 = 0, y: y1 = 0 } = p1 ?? {}; const { x: x1 = 0, y: y1 = 0 } = p1 ?? {};
const { x: x2 = 0, y: y2 = 0 } = p2 ?? {}; const { x: x2 = 0, y: y2 = 0 } = p2 ?? {};
const { type, direction = 1, pass = 0, c1, c2 } = pen.route ?? {}; const { type, direction = 1, pass = 0, c1, c2 } = pen.route ?? {};
const { x: dx1 = x2 - x1, y: dy1 = 0 } = c1 ?? {}; const { x: dx1 = 0, y: dy1 = 0 } = c1 ?? {};
const { x: dx2 = 0, y: dy2 = y1 - y2 } = c2 ?? {}; const { x: dx2 = 0, y: dy2 = 0 } = c2 ?? {};
ctx.save(); ctx.save();
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = get(theme, active ? 'route.strokeActive' : `route.stroke-${pass}`) ?? ''; ctx.strokeStyle = get(theme, active ? 'route.strokeActive' : `route.stroke-${pass}`) ?? '';
ctx.lineWidth = active ? 1.5 * w : w; ctx.lineWidth = active ? 3 * s : 2 * s;
ctx.moveTo(x1, y1); ctx.moveTo(x1, y1);
switch (type) { switch (type) {
case MapRouteType.线: case MapRouteType.线:
ctx.lineTo(x2, y2); ctx.lineTo(x2, y2);
break; break;
case MapRouteType.线: case MapRouteType.线:
ctx.quadraticCurveTo(x1 + dx1, y1 + dy1, x2, y2); ctx.quadraticCurveTo(x1 + dx1 * s, y1 + dy1 * s, x2, y2);
p1.next = { x: x1 + (2 / 3) * dx1, y: y1 + (2 / 3) * dy1 }; p1.next = { x: x1 + (2 / 3) * dx1 * s, y: y1 + (2 / 3) * dy1 * s };
p2.prev = { x: x2 / 3 + (2 / 3) * (x1 + dx1), y: y2 / 3 + (2 / 3) * (y1 + dy1) }; p2.prev = { x: x2 / 3 + (2 / 3) * (x1 + dx1 * s), y: y2 / 3 + (2 / 3) * (y1 + dy1 * s) };
break; break;
case MapRouteType.线: case MapRouteType.线:
ctx.bezierCurveTo(x1 + dx1, y1 + dy1, x2 + dx2, y2 + dy2, x2, y2); ctx.bezierCurveTo(x1 + dx1 * s, y1 + dy1 * s, x2 + dx2 * s, y2 + dy2 * s, x2, y2);
p1.next = { x: x1 + dx1, y: y1 + dy1 }; p1.next = { x: x1 + dx1 * s, y: y1 + dy1 * s };
p2.prev = { x: x2 + dx2, y: y2 + dy2 }; p2.prev = { x: x2 + dx2 * s, y: y2 + dy2 * s };
break; break;
default: default:
break; break;
} }
if (pass === MapRoutePassType.) { if (pass === MapRoutePassType.) {
ctx.setLineDash([s / 2]); ctx.setLineDash([s * 5]);
} }
ctx.stroke(); ctx.stroke();
ctx.beginPath(); ctx.beginPath();
@ -830,9 +830,9 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
case MapRouteType.线: case MapRouteType.线:
return Math.atan2(y2 - y1, x2 - x1); return Math.atan2(y2 - y1, x2 - x1);
case MapRouteType.线: case MapRouteType.线:
return direction < 0 ? Math.atan2(dy1, dx1) : Math.atan2(y2 - y1 - dy1, x2 - x1 - dx1); return direction < 0 ? Math.atan2(dy1 * s, dx1 * s) : Math.atan2(y2 - y1 - dy1 * s, x2 - x1 - dx1 * s);
case MapRouteType.线: case MapRouteType.线:
return direction < 0 ? Math.atan2(dy1, dx1) : Math.atan2(-dy2, -dx2); return direction < 0 ? Math.atan2(dy1 * s, dx1 * s) : Math.atan2(-dy2 * s, -dx2 * s);
default: default:
return 0; return 0;
} }
@ -843,9 +843,9 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
ctx.translate(x2, y2); ctx.translate(x2, y2);
r += Math.PI; r += Math.PI;
} }
ctx.moveTo(Math.cos(r + Math.PI / 5) * s, Math.sin(r + Math.PI / 5) * s); ctx.moveTo(Math.cos(r + Math.PI / 5) * s * 10, Math.sin(r + Math.PI / 5) * s * 10);
ctx.lineTo(0, 0); ctx.lineTo(0, 0);
ctx.lineTo(Math.cos(r - Math.PI / 5) * s, Math.sin(r - Math.PI / 5) * s); ctx.lineTo(Math.cos(r - Math.PI / 5) * s * 10, Math.sin(r - Math.PI / 5) * s * 10);
ctx.stroke(); ctx.stroke();
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.restore(); ctx.restore();
@ -853,23 +853,25 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
function lineBezier2(_: Meta2dStore, pen: MapPen): void { function lineBezier2(_: Meta2dStore, pen: MapPen): void {
if (pen.calculative?.worldAnchors?.length !== 2) return; if (pen.calculative?.worldAnchors?.length !== 2) return;
const { c1 } = pen.route ?? {}; const { c1 } = pen.route ?? {};
const { lineWidth: s = 1 } = pen.calculative ?? {};
const [p1, p2] = pen.calculative?.worldAnchors ?? []; const [p1, p2] = pen.calculative?.worldAnchors ?? [];
const { x: x1 = 0, y: y1 = 0 } = p1 ?? {}; const { x: x1 = 0, y: y1 = 0 } = p1 ?? {};
const { x: x2 = 0, y: y2 = 0 } = p2 ?? {}; const { x: x2 = 0, y: y2 = 0 } = p2 ?? {};
const { x: dx = x2 - x1, y: dy = 0 } = c1 ?? {}; const { x: dx = 0, y: dy = 0 } = c1 ?? {};
pen.calculative.worldAnchors[0].next = { x: x1 + (2 / 3) * dx, y: y1 + (2 / 3) * dy }; pen.calculative.worldAnchors[0].next = { x: x1 + (2 / 3) * dx * s, y: y1 + (2 / 3) * dy * s };
pen.calculative.worldAnchors[1].prev = { x: x2 / 3 + (2 / 3) * (x1 + dx), y: y2 / 3 + (2 / 3) * (y1 + dy) }; pen.calculative.worldAnchors[1].prev = { x: x2 / 3 + (2 / 3) * (x1 + dx * s), y: y2 / 3 + (2 / 3) * (y1 + dy * s) };
} }
function lineBezier3(_: Meta2dStore, pen: MapPen): void { function lineBezier3(_: Meta2dStore, pen: MapPen): void {
if (pen.calculative?.worldAnchors?.length !== 2) return; if (pen.calculative?.worldAnchors?.length !== 2) return;
const { c1, c2 } = pen.route ?? {}; const { c1, c2 } = pen.route ?? {};
const { lineWidth: s = 1 } = pen.calculative ?? {};
const [p1, p2] = pen.calculative?.worldAnchors ?? []; const [p1, p2] = pen.calculative?.worldAnchors ?? [];
const { x: x1 = 0, y: y1 = 0 } = p1 ?? {}; const { x: x1 = 0, y: y1 = 0 } = p1 ?? {};
const { x: x2 = 0, y: y2 = 0 } = p2 ?? {}; const { x: x2 = 0, y: y2 = 0 } = p2 ?? {};
const { x: dx1 = x2 - x1, y: dy1 = 0 } = c1 ?? {}; const { x: dx1 = 0, y: dy1 = 0 } = c1 ?? {};
const { x: dx2 = 0, y: dy2 = y1 - y2 } = c2 ?? {}; const { x: dx2 = 0, y: dy2 = 0 } = c2 ?? {};
pen.calculative.worldAnchors[0].next = { x: x1 + dx1, y: y1 + dy1 }; pen.calculative.worldAnchors[0].next = { x: x1 + dx1 * s, y: y1 + dy1 * s };
pen.calculative.worldAnchors[1].prev = { x: x2 + dx2, y: y2 + dy2 }; pen.calculative.worldAnchors[1].prev = { x: x2 + dx2 * s, y: y2 + dy2 * s };
} }
function drawArea(ctx: CanvasRenderingContext2D, pen: MapPen): void { function drawArea(ctx: CanvasRenderingContext2D, pen: MapPen): void {