Skip to content

Commit c5195c0

Browse files
author
le5le-com
committed
perfect_arrow
1 parent 5503452 commit c5195c0

4 files changed

Lines changed: 82 additions & 31 deletions

File tree

‎packages/core/src/middles/arrows/circle.ts‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import { Store } from 'le5le-store';
22
import { Point } from '../../models/point';
33

4-
export function circleSolid(ctx: CanvasRenderingContext2D, from: Point, to: Point, size: number, fillStyle?: string) {
4+
export function circleSolid(
5+
ctx: CanvasRenderingContext2D,
6+
from: Point,
7+
to: Point,
8+
size: number,
9+
fillStyle?: string
10+
) {
511
size += ctx.lineWidth * 3;
612
const r = size / 2;
713
if (ctx.lineWidth < 2) {
@@ -10,7 +16,7 @@ export function circleSolid(ctx: CanvasRenderingContext2D, from: Point, to: Poin
1016
ctx.translate(to.x, to.y);
1117
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
1218
ctx.translate(-to.x, -to.y - ctx.lineWidth / 10);
13-
ctx.arc(to.x - r - ctx.lineWidth / 2, to.y, r, 0, 2 * Math.PI);
19+
ctx.arc(to.x, to.y, r, 0, 2 * Math.PI);
1420
ctx.stroke();
1521
if (fillStyle) {
1622
ctx.fillStyle = fillStyle;
@@ -20,6 +26,11 @@ export function circleSolid(ctx: CanvasRenderingContext2D, from: Point, to: Poin
2026
ctx.fill();
2127
}
2228

23-
export function circle(ctx: CanvasRenderingContext2D, from: Point, to: Point, size: number) {
29+
export function circle(
30+
ctx: CanvasRenderingContext2D,
31+
from: Point,
32+
to: Point,
33+
size: number
34+
) {
2435
circleSolid(ctx, from, to, size, Store.get('LT:bkColor') || '#fff');
2536
}

‎packages/core/src/middles/arrows/diamond.ts‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import { Store } from 'le5le-store';
22
import { Point } from '../../models/point';
33

4-
export function diamondSolid(ctx: CanvasRenderingContext2D, from: Point, to: Point, size: number, fillStyle?: string) {
4+
export function diamondSolid(
5+
ctx: CanvasRenderingContext2D,
6+
from: Point,
7+
to: Point,
8+
size: number,
9+
fillStyle?: string
10+
) {
511
size += ctx.lineWidth * 3;
612
const r = size / 2;
713
let arrowWidth = ctx.lineWidth / 10;
@@ -12,12 +18,14 @@ export function diamondSolid(ctx: CanvasRenderingContext2D, from: Point, to: Poi
1218
ctx.translate(to.x, to.y);
1319
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
1420
ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y);
15-
ctx.moveTo(to.x, to.y + arrowWidth);
16-
ctx.lineTo(to.x, to.y - arrowWidth);
17-
ctx.lineTo(to.x - r, to.y - r / 2);
18-
ctx.lineTo(to.x - size, to.y - arrowWidth);
19-
ctx.lineTo(to.x - size, to.y + arrowWidth);
20-
ctx.lineTo(to.x - r, to.y + r / 2);
21+
// ctx.moveTo(to.x, to.y + arrowWidth);
22+
// ctx.lineTo(to.x, to.y - arrowWidth);
23+
ctx.lineTo(to.x + r, to.y);
24+
ctx.lineTo(to.x, to.y - r / 2);
25+
// ctx.lineTo(to.x - size, to.y - arrowWidth);
26+
// ctx.lineTo(to.x - size, to.y + arrowWidth);
27+
ctx.lineTo(to.x - size + r, to.y);
28+
ctx.lineTo(to.x, to.y + r / 2);
2129
ctx.closePath();
2230
ctx.stroke();
2331
if (fillStyle) {
@@ -28,6 +36,11 @@ export function diamondSolid(ctx: CanvasRenderingContext2D, from: Point, to: Poi
2836
ctx.fill();
2937
}
3038

31-
export function diamond(ctx: CanvasRenderingContext2D, from: Point, to: Point, size: number) {
39+
export function diamond(
40+
ctx: CanvasRenderingContext2D,
41+
from: Point,
42+
to: Point,
43+
size: number
44+
) {
3245
diamondSolid(ctx, from, to, size, Store.get('LT:bkColor') || '#fff');
3346
}

‎packages/core/src/middles/arrows/line.ts‎

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,64 @@
11
import { Point } from '../../models/point';
22

3-
export function line(ctx: CanvasRenderingContext2D, from: Point, to: Point, size: number) {
3+
export function line(
4+
ctx: CanvasRenderingContext2D,
5+
from: Point,
6+
to: Point,
7+
size: number
8+
) {
49
size += ctx.lineWidth * 3;
510
ctx.translate(to.x, to.y);
611
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
712
ctx.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5);
8-
ctx.moveTo(to.x, to.y);
9-
ctx.lineTo(to.x - size, to.y - size / 3);
10-
ctx.moveTo(to.x, to.y);
11-
ctx.lineTo(to.x - size, to.y + size / 3);
13+
ctx.moveTo(to.x + ctx.lineWidth, to.y);
14+
ctx.lineTo(to.x - size + ctx.lineWidth, to.y - size / 3);
15+
ctx.moveTo(to.x + ctx.lineWidth, to.y);
16+
ctx.lineTo(to.x - size + ctx.lineWidth, to.y + size / 3);
1217
ctx.stroke();
1318
}
1419

15-
export function lineUp(ctx: CanvasRenderingContext2D, from: Point, to: Point, size: number) {
20+
export function lineUp(
21+
ctx: CanvasRenderingContext2D,
22+
from: Point,
23+
to: Point,
24+
size: number
25+
) {
1626
size += ctx.lineWidth * 3;
1727
ctx.translate(to.x, to.y);
1828
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
1929
ctx.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5);
2030
if (to.x > from.x) {
21-
ctx.moveTo(to.x, to.y);
22-
ctx.lineTo(to.x - size, to.y - size / 3);
31+
ctx.moveTo(to.x + ctx.lineWidth / 5, to.y);
32+
ctx.lineTo(to.x - size + ctx.lineWidth / 5, to.y - size / 3);
2333
} else {
24-
ctx.moveTo(to.x, to.y);
25-
ctx.lineTo(to.x - size, to.y + size / 3);
34+
ctx.moveTo(to.x + ctx.lineWidth / 5, to.y);
35+
ctx.lineTo(to.x - size + ctx.lineWidth / 5, to.y + size / 3);
2636
}
2737
ctx.stroke();
2838
}
2939

30-
export function lineDown(ctx: CanvasRenderingContext2D, from: Point, to: Point, size: number) {
40+
export function lineDown(
41+
ctx: CanvasRenderingContext2D,
42+
from: Point,
43+
to: Point,
44+
size: number
45+
) {
3146
size += ctx.lineWidth * 3;
3247
ctx.translate(to.x, to.y);
3348
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
3449
ctx.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5);
3550
if (to.x < from.x) {
36-
ctx.moveTo(to.x, to.y);
37-
ctx.lineTo(to.x - size, to.y - size / 3);
51+
ctx.moveTo(to.x + ctx.lineWidth / 5, to.y + ctx.lineWidth / 5);
52+
ctx.lineTo(
53+
to.x - size + ctx.lineWidth / 5,
54+
to.y - size / 3 + ctx.lineWidth / 5
55+
);
3856
} else {
39-
ctx.moveTo(to.x, to.y);
40-
ctx.lineTo(to.x - size, to.y + size / 3);
57+
ctx.moveTo(to.x + ctx.lineWidth / 5, to.y + ctx.lineWidth / 5);
58+
ctx.lineTo(
59+
to.x - size + ctx.lineWidth / 5,
60+
to.y + size / 3 + ctx.lineWidth / 5
61+
);
4162
}
4263
ctx.stroke();
4364
}

‎packages/core/src/middles/arrows/triangle.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ export function triangleSolid(
1717
ctx.translate(to.x, to.y);
1818
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
1919
ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y);
20-
ctx.moveTo(to.x, to.y + arrowWidth);
21-
ctx.lineTo(to.x, to.y - arrowWidth);
22-
ctx.lineTo(to.x - size, to.y - size / 3);
23-
ctx.lineTo(to.x - size, to.y + size / 3);
20+
// ctx.moveTo(to.x, to.y + arrowWidth);
21+
// ctx.lineTo(to.x, to.y - arrowWidth);
22+
ctx.lineTo(to.x + size, to.y);
23+
ctx.lineTo(to.x, to.y - size / 3);
24+
ctx.lineTo(to.x, to.y + size / 3);
2425

2526
ctx.closePath();
2627
ctx.stroke();
@@ -32,6 +33,11 @@ export function triangleSolid(
3233
ctx.fill();
3334
}
3435

35-
export function triangle(ctx: CanvasRenderingContext2D, from: Point, to: Point, size: number) {
36+
export function triangle(
37+
ctx: CanvasRenderingContext2D,
38+
from: Point,
39+
to: Point,
40+
size: number
41+
) {
3642
triangleSolid(ctx, from, to, size, Store.get('LT:bkColor') || '#fff');
3743
}

0 commit comments

Comments
 (0)
⚡