From 98c1924693c744c18e57fc5f841ca30963bc5192 Mon Sep 17 00:00:00 2001 From: chndfang Date: Sun, 15 Jun 2025 16:20:58 +0800 Subject: [PATCH] fix: control point --- src/services/editor.service.ts | 52 ++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts index d7817e8..03e20fa 100644 --- a/src/services/editor.service.ts +++ b/src/services/editor.service.ts @@ -156,8 +156,8 @@ export class EditorService extends Meta2d { }; const { x: x1, y: y1 } = this.getPointRect(p1)!; const { x: x2, y: y2 } = this.getPointRect(p2)!; - const cp1 = { x: x1 + (c1?.x ?? x2 - x1), y: y1 + (c1?.y ?? 0) }; - const cp2 = { x: x2 + (c2?.x ?? 0), y: y2 + (c2?.y ?? y1 - y2) }; + const cp1 = { x: x1 + (c1?.x ?? 0), y: y1 + (c1?.y ?? 0) }; + const cp2 = { x: x2 + (c2?.x ?? 0), y: y2 + (c2?.y ?? 0) }; switch (type) { case MapRouteType.二阶贝塞尔曲线: route.c1 = cp1; @@ -531,7 +531,7 @@ export class EditorService extends Meta2d { const line = this.connectLine(p1, p2, undefined, undefined, false); id ||= line.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.updateLineType(line, type); this.active(id); @@ -789,38 +789,38 @@ function anchorPoint(pen: MapPen): void { function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void { 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 { x: x1 = 0, y: y1 = 0 } = p1 ?? {}; const { x: x2 = 0, y: y2 = 0 } = p2 ?? {}; const { type, direction = 1, pass = 0, c1, c2 } = pen.route ?? {}; - const { x: dx1 = x2 - x1, y: dy1 = 0 } = c1 ?? {}; - const { x: dx2 = 0, y: dy2 = y1 - y2 } = c2 ?? {}; + const { x: dx1 = 0, y: dy1 = 0 } = c1 ?? {}; + const { x: dx2 = 0, y: dy2 = 0 } = c2 ?? {}; ctx.save(); ctx.beginPath(); 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); switch (type) { case MapRouteType.直线: ctx.lineTo(x2, y2); break; case MapRouteType.二阶贝塞尔曲线: - ctx.quadraticCurveTo(x1 + dx1, y1 + dy1, x2, y2); - p1.next = { x: x1 + (2 / 3) * dx1, y: y1 + (2 / 3) * dy1 }; - p2.prev = { x: x2 / 3 + (2 / 3) * (x1 + dx1), y: y2 / 3 + (2 / 3) * (y1 + dy1) }; + ctx.quadraticCurveTo(x1 + dx1 * s, y1 + dy1 * s, x2, y2); + p1.next = { x: x1 + (2 / 3) * dx1 * s, y: y1 + (2 / 3) * dy1 * s }; + p2.prev = { x: x2 / 3 + (2 / 3) * (x1 + dx1 * s), y: y2 / 3 + (2 / 3) * (y1 + dy1 * s) }; break; case MapRouteType.三阶贝塞尔曲线: - ctx.bezierCurveTo(x1 + dx1, y1 + dy1, x2 + dx2, y2 + dy2, x2, y2); - p1.next = { x: x1 + dx1, y: y1 + dy1 }; - p2.prev = { x: x2 + dx2, y: y2 + dy2 }; + ctx.bezierCurveTo(x1 + dx1 * s, y1 + dy1 * s, x2 + dx2 * s, y2 + dy2 * s, x2, y2); + p1.next = { x: x1 + dx1 * s, y: y1 + dy1 * s }; + p2.prev = { x: x2 + dx2 * s, y: y2 + dy2 * s }; break; default: break; } if (pass === MapRoutePassType.禁行) { - ctx.setLineDash([s / 2]); + ctx.setLineDash([s * 5]); } ctx.stroke(); ctx.beginPath(); @@ -830,9 +830,9 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void { case MapRouteType.直线: return Math.atan2(y2 - y1, x2 - x1); 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.三阶贝塞尔曲线: - 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: return 0; } @@ -843,9 +843,9 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void { ctx.translate(x2, y2); 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(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.setTransform(1, 0, 0, 1, 0, 0); ctx.restore(); @@ -853,23 +853,25 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void { function lineBezier2(_: Meta2dStore, pen: MapPen): void { if (pen.calculative?.worldAnchors?.length !== 2) return; const { c1 } = pen.route ?? {}; + const { lineWidth: s = 1 } = pen.calculative ?? {}; const [p1, p2] = pen.calculative?.worldAnchors ?? []; const { x: x1 = 0, y: y1 = 0 } = p1 ?? {}; const { x: x2 = 0, y: y2 = 0 } = p2 ?? {}; - const { x: dx = x2 - x1, y: dy = 0 } = c1 ?? {}; - pen.calculative.worldAnchors[0].next = { x: x1 + (2 / 3) * dx, y: y1 + (2 / 3) * dy }; - pen.calculative.worldAnchors[1].prev = { x: x2 / 3 + (2 / 3) * (x1 + dx), y: y2 / 3 + (2 / 3) * (y1 + dy) }; + const { x: dx = 0, y: dy = 0 } = c1 ?? {}; + 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 * s), y: y2 / 3 + (2 / 3) * (y1 + dy * s) }; } function lineBezier3(_: Meta2dStore, pen: MapPen): void { if (pen.calculative?.worldAnchors?.length !== 2) return; const { c1, c2 } = pen.route ?? {}; + const { lineWidth: s = 1 } = pen.calculative ?? {}; const [p1, p2] = pen.calculative?.worldAnchors ?? []; const { x: x1 = 0, y: y1 = 0 } = p1 ?? {}; const { x: x2 = 0, y: y2 = 0 } = p2 ?? {}; - const { x: dx1 = x2 - x1, y: dy1 = 0 } = c1 ?? {}; - const { x: dx2 = 0, y: dy2 = y1 - y2 } = c2 ?? {}; - pen.calculative.worldAnchors[0].next = { x: x1 + dx1, y: y1 + dy1 }; - pen.calculative.worldAnchors[1].prev = { x: x2 + dx2, y: y2 + dy2 }; + const { x: dx1 = 0, y: dy1 = 0 } = c1 ?? {}; + const { x: dx2 = 0, y: dy2 = 0 } = c2 ?? {}; + pen.calculative.worldAnchors[0].next = { x: x1 + dx1 * s, y: y1 + dy1 * s }; + pen.calculative.worldAnchors[1].prev = { x: x2 + dx2 * s, y: y2 + dy2 * s }; } function drawArea(ctx: CanvasRenderingContext2D, pen: MapPen): void {