@leafer/path 1.0.0-beta.9 → 1.0.0-rc.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -5
- package/src/BezierHelper.ts +66 -5
- package/src/EllipseHelper.ts +3 -1
- package/src/PathBounds.ts +6 -6
- package/src/PathCommandDataHelper.ts +20 -5
- package/src/PathConvert.ts +3 -3
- package/src/PathCorner.ts +66 -2
- package/src/PathCreator.ts +10 -5
- package/src/RectHelper.ts +8 -11
- package/types/index.d.ts +100 -0
package/package.json
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leafer/path",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-rc.10",
|
|
4
4
|
"description": "@leafer/path",
|
|
5
5
|
"author": "Chao (Leafer) Wan",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "src/index.ts",
|
|
8
|
+
"types": "types/index.d.ts",
|
|
8
9
|
"files": [
|
|
9
|
-
"src"
|
|
10
|
+
"src",
|
|
11
|
+
"types",
|
|
12
|
+
"dist"
|
|
10
13
|
],
|
|
11
14
|
"repository": {
|
|
12
15
|
"type": "git",
|
|
@@ -19,10 +22,10 @@
|
|
|
19
22
|
"leaferjs"
|
|
20
23
|
],
|
|
21
24
|
"dependencies": {
|
|
22
|
-
"@leafer/math": "1.0.0-
|
|
23
|
-
"@leafer/debug": "1.0.0-
|
|
25
|
+
"@leafer/math": "1.0.0-rc.10",
|
|
26
|
+
"@leafer/debug": "1.0.0-rc.10"
|
|
24
27
|
},
|
|
25
28
|
"devDependencies": {
|
|
26
|
-
"@leafer/interface": "1.0.0-
|
|
29
|
+
"@leafer/interface": "1.0.0-rc.10"
|
|
27
30
|
}
|
|
28
31
|
}
|
package/src/BezierHelper.ts
CHANGED
|
@@ -5,13 +5,74 @@ import { PathCommandMap } from './PathCommandMap'
|
|
|
5
5
|
import { RectHelper } from './RectHelper'
|
|
6
6
|
import { PathHelper } from './PathHelper'
|
|
7
7
|
|
|
8
|
-
const { sin, cos, atan2, ceil, abs, PI } = Math
|
|
8
|
+
const { sin, cos, atan2, ceil, abs, PI, sqrt, pow } = Math
|
|
9
9
|
const { setPoint, addPoint } = TwoPointBoundsHelper
|
|
10
10
|
const { set } = PointHelper
|
|
11
|
+
const { M, L, C, Q, Z } = PathCommandMap
|
|
11
12
|
const tempPoint = {} as IPointData
|
|
12
13
|
|
|
13
14
|
export const BezierHelper = {
|
|
14
15
|
|
|
16
|
+
points(data: IPathCommandData, points: number[], curve?: boolean | number, close?: boolean): void {
|
|
17
|
+
data.push(M, points[0], points[1])
|
|
18
|
+
|
|
19
|
+
if (curve && points.length > 5) {
|
|
20
|
+
|
|
21
|
+
let aX: number, aY: number, bX: number, bY: number, cX: number, cY: number, c1X: number, c1Y: number, c2X: number, c2Y: number
|
|
22
|
+
let ba: number, cb: number, d: number, len = points.length
|
|
23
|
+
const t = curve === true ? 0.5 : curve as number
|
|
24
|
+
|
|
25
|
+
if (close) {
|
|
26
|
+
points = [points[len - 2], points[len - 1], ...points, points[0], points[1], points[2], points[3]]
|
|
27
|
+
len = points.length
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
for (let i = 2; i < len - 2; i += 2) {
|
|
31
|
+
aX = points[i - 2]
|
|
32
|
+
aY = points[i - 1]
|
|
33
|
+
|
|
34
|
+
bX = points[i]
|
|
35
|
+
bY = points[i + 1]
|
|
36
|
+
|
|
37
|
+
cX = points[i + 2]
|
|
38
|
+
cY = points[i + 3]
|
|
39
|
+
|
|
40
|
+
ba = sqrt(pow(bX - aX, 2) + pow(bY - aY, 2))
|
|
41
|
+
cb = sqrt(pow(cX - bX, 2) + pow(cY - bY, 2))
|
|
42
|
+
|
|
43
|
+
d = ba + cb
|
|
44
|
+
ba = (t * ba) / d
|
|
45
|
+
cb = (t * cb) / d
|
|
46
|
+
|
|
47
|
+
cX -= aX
|
|
48
|
+
cY -= aY
|
|
49
|
+
|
|
50
|
+
c1X = bX - ba * cX
|
|
51
|
+
c1Y = bY - ba * cY
|
|
52
|
+
|
|
53
|
+
if (i === 2) {
|
|
54
|
+
if (!close) data.push(Q, c1X, c1Y, bX, bY)
|
|
55
|
+
} else {
|
|
56
|
+
data.push(C, c2X, c2Y, c1X, c1Y, bX, bY)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
c2X = bX + cb * cX
|
|
60
|
+
c2Y = bY + cb * cY
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (!close) data.push(Q, c2X, c2Y, points[len - 2], points[len - 1])
|
|
64
|
+
|
|
65
|
+
} else {
|
|
66
|
+
|
|
67
|
+
for (let i = 2, len = points.length; i < len; i += 2) {
|
|
68
|
+
data.push(L, points[i], points[i + 1])
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
if (close) data.push(Z)
|
|
74
|
+
},
|
|
75
|
+
|
|
15
76
|
rect(data: IPathCommandData, x: number, y: number, width: number, height: number) {
|
|
16
77
|
PathHelper.creator.path = data
|
|
17
78
|
PathHelper.creator.moveTo(x, y).lineTo(x + width, y).lineTo(x + width, y + height).lineTo(x, y + height).lineTo(x, y)
|
|
@@ -35,7 +96,7 @@ export const BezierHelper = {
|
|
|
35
96
|
if (totalRadian < 0) totalRadian += PI2
|
|
36
97
|
|
|
37
98
|
if (totalRadian === PI || (abs(BAx + BAy) < 1.e-12) || (abs(CBx + CBy) < 1.e-12)) { // invalid
|
|
38
|
-
if (data) data.push(
|
|
99
|
+
if (data) data.push(L, x1, y1)
|
|
39
100
|
if (setPointBounds) {
|
|
40
101
|
setPoint(setPointBounds, fromX, fromY)
|
|
41
102
|
addPoint(setPointBounds, x1, y1)
|
|
@@ -97,7 +158,7 @@ export const BezierHelper = {
|
|
|
97
158
|
|
|
98
159
|
let fromX = cx + x, fromY = cy + y
|
|
99
160
|
|
|
100
|
-
if (data) data.push(
|
|
161
|
+
if (data) data.push(L, fromX, fromY)
|
|
101
162
|
if (setPointBounds) setPoint(setPointBounds, fromX, fromY)
|
|
102
163
|
if (setStartPoint) set(setStartPoint, fromX, fromY)
|
|
103
164
|
|
|
@@ -113,7 +174,7 @@ export const BezierHelper = {
|
|
|
113
174
|
x2 = cx + x + control * (rotationCos * radiusX * endSin + rotationSin * radiusY * endCos)
|
|
114
175
|
y2 = cy + y + control * (rotationSin * radiusX * endSin - rotationCos * radiusY * endCos)
|
|
115
176
|
|
|
116
|
-
if (data) data.push(
|
|
177
|
+
if (data) data.push(C, x1, y1, x2, y2, cx + x, cy + y)
|
|
117
178
|
if (setPointBounds) toTwoPointBounds(cx + startX, cy + startY, x1, y1, x2, y2, cx + x, cy + y, setPointBounds, true)
|
|
118
179
|
|
|
119
180
|
startX = x
|
|
@@ -129,7 +190,7 @@ export const BezierHelper = {
|
|
|
129
190
|
},
|
|
130
191
|
|
|
131
192
|
quadraticCurveTo(data: IPathCommandData, fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number): void {
|
|
132
|
-
data.push(
|
|
193
|
+
data.push(C, (fromX + 2 * x1) / 3, (fromY + 2 * y1) / 3, (toX + 2 * x1) / 3, (toY + 2 * y1) / 3, toX, toY)
|
|
133
194
|
},
|
|
134
195
|
|
|
135
196
|
toTwoPointBoundsByQuadraticCurve(fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number, pointBounds: ITwoPointBoundsData, addMode?: boolean): void {
|
package/src/EllipseHelper.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { IPathCommandData } from '@leafer/interface'
|
|
2
2
|
import { OneRadian, PI2 } from '@leafer/math'
|
|
3
|
+
import { Platform } from '@leafer/platform'
|
|
3
4
|
|
|
4
5
|
import { PathCommandMap } from './PathCommandMap'
|
|
5
6
|
import { BezierHelper } from './BezierHelper'
|
|
6
7
|
|
|
8
|
+
|
|
7
9
|
const { sin, cos, sqrt, atan2 } = Math
|
|
8
10
|
const { ellipse } = BezierHelper
|
|
9
11
|
|
|
@@ -56,7 +58,7 @@ export const EllipseHelper = {
|
|
|
56
58
|
|
|
57
59
|
const anticlockwise = totalRadian < 0 ? 1 : 0
|
|
58
60
|
|
|
59
|
-
if (curveMode) {
|
|
61
|
+
if (curveMode || Platform.ellipseToCurve) {
|
|
60
62
|
ellipse(data, centerX, centerY, radiusX, radiusY, rotation, startRadian / OneRadian, endRadian / OneRadian, anticlockwise as unknown as boolean)
|
|
61
63
|
} else {
|
|
62
64
|
if (radiusX === radiusY && !rotation) {
|
package/src/PathBounds.ts
CHANGED
|
@@ -8,7 +8,7 @@ import { PathCommandMap as Command } from './PathCommandMap'
|
|
|
8
8
|
|
|
9
9
|
const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = Command
|
|
10
10
|
const { toTwoPointBounds, toTwoPointBoundsByQuadraticCurve, arcTo, arc, ellipse } = BezierHelper
|
|
11
|
-
const {
|
|
11
|
+
const { addPointBounds, copy, addPoint, setPoint, addBounds, toBounds } = TwoPointBoundsHelper
|
|
12
12
|
const debug = Debug.get('PathBounds')
|
|
13
13
|
|
|
14
14
|
let radius: number, radiusX: number, radiusY: number
|
|
@@ -54,7 +54,7 @@ export const PathBounds = {
|
|
|
54
54
|
toX = data[i + 5]
|
|
55
55
|
toY = data[i + 6]
|
|
56
56
|
toTwoPointBounds(x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], toX, toY, tempPointBounds)
|
|
57
|
-
|
|
57
|
+
addPointBounds(setPointBounds, tempPointBounds)
|
|
58
58
|
x = toX
|
|
59
59
|
y = toY
|
|
60
60
|
i += 7
|
|
@@ -65,7 +65,7 @@ export const PathBounds = {
|
|
|
65
65
|
toX = data[i + 3]
|
|
66
66
|
toY = data[i + 4]
|
|
67
67
|
toTwoPointBoundsByQuadraticCurve(x, y, x1, y1, toX, toY, tempPointBounds)
|
|
68
|
-
|
|
68
|
+
addPointBounds(setPointBounds, tempPointBounds)
|
|
69
69
|
x = toX
|
|
70
70
|
y = toY
|
|
71
71
|
i += 5
|
|
@@ -91,7 +91,7 @@ export const PathBounds = {
|
|
|
91
91
|
break
|
|
92
92
|
case G: // ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
|
|
93
93
|
ellipse(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8] as unknown as boolean, tempPointBounds, setEndPoint)
|
|
94
|
-
i === 0 ? copy(setPointBounds, tempPointBounds) :
|
|
94
|
+
i === 0 ? copy(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds)
|
|
95
95
|
x = setEndPoint.x
|
|
96
96
|
y = setEndPoint.y
|
|
97
97
|
i += 9
|
|
@@ -107,7 +107,7 @@ export const PathBounds = {
|
|
|
107
107
|
break
|
|
108
108
|
case O: // arc(x, y, radius, startAngle, endAngle, anticlockwise)
|
|
109
109
|
arc(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6] as unknown as boolean, tempPointBounds, setEndPoint)
|
|
110
|
-
i === 0 ? copy(setPointBounds, tempPointBounds) :
|
|
110
|
+
i === 0 ? copy(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds)
|
|
111
111
|
x = setEndPoint.x
|
|
112
112
|
y = setEndPoint.y
|
|
113
113
|
i += 7
|
|
@@ -122,7 +122,7 @@ export const PathBounds = {
|
|
|
122
122
|
break
|
|
123
123
|
case U: // arcTo(x1, y1, x2, y2, radius)
|
|
124
124
|
arcTo(null, x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], tempPointBounds, setEndPoint)
|
|
125
|
-
i === 0 ? copy(setPointBounds, tempPointBounds) :
|
|
125
|
+
i === 0 ? copy(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds)
|
|
126
126
|
x = setEndPoint.x
|
|
127
127
|
y = setEndPoint.y
|
|
128
128
|
i += 6
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { IPathCommandData, IPointData } from '@leafer/interface'
|
|
2
|
+
import { MathHelper, PointHelper } from '@leafer/math'
|
|
3
|
+
|
|
2
4
|
import { PathCommandMap } from './PathCommandMap'
|
|
3
5
|
import { BezierHelper } from './BezierHelper'
|
|
4
|
-
import { MathHelper } from '@leafer/math'
|
|
5
6
|
|
|
6
7
|
|
|
7
8
|
const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = PathCommandMap
|
|
9
|
+
const { getMinDistanceFrom, getRadianFrom } = PointHelper
|
|
10
|
+
const { tan, min, abs } = Math
|
|
8
11
|
const startPoint = {} as IPointData
|
|
9
12
|
|
|
10
13
|
export const PathCommandDataHelper = {
|
|
@@ -73,7 +76,18 @@ export const PathCommandDataHelper = {
|
|
|
73
76
|
}
|
|
74
77
|
},
|
|
75
78
|
|
|
76
|
-
|
|
79
|
+
arcTo(data: IPathCommandData, x1: number, y1: number, x2: number, y2: number, radius: number, lastX?: number, lastY?: number): void {
|
|
80
|
+
if (lastX !== undefined) {
|
|
81
|
+
const maxRadius = tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2) * (getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2) / 2)
|
|
82
|
+
data.push(U, x1, y1, x2, y2, min(radius, abs(maxRadius)))
|
|
83
|
+
} else {
|
|
84
|
+
data.push(U, x1, y1, x2, y2, radius)
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
|
|
88
|
+
// new
|
|
89
|
+
|
|
90
|
+
drawEllipse(data: IPathCommandData, x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void {
|
|
77
91
|
if (rotation === undefined) rotation = 0
|
|
78
92
|
if (startAngle === undefined) startAngle = 0
|
|
79
93
|
if (endAngle === undefined) endAngle = 360
|
|
@@ -82,7 +96,7 @@ export const PathCommandDataHelper = {
|
|
|
82
96
|
ellipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
|
|
83
97
|
},
|
|
84
98
|
|
|
85
|
-
|
|
99
|
+
drawArc(data: IPathCommandData, x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void {
|
|
86
100
|
if (startAngle === undefined) startAngle = 0
|
|
87
101
|
if (endAngle === undefined) endAngle = 360
|
|
88
102
|
BezierHelper.arc(null, x, y, radius, startAngle, endAngle, anticlockwise, null, null, startPoint)
|
|
@@ -90,9 +104,10 @@ export const PathCommandDataHelper = {
|
|
|
90
104
|
arc(data, x, y, radius, startAngle, endAngle, anticlockwise)
|
|
91
105
|
},
|
|
92
106
|
|
|
93
|
-
|
|
94
|
-
|
|
107
|
+
drawPoints(data: IPathCommandData, points: number[], curve?: boolean | number, close?: boolean): void {
|
|
108
|
+
BezierHelper.points(data, points, curve, close)
|
|
95
109
|
}
|
|
110
|
+
|
|
96
111
|
}
|
|
97
112
|
|
|
98
113
|
const { ellipse, arc } = PathCommandDataHelper
|
package/src/PathConvert.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IPathCommandData, IPointData } from '@leafer/interface'
|
|
2
|
-
import { StringNumberMap } from '@leafer/math'
|
|
2
|
+
import { MathHelper, StringNumberMap } from '@leafer/math'
|
|
3
3
|
import { Debug } from '@leafer/debug'
|
|
4
4
|
|
|
5
5
|
import { PathCommandMap as Command, NeedConvertToCanvasCommandMap, NeedConvertToCurveCommandMap, PathCommandLengthMap, PathNumberCommandMap, PathNumberCommandLengthMap } from './PathCommandMap'
|
|
@@ -26,7 +26,7 @@ export const PathConvert = {
|
|
|
26
26
|
|
|
27
27
|
current: { dot: 0 } as ICurrentCommand,
|
|
28
28
|
|
|
29
|
-
stringify(data: IPathCommandData): string {
|
|
29
|
+
stringify(data: IPathCommandData, floatLength?: number): string {
|
|
30
30
|
let i = 0, len = data.length, count: number, str: string = '', command: number, lastCommand: number
|
|
31
31
|
while (i < len) {
|
|
32
32
|
command = data[i]
|
|
@@ -38,7 +38,7 @@ export const PathConvert = {
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
for (let j = 1; j < count; j++) {
|
|
41
|
-
str += data[i + j];
|
|
41
|
+
str += MathHelper.float(data[i + j], floatLength);
|
|
42
42
|
(j === count - 1) || (str += ' ')
|
|
43
43
|
}
|
|
44
44
|
|
package/src/PathCorner.ts
CHANGED
|
@@ -1,10 +1,74 @@
|
|
|
1
1
|
import { IPathCommandData } from '@leafer/interface'
|
|
2
|
+
import { PointHelper } from '@leafer/math'
|
|
2
3
|
|
|
4
|
+
import { PathCommandMap as Command } from './PathCommandMap'
|
|
5
|
+
import { PathCommandDataHelper } from './PathCommandDataHelper'
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
const { M, L, C, Z } = Command
|
|
9
|
+
const { getCenterX, getCenterY } = PointHelper
|
|
10
|
+
const { arcTo } = PathCommandDataHelper
|
|
3
11
|
|
|
4
12
|
export const PathCorner = {
|
|
5
13
|
|
|
6
|
-
smooth(data: IPathCommandData,
|
|
7
|
-
|
|
14
|
+
smooth(data: IPathCommandData, cornerRadius: number, _cornerSmoothing?: number): IPathCommandData {
|
|
15
|
+
let command: number
|
|
16
|
+
let i = 0, x = 0, y = 0, startX = 0, startY = 0, secondX = 0, secondY = 0, lastX = 0, lastY = 0
|
|
17
|
+
|
|
18
|
+
const len = data.length
|
|
19
|
+
const smooth: IPathCommandData = []
|
|
20
|
+
|
|
21
|
+
while (i < len) {
|
|
22
|
+
command = data[i]
|
|
23
|
+
switch (command) {
|
|
24
|
+
case M: //moveto(x, y)
|
|
25
|
+
startX = lastX = data[i + 1]
|
|
26
|
+
startY = lastY = data[i + 2]
|
|
27
|
+
i += 3
|
|
28
|
+
if (data[i] === L) { // next lineTo
|
|
29
|
+
secondX = data[i + 1]
|
|
30
|
+
secondY = data[i + 2]
|
|
31
|
+
smooth.push(M, getCenterX(startX, secondX), getCenterY(startY, secondY))
|
|
32
|
+
} else {
|
|
33
|
+
smooth.push(M, startX, startY)
|
|
34
|
+
}
|
|
35
|
+
break
|
|
36
|
+
case L: //lineto(x, y)
|
|
37
|
+
x = data[i + 1]
|
|
38
|
+
y = data[i + 2]
|
|
39
|
+
i += 3
|
|
40
|
+
switch (data[i]) { // next command
|
|
41
|
+
case L: // lineTo()
|
|
42
|
+
arcTo(smooth, x, y, data[i + 1], data[i + 2], cornerRadius, lastX, lastY) // use arcTo(x1, y1, x2, y2, radius)
|
|
43
|
+
break
|
|
44
|
+
case Z: // closePath()
|
|
45
|
+
arcTo(smooth, x, y, startX, startY, cornerRadius, lastX, lastY) // use arcTo(x1, y1, x2, y2, radius)
|
|
46
|
+
break
|
|
47
|
+
default:
|
|
48
|
+
smooth.push(L, x, y)
|
|
49
|
+
}
|
|
50
|
+
lastX = x
|
|
51
|
+
lastY = y
|
|
52
|
+
break
|
|
53
|
+
case C: //bezierCurveTo(x1, y1, x2, y2, x, y)
|
|
54
|
+
smooth.push(C, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6])
|
|
55
|
+
i += 7
|
|
56
|
+
break
|
|
57
|
+
case Z: //closepath()
|
|
58
|
+
arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY) // use arcTo(x1, y1, x2, y2, radius)
|
|
59
|
+
smooth.push(Z)
|
|
60
|
+
i += 1
|
|
61
|
+
break
|
|
62
|
+
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
if (command !== Z) {
|
|
67
|
+
smooth[1] = startX
|
|
68
|
+
smooth[2] = startY
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return smooth
|
|
8
72
|
}
|
|
9
73
|
|
|
10
74
|
}
|
package/src/PathCreator.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { PathCommandDataHelper } from './PathCommandDataHelper'
|
|
|
3
3
|
import { PathHelper } from './PathHelper'
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
const { moveTo, lineTo, quadraticCurveTo, bezierCurveTo, closePath, beginPath, rect, roundRect, ellipse, arc, arcTo,
|
|
6
|
+
const { moveTo, lineTo, quadraticCurveTo, bezierCurveTo, closePath, beginPath, rect, roundRect, ellipse, arc, arcTo, drawEllipse, drawArc, drawPoints } = PathCommandDataHelper
|
|
7
7
|
|
|
8
8
|
export class PathCreator implements IPathDrawer {
|
|
9
9
|
|
|
@@ -78,13 +78,18 @@ export class PathCreator implements IPathDrawer {
|
|
|
78
78
|
|
|
79
79
|
// moveTo, then draw
|
|
80
80
|
|
|
81
|
-
public
|
|
82
|
-
|
|
81
|
+
public drawEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
|
|
82
|
+
drawEllipse(this.path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
|
|
83
83
|
return this
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
public
|
|
87
|
-
|
|
86
|
+
public drawArc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator {
|
|
87
|
+
drawArc(this.path, x, y, radius, startAngle, endAngle, anticlockwise)
|
|
88
|
+
return this
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
public drawPoints(points: number[], curve?: boolean | number, close?: boolean): PathCreator {
|
|
92
|
+
drawPoints(this.path, points, curve, close)
|
|
88
93
|
return this
|
|
89
94
|
}
|
|
90
95
|
|
package/src/RectHelper.ts
CHANGED
|
@@ -4,19 +4,16 @@ import { MathHelper } from '@leafer/math'
|
|
|
4
4
|
export const RectHelper = {
|
|
5
5
|
|
|
6
6
|
drawRoundRect(drawer: IPathDrawer, x: number, y: number, width: number, height: number, cornerRadius: number | number[]): void {
|
|
7
|
-
|
|
7
|
+
const data = MathHelper.fourNumber(cornerRadius, Math.min(width / 2, height / 2))
|
|
8
8
|
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
if (topRight > max) topRight = max
|
|
12
|
-
if (bottomRight > max) bottomRight = max
|
|
13
|
-
if (bottomLeft > max) bottomLeft = max
|
|
9
|
+
const right = x + width
|
|
10
|
+
const bottom = y + height
|
|
14
11
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
data[0] ? drawer.moveTo(x + data[0], y) : drawer.moveTo(x, y)
|
|
13
|
+
data[1] ? drawer.arcTo(right, y, right, bottom, data[1]) : drawer.lineTo(right, y)
|
|
14
|
+
data[2] ? drawer.arcTo(right, bottom, x, bottom, data[2]) : drawer.lineTo(right, bottom)
|
|
15
|
+
data[3] ? drawer.arcTo(x, bottom, x, y, data[3]) : drawer.lineTo(x, bottom)
|
|
16
|
+
data[0] ? drawer.arcTo(x, y, right, y, data[0]) : drawer.lineTo(x, y)
|
|
20
17
|
}
|
|
21
18
|
|
|
22
19
|
}
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { IPathCreator, IPathCommandData, IPathDrawer, IPathString, IBoundsData, ITwoPointBoundsData, IPointData, INumberMap, IStringMap } from '@leafer/interface';
|
|
2
|
+
|
|
3
|
+
declare const PathHelper: {
|
|
4
|
+
creator: IPathCreator;
|
|
5
|
+
parse(_pathString: string, _curveMode?: boolean): IPathCommandData;
|
|
6
|
+
convertToCanvasData(_old: IPathCommandData, _curveMode?: boolean): IPathCommandData;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
interface ICurrentCommand {
|
|
10
|
+
name?: number;
|
|
11
|
+
length?: number;
|
|
12
|
+
index?: number;
|
|
13
|
+
dot?: number;
|
|
14
|
+
}
|
|
15
|
+
declare const PathConvert: {
|
|
16
|
+
current: ICurrentCommand;
|
|
17
|
+
stringify(data: IPathCommandData, floatLength?: number): string;
|
|
18
|
+
parse(pathString: string, curveMode?: boolean): IPathCommandData;
|
|
19
|
+
toCanvasData(old: IPathCommandData, curveMode?: boolean): IPathCommandData;
|
|
20
|
+
copyData(data: IPathCommandData, old: IPathCommandData, index: number, count: number): void;
|
|
21
|
+
pushData(data: IPathCommandData, strNum: string | number): void;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
declare class PathCreator implements IPathDrawer {
|
|
25
|
+
path: IPathCommandData;
|
|
26
|
+
constructor(path?: IPathCommandData | IPathString);
|
|
27
|
+
beginPath(): PathCreator;
|
|
28
|
+
moveTo(x: number, y: number): PathCreator;
|
|
29
|
+
lineTo(x: number, y: number): PathCreator;
|
|
30
|
+
bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number): PathCreator;
|
|
31
|
+
quadraticCurveTo(x1: number, y1: number, x: number, y: number): PathCreator;
|
|
32
|
+
closePath(): PathCreator;
|
|
33
|
+
rect(x: number, y: number, width: number, height: number): PathCreator;
|
|
34
|
+
roundRect(x: number, y: number, width: number, height: number, cornerRadius: number | number[]): PathCreator;
|
|
35
|
+
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator;
|
|
36
|
+
arc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator;
|
|
37
|
+
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): PathCreator;
|
|
38
|
+
drawEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator;
|
|
39
|
+
drawArc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): PathCreator;
|
|
40
|
+
drawPoints(points: number[], curve?: boolean | number, close?: boolean): PathCreator;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
declare const PathCommandDataHelper: {
|
|
44
|
+
beginPath(data: IPathCommandData): void;
|
|
45
|
+
moveTo(data: IPathCommandData, x: number, y: number): void;
|
|
46
|
+
lineTo(data: IPathCommandData, x: number, y: number): void;
|
|
47
|
+
bezierCurveTo(data: IPathCommandData, x1: number, y1: number, x2: number, y2: number, x: number, y: number): void;
|
|
48
|
+
quadraticCurveTo(data: IPathCommandData, x1: number, y1: number, x: number, y: number): void;
|
|
49
|
+
closePath(data: IPathCommandData): void;
|
|
50
|
+
rect(data: IPathCommandData, x: number, y: number, width: number, height: number): void;
|
|
51
|
+
roundRect(data: IPathCommandData, x: number, y: number, width: number, height: number, cornerRadius: number | number[]): void;
|
|
52
|
+
ellipse(data: IPathCommandData, x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void;
|
|
53
|
+
arc(data: IPathCommandData, x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void;
|
|
54
|
+
arcTo(data: IPathCommandData, x1: number, y1: number, x2: number, y2: number, radius: number, lastX?: number, lastY?: number): void;
|
|
55
|
+
drawEllipse(data: IPathCommandData, x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void;
|
|
56
|
+
drawArc(data: IPathCommandData, x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): void;
|
|
57
|
+
drawPoints(data: IPathCommandData, points: number[], curve?: boolean | number, close?: boolean): void;
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
declare const PathDrawer: {
|
|
61
|
+
drawPathByData(drawer: IPathDrawer, data: IPathCommandData): void;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
declare const PathBounds: {
|
|
65
|
+
toBounds(data: IPathCommandData, setBounds: IBoundsData): void;
|
|
66
|
+
toTwoPointBounds(data: IPathCommandData, setPointBounds: ITwoPointBoundsData): void;
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
declare const PathCorner: {
|
|
70
|
+
smooth(data: IPathCommandData, cornerRadius: number, _cornerSmoothing?: number): IPathCommandData;
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
declare const BezierHelper: {
|
|
74
|
+
points(data: IPathCommandData, points: number[], curve?: boolean | number, close?: boolean): void;
|
|
75
|
+
rect(data: IPathCommandData, x: number, y: number, width: number, height: number): void;
|
|
76
|
+
roundRect(data: IPathCommandData, x: number, y: number, width: number, height: number, radius: number | number[]): void;
|
|
77
|
+
arcTo(data: IPathCommandData | null | void, fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number, radius: number, setPointBounds?: ITwoPointBoundsData, setEndPoint?: IPointData, setStartPoint?: IPointData): void;
|
|
78
|
+
arc(data: IPathCommandData | null | void, x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean, setPointBounds?: ITwoPointBoundsData, setEndPoint?: IPointData, setStartPoint?: IPointData): void;
|
|
79
|
+
ellipse(data: IPathCommandData | null | void, cx: number, cy: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean, setPointBounds?: ITwoPointBoundsData, setEndPoint?: IPointData, setStartPoint?: IPointData): void;
|
|
80
|
+
quadraticCurveTo(data: IPathCommandData, fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number): void;
|
|
81
|
+
toTwoPointBoundsByQuadraticCurve(fromX: number, fromY: number, x1: number, y1: number, toX: number, toY: number, pointBounds: ITwoPointBoundsData, addMode?: boolean): void;
|
|
82
|
+
toTwoPointBounds(fromX: number, fromY: number, x1: number, y1: number, x2: number, y2: number, toX: number, toY: number, pointBounds: ITwoPointBoundsData, addMode?: boolean): void;
|
|
83
|
+
getPointAndSet(t: number, fromX: number, fromY: number, x1: number, y1: number, x2: number, y2: number, toX: number, toY: number, setPoint: IPointData): void;
|
|
84
|
+
getPoint(t: number, fromX: number, fromY: number, x1: number, y1: number, x2: number, y2: number, toX: number, toY: number): IPointData;
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
declare const EllipseHelper: {
|
|
88
|
+
ellipticalArc(data: IPathCommandData, fromX: number, fromY: number, radiusX: number, radiusY: number, rotation: number, largeFlag: number, sweepFlag: number, toX: number, toY: number, curveMode?: boolean): void;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
declare const RectHelper: {
|
|
92
|
+
drawRoundRect(drawer: IPathDrawer, x: number, y: number, width: number, height: number, cornerRadius: number | number[]): void;
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
declare const PathCommandMap: INumberMap;
|
|
96
|
+
declare const NeedConvertToCanvasCommandMap: INumberMap;
|
|
97
|
+
declare const PathNumberCommandMap: IStringMap;
|
|
98
|
+
declare const PathNumberCommandLengthMap: INumberMap;
|
|
99
|
+
|
|
100
|
+
export { BezierHelper, EllipseHelper, NeedConvertToCanvasCommandMap, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, RectHelper };
|