toosoon-utils 4.1.4 → 4.1.5
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/README.md +177 -124
- package/lib/extras/curves/ArcCurve.d.ts +1 -1
- package/lib/extras/curves/ArcCurve.js +1 -1
- package/lib/extras/curves/CatmullRomCurve.d.ts +62 -0
- package/lib/extras/curves/CatmullRomCurve.js +75 -0
- package/lib/extras/curves/Curve.d.ts +1 -0
- package/lib/extras/curves/Curve.js +1 -0
- package/lib/extras/curves/EllipseCurve.d.ts +5 -5
- package/lib/extras/curves/EllipseCurve.js +6 -5
- package/lib/extras/curves/PolylineCurve.d.ts +1 -1
- package/lib/extras/curves/PolylineCurve.js +1 -1
- package/lib/extras/curves/SplineCurve.d.ts +1 -1
- package/lib/extras/curves/SplineCurve.js +1 -1
- package/lib/extras/curves/index.d.ts +1 -4
- package/lib/extras/curves/index.js +1 -4
- package/lib/extras/paths/Path.d.ts +65 -0
- package/lib/extras/paths/Path.js +137 -0
- package/lib/extras/paths/PathContext.d.ts +166 -0
- package/lib/extras/paths/PathContext.js +381 -0
- package/lib/extras/paths/PathSVG.d.ts +100 -0
- package/lib/extras/paths/PathSVG.js +182 -0
- package/lib/extras/paths/index.d.ts +3 -0
- package/lib/extras/paths/index.js +3 -0
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1326,6 +1326,7 @@ Utility classes for manipulating curves.
|
|
|
1326
1326
|
Utility abstract class for manipulating curves.
|
|
1327
1327
|
|
|
1328
1328
|
- [new Curve()](#curve)
|
|
1329
|
+
- .isCurve: `true`
|
|
1329
1330
|
- [.arcLengthDivisions](#curve-arc-length-divisions): `number`
|
|
1330
1331
|
- [.needsUpdate](#curve-needs-update): `boolean`
|
|
1331
1332
|
- [.getPoint(t)](#curve-get-point-method): `[number, number]`
|
|
@@ -1469,9 +1470,7 @@ static Curve.isClosed(points: Array<[number, number]>): boolean;
|
|
|
1469
1470
|
|
|
1470
1471
|
### LineCurve <a id="line-curve"></a>
|
|
1471
1472
|
|
|
1472
|
-
Utility class for manipulating lines.
|
|
1473
|
-
|
|
1474
|
-
[Extends Curve](#curve)
|
|
1473
|
+
Utility class extending [Curve](#curve) for manipulating lines.
|
|
1475
1474
|
|
|
1476
1475
|
- [new LineCurve(x1, y1, x2, y2)](#line-curve)
|
|
1477
1476
|
|
|
@@ -1484,9 +1483,7 @@ Utility class for manipulating lines.
|
|
|
1484
1483
|
|
|
1485
1484
|
### PolylineCurve <a id="polyline-curve"></a>
|
|
1486
1485
|
|
|
1487
|
-
Utility class for manipulating
|
|
1488
|
-
|
|
1489
|
-
[Extends Curve](#curve)
|
|
1486
|
+
Utility class extending [Curve](#curve) for manipulating polylines.
|
|
1490
1487
|
|
|
1491
1488
|
- [new PolylineCurve(points)](#polyline-curve)
|
|
1492
1489
|
|
|
@@ -1496,9 +1493,7 @@ Utility class for manipulating Polyline curves.
|
|
|
1496
1493
|
|
|
1497
1494
|
### QuadraticBezierCurve <a id="quadratic-bezier-curve"></a>
|
|
1498
1495
|
|
|
1499
|
-
Utility class for manipulating Quadratic Bézier curves.
|
|
1500
|
-
|
|
1501
|
-
[Extends Curve](#curve)
|
|
1496
|
+
Utility class extending [Curve](#curve) for manipulating Quadratic Bézier curves.
|
|
1502
1497
|
|
|
1503
1498
|
- [new QuadraticBezierCurve(x1, y1, cpx, cpy, x2, y2)](#quadratic-bezier-curve)
|
|
1504
1499
|
|
|
@@ -1513,9 +1508,7 @@ Utility class for manipulating Quadratic Bézier curves.
|
|
|
1513
1508
|
|
|
1514
1509
|
### CubicBezierCurve <a id="cubic-bezier-curve"></a>
|
|
1515
1510
|
|
|
1516
|
-
Utility class for manipulating Cubic Bézier curves.
|
|
1517
|
-
|
|
1518
|
-
[Extends Curve](#curve)
|
|
1511
|
+
Utility class extending [Curve](#curve) for manipulating Cubic Bézier curves.
|
|
1519
1512
|
|
|
1520
1513
|
- [new CubicBezierCurve(x1, y1, cp1x, cp1y, cp2x, cp2y x2, y2)](#cubic-bezier-curve)
|
|
1521
1514
|
|
|
@@ -1530,13 +1523,11 @@ Utility class for manipulating Cubic Bézier curves.
|
|
|
1530
1523
|
| x2 | `number` | | X-axis coordinate of the end point. |
|
|
1531
1524
|
| y2 | `number` | | Y-axis coordinate of the end point. |
|
|
1532
1525
|
|
|
1533
|
-
###
|
|
1534
|
-
|
|
1535
|
-
Utility class for manipulating Catmull-Rom curves.
|
|
1526
|
+
### CatmullRomCurve <a id="catmull-rom-curve"></a>
|
|
1536
1527
|
|
|
1537
|
-
[
|
|
1528
|
+
Utility class extending [Curve](#curve) for manipulating Catmull-Rom curves.
|
|
1538
1529
|
|
|
1539
|
-
- [new
|
|
1530
|
+
- [new CatmullRomCurve(x1, y1, cp1x, cp1y, cp2x, cp2y x2, y2)](#catmull-rom-bezier-curve)
|
|
1540
1531
|
|
|
1541
1532
|
| Parameter | Type | Default | Description |
|
|
1542
1533
|
| --------- | -------- | ------- | ---------------------------------------------- |
|
|
@@ -1551,9 +1542,7 @@ Utility class for manipulating Catmull-Rom curves.
|
|
|
1551
1542
|
|
|
1552
1543
|
### SplineCurve <a id="spline-curve"></a>
|
|
1553
1544
|
|
|
1554
|
-
Utility class for manipulating
|
|
1555
|
-
|
|
1556
|
-
[Extends Curve](#curve)
|
|
1545
|
+
Utility class extending [Curve](#curve) for manipulating splines.
|
|
1557
1546
|
|
|
1558
1547
|
- [new SplineCurve(points)](#spline-curve)
|
|
1559
1548
|
|
|
@@ -1563,9 +1552,7 @@ Utility class for manipulating Spline curves.
|
|
|
1563
1552
|
|
|
1564
1553
|
### EllipseCurve <a id="ellipse-curve"></a>
|
|
1565
1554
|
|
|
1566
|
-
Utility class for manipulating
|
|
1567
|
-
|
|
1568
|
-
[Extends Curve](#curve)
|
|
1555
|
+
Utility class extending [Curve](#curve) for manipulating ellipses.
|
|
1569
1556
|
|
|
1570
1557
|
- [new EllipseCurve(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise)](#ellipse-curve)
|
|
1571
1558
|
|
|
@@ -1582,9 +1569,7 @@ Utility class for manipulating Ellipse curves.
|
|
|
1582
1569
|
|
|
1583
1570
|
### ArcCurve <a id="arc-curve"></a>
|
|
1584
1571
|
|
|
1585
|
-
Utility class for manipulating
|
|
1586
|
-
|
|
1587
|
-
[Extends Curve](#curve)
|
|
1572
|
+
Utility class extending [Curve](#curve) for manipulating arcs.
|
|
1588
1573
|
|
|
1589
1574
|
- [new ArcCurve(cx, cy, radius, startAngle, endAngle, counterclockwise)](#arc-curve)
|
|
1590
1575
|
|
|
@@ -1597,109 +1582,97 @@ Utility class for manipulating Arc curves.
|
|
|
1597
1582
|
| [endAngle] | `number` | | Rotation angle of the arc (in radians). |
|
|
1598
1583
|
| [counterclockwise] | `boolean` | | Flag indicating the direction of the arc. |
|
|
1599
1584
|
|
|
1600
|
-
###
|
|
1601
|
-
|
|
1602
|
-
Utility class for manipulating connected curves.
|
|
1585
|
+
### Path <a id="path"></a>
|
|
1603
1586
|
|
|
1604
|
-
[
|
|
1587
|
+
Utility class extending [Curve](#curve) for manipulating connected curves.
|
|
1605
1588
|
|
|
1606
|
-
- [new
|
|
1607
|
-
-
|
|
1608
|
-
- [.
|
|
1609
|
-
- [.
|
|
1610
|
-
- [.
|
|
1611
|
-
- [.
|
|
1612
|
-
- [.
|
|
1589
|
+
- [new Path()](#path)
|
|
1590
|
+
- .isPath: `true`
|
|
1591
|
+
- [.curves](#path-curves): `Curve[]`
|
|
1592
|
+
- [.points](#path-points): `Array<[number, number]>`
|
|
1593
|
+
- [.autoClose](#path-auto-close): `boolean`
|
|
1594
|
+
- [.add()](#path-add-method): `void`
|
|
1595
|
+
- [.getCurveLengths()](#path-get-curve-lengths-method): `number[]`
|
|
1613
1596
|
|
|
1614
1597
|
#### Properties
|
|
1615
1598
|
|
|
1616
|
-
##### curves <a id="path-
|
|
1599
|
+
##### curves <a id="path-curves"></a>
|
|
1617
1600
|
|
|
1618
1601
|
Array of curves composing the path.
|
|
1619
1602
|
|
|
1620
1603
|
```ts
|
|
1621
|
-
|
|
1604
|
+
Path.curves: Curve[];
|
|
1622
1605
|
```
|
|
1623
1606
|
|
|
1624
|
-
##### points <a id="path-
|
|
1607
|
+
##### points <a id="path-points"></a>
|
|
1625
1608
|
|
|
1626
1609
|
Array of points composing the path.
|
|
1627
1610
|
|
|
1628
1611
|
```ts
|
|
1629
|
-
|
|
1612
|
+
Path.points: Array<[number, number]>;
|
|
1630
1613
|
```
|
|
1631
1614
|
|
|
1632
|
-
##### autoClose <a id="path-
|
|
1615
|
+
##### autoClose <a id="path-auto-close"></a>
|
|
1633
1616
|
|
|
1634
1617
|
```ts
|
|
1635
|
-
|
|
1618
|
+
Path.autoClose: boolean;
|
|
1636
1619
|
```
|
|
1637
1620
|
|
|
1638
1621
|
#### Methods
|
|
1639
1622
|
|
|
1640
|
-
##### add <a id="path-
|
|
1623
|
+
##### add <a id="path-add-method"></a>
|
|
1641
1624
|
|
|
1642
1625
|
Add a curve to this curve path.
|
|
1643
1626
|
|
|
1644
1627
|
- `curve`: Curve to add.
|
|
1645
1628
|
|
|
1646
1629
|
```ts
|
|
1647
|
-
|
|
1630
|
+
Path.add(curve: Curve): void;
|
|
1648
1631
|
```
|
|
1649
1632
|
|
|
1650
|
-
##### getCurveLengths <a id="path-
|
|
1633
|
+
##### getCurveLengths <a id="path-get-curve-lengths-method"></a>
|
|
1651
1634
|
|
|
1652
1635
|
Compute the cumulative curve lengths of the curve path.
|
|
1653
1636
|
|
|
1654
1637
|
```ts
|
|
1655
|
-
|
|
1638
|
+
Path.getCurveLengths(): number[];
|
|
1656
1639
|
```
|
|
1657
1640
|
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
Add a line curve to close the curve path.
|
|
1661
|
-
|
|
1662
|
-
```ts
|
|
1663
|
-
PathCurve.closePath(): void;
|
|
1664
|
-
```
|
|
1665
|
-
|
|
1666
|
-
### Path <a id="path"></a>
|
|
1667
|
-
|
|
1668
|
-
Utility class for manipulating paths.
|
|
1669
|
-
It works by serializing 2D Canvas API to SVG path data.
|
|
1641
|
+
### PathContext <a id="path-context"></a>
|
|
1670
1642
|
|
|
1671
|
-
[
|
|
1643
|
+
Utility class extending [Path](#path) providing methods similar to the 2D Canvas API.
|
|
1672
1644
|
|
|
1673
|
-
- [new
|
|
1674
|
-
- [.currentPosition](#path-current-position): `[number, number]`
|
|
1675
|
-
- [.setFromPoints(points)](#path-set-from-points-method): `this`
|
|
1676
|
-
- [.
|
|
1677
|
-
- [.
|
|
1678
|
-
- [.
|
|
1679
|
-
- [.
|
|
1680
|
-
- [.
|
|
1681
|
-
- [.
|
|
1682
|
-
- [.
|
|
1683
|
-
- [.
|
|
1684
|
-
- [.
|
|
1685
|
-
- [.
|
|
1686
|
-
- [.
|
|
1687
|
-
- [.
|
|
1688
|
-
- [.
|
|
1645
|
+
- [new PathContext()](#path-context)
|
|
1646
|
+
- [.currentPosition](#path-context-current-position): `[number, number]`
|
|
1647
|
+
- [.setFromPoints(points)](#path-context-set-from-points-method): `this`
|
|
1648
|
+
- [.beginPath()](#path-context-begin-path-method): `this`
|
|
1649
|
+
- [.closePath()](#path-context-close-path-method): `this`
|
|
1650
|
+
- [.moveTo(x, y)](#path-context-move-to-method): `this`
|
|
1651
|
+
- [.lineTo(x, y)](#path-context-line-to-method): `this`
|
|
1652
|
+
- [.polylineTo(points)](#path-context-polyline-to-method): `this`
|
|
1653
|
+
- [.arcTo(x1, y1, x2, y2, radius)](#path-context-arc-to-method): `this`
|
|
1654
|
+
- [.quadraticCurveTo(cpx, cpy, x2, y2)](#path-context-quadratic-curve-to-method): `this`
|
|
1655
|
+
- [.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2)](#path-context-bezier-curve-to-method): `this`
|
|
1656
|
+
- [.catmullRomCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2)](#path-context-catmull-rom-to-method): `this`
|
|
1657
|
+
- [.splineTo(points)](#path-context-spline-to-method): `this`
|
|
1658
|
+
- [.ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise)](#path-context-ellipse-method): `this`
|
|
1659
|
+
- [.arc(cx, cy, radius, startAngle, endAngle, counterclockwise)](#path-context-arc-method): `this`
|
|
1660
|
+
- [.rect(x, y, width, height)](#path-context-rect-method): `this`
|
|
1661
|
+
- [.roundRect(x, y, width, height, radius)](#path-context-round-rect-method): `this`
|
|
1689
1662
|
|
|
1690
1663
|
#### Properties
|
|
1691
1664
|
|
|
1692
|
-
##### currentPosition <a id="path-current-position"></a>
|
|
1665
|
+
##### currentPosition <a id="path-context-current-position"></a>
|
|
1693
1666
|
|
|
1694
1667
|
Path current offset position.
|
|
1695
1668
|
|
|
1696
1669
|
```ts
|
|
1697
|
-
|
|
1670
|
+
PathContext.currentPosition: [number, number];
|
|
1698
1671
|
```
|
|
1699
1672
|
|
|
1700
1673
|
#### Methods
|
|
1701
1674
|
|
|
1702
|
-
##### setFromPoints(points) <a id="path-set-from-points-method"></a>
|
|
1675
|
+
##### setFromPoints(points) <a id="path-context-set-from-points-method"></a>
|
|
1703
1676
|
|
|
1704
1677
|
Create a path from the given list of points.
|
|
1705
1678
|
|
|
@@ -1707,10 +1680,28 @@ Create a path from the given list of points.
|
|
|
1707
1680
|
- `[type]`: Type of curve used for creating the path.
|
|
1708
1681
|
|
|
1709
1682
|
```ts
|
|
1710
|
-
|
|
1683
|
+
PathContext.setFromPoints(points: Array<[number, number]>, type?: 'lines' | 'polyline' | 'spline'): this;
|
|
1684
|
+
```
|
|
1685
|
+
|
|
1686
|
+
##### beginPath() <a id="path-context-begin-path-method"></a>
|
|
1687
|
+
|
|
1688
|
+
Begin the path.
|
|
1689
|
+
Reset `currentPosition`.
|
|
1690
|
+
|
|
1691
|
+
```ts
|
|
1692
|
+
PathContext.beginPath(): this;
|
|
1711
1693
|
```
|
|
1712
1694
|
|
|
1713
|
-
#####
|
|
1695
|
+
##### closePath <a id="path-context-close-path-method"></a>
|
|
1696
|
+
|
|
1697
|
+
Draw a line from the ending position to the beginning position of the path.
|
|
1698
|
+
Add an instance of [LineCurve](#line-curve) to the path.
|
|
1699
|
+
|
|
1700
|
+
```ts
|
|
1701
|
+
PathContext.closePath(): this;
|
|
1702
|
+
```
|
|
1703
|
+
|
|
1704
|
+
##### moveTo(x, y) <a id="path-context-move-to-method"></a>
|
|
1714
1705
|
|
|
1715
1706
|
Move `currentPosition` to the coordinates specified by `x` and `y`.
|
|
1716
1707
|
|
|
@@ -1718,10 +1709,10 @@ Move `currentPosition` to the coordinates specified by `x` and `y`.
|
|
|
1718
1709
|
- `y`: Y-axis coordinate of the point.
|
|
1719
1710
|
|
|
1720
1711
|
```ts
|
|
1721
|
-
|
|
1712
|
+
PathContext.moveTo(x: number, y: number): this;
|
|
1722
1713
|
```
|
|
1723
1714
|
|
|
1724
|
-
##### lineTo(x, y) <a id="path-line-to-method"></a>
|
|
1715
|
+
##### lineTo(x, y) <a id="path-context-line-to-method"></a>
|
|
1725
1716
|
|
|
1726
1717
|
Draw a line from the current position to the position specified by `x` and `y`.
|
|
1727
1718
|
Add an instance of [LineCurve](#line-curve) to the path.
|
|
@@ -1730,10 +1721,10 @@ Add an instance of [LineCurve](#line-curve) to the path.
|
|
|
1730
1721
|
- `y`: Y-axis coordinate of the point.
|
|
1731
1722
|
|
|
1732
1723
|
```ts
|
|
1733
|
-
|
|
1724
|
+
PathContext.lineTo(x: number, y: number): this;
|
|
1734
1725
|
```
|
|
1735
1726
|
|
|
1736
|
-
##### polylineTo(points) <a id="path-polyline-to-method"></a>
|
|
1727
|
+
##### polylineTo(points) <a id="path-context-polyline-to-method"></a>
|
|
1737
1728
|
|
|
1738
1729
|
Draw a Polyline curve from the current position through the given points.
|
|
1739
1730
|
Add an instance of [PolylineCurve](#polyline-curve) to the path.
|
|
@@ -1741,10 +1732,10 @@ Add an instance of [PolylineCurve](#polyline-curve) to the path.
|
|
|
1741
1732
|
- `points`: Array of points defining the curve.
|
|
1742
1733
|
|
|
1743
1734
|
```ts
|
|
1744
|
-
|
|
1735
|
+
PathContext.polylineTo(points: Array<[number, number]>): this;
|
|
1745
1736
|
```
|
|
1746
1737
|
|
|
1747
|
-
##### arcTo(x1, y1, x2, y2, radius) <a id="path-arc-to-method"></a>
|
|
1738
|
+
##### arcTo(x1, y1, x2, y2, radius) <a id="path-context-arc-to-method"></a>
|
|
1748
1739
|
|
|
1749
1740
|
Draw an Arc curve from the current position, tangential to the 2 segments created by both control points
|
|
1750
1741
|
Add an instance of [ArcCurve](#arc-curve) to the path.
|
|
@@ -1756,10 +1747,10 @@ Add an instance of [ArcCurve](#arc-curve) to the path.
|
|
|
1756
1747
|
- `radius`: Arc radius (Must be non-negative).
|
|
1757
1748
|
|
|
1758
1749
|
```ts
|
|
1759
|
-
|
|
1750
|
+
PathContext.arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
|
|
1760
1751
|
```
|
|
1761
1752
|
|
|
1762
|
-
##### quadraticCurveTo(cpx, cpy, x2, y2) <a id="path-quadratic-curve-to-method"></a>
|
|
1753
|
+
##### quadraticCurveTo(cpx, cpy, x2, y2) <a id="path-context-quadratic-curve-to-method"></a>
|
|
1763
1754
|
|
|
1764
1755
|
Draw a Quadratic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by `cpx` and `cpy`.
|
|
1765
1756
|
Add an instance of [QuadraticBezierCurve](#quadratic-bezier-curve) to the path.
|
|
@@ -1770,10 +1761,10 @@ Add an instance of [QuadraticBezierCurve](#quadratic-bezier-curve) to the path.
|
|
|
1770
1761
|
- `y2`: Y-axis coordinate of the end point.
|
|
1771
1762
|
|
|
1772
1763
|
```ts
|
|
1773
|
-
|
|
1764
|
+
PathContext.quadraticCurveTo(cpx: number, cpy: number, x2: number, y2: number): this;
|
|
1774
1765
|
```
|
|
1775
1766
|
|
|
1776
|
-
##### bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) <a id="path-bezier-curve-to-method"></a>
|
|
1767
|
+
##### bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) <a id="path-context-bezier-curve-to-method"></a>
|
|
1777
1768
|
|
|
1778
1769
|
Draw a Cubic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`).
|
|
1779
1770
|
Add an instance of [CubicBezierCurve](#cubic-bezier-curve) to the path.
|
|
@@ -1786,13 +1777,13 @@ Add an instance of [CubicBezierCurve](#cubic-bezier-curve) to the path.
|
|
|
1786
1777
|
- `y2`: Y-axis coordinate of the end point.
|
|
1787
1778
|
|
|
1788
1779
|
```ts
|
|
1789
|
-
|
|
1780
|
+
PathContext.bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
|
|
1790
1781
|
```
|
|
1791
1782
|
|
|
1792
|
-
#####
|
|
1783
|
+
##### catmullRomCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) <a id="path-context-catmull-rom-curve-to-method"></a>
|
|
1793
1784
|
|
|
1794
|
-
Draw a
|
|
1795
|
-
Add an instance of [CatmullRomCurve](#
|
|
1785
|
+
Draw a Catmull-Rom curve from the current position to the end point specified by `x` and `y`, using the control points specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`).
|
|
1786
|
+
Add an instance of [CatmullRomCurve](#catmull-rom-curve) to the path.
|
|
1796
1787
|
|
|
1797
1788
|
- `cp1x`: X-axis coordinate of the first control point.
|
|
1798
1789
|
- `cp1y`: Y-axis coordinate of the first control point.
|
|
@@ -1802,10 +1793,10 @@ Add an instance of [CatmullRomCurve](#catmul-rom-curve) to the path.
|
|
|
1802
1793
|
- `y2`: Y-axis coordinate of the end point.
|
|
1803
1794
|
|
|
1804
1795
|
```ts
|
|
1805
|
-
|
|
1796
|
+
PathContext.catmullRomCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
|
|
1806
1797
|
```
|
|
1807
1798
|
|
|
1808
|
-
##### splineTo(points) <a id="path-spline-to-method"></a>
|
|
1799
|
+
##### splineTo(points) <a id="path-context-spline-to-method"></a>
|
|
1809
1800
|
|
|
1810
1801
|
Draw a Spline curve from the current position through the given points.
|
|
1811
1802
|
Add an instance of [SplineCurve](#spline-curve) to the path.
|
|
@@ -1813,10 +1804,10 @@ Add an instance of [SplineCurve](#spline-curve) to the path.
|
|
|
1813
1804
|
- `points`: Array of points defining the curve.
|
|
1814
1805
|
|
|
1815
1806
|
```ts
|
|
1816
|
-
|
|
1807
|
+
PathContext.splineTo(points: Array<[number, number]>): this;
|
|
1817
1808
|
```
|
|
1818
1809
|
|
|
1819
|
-
##### ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise) <a id="path-ellipse-method"></a>
|
|
1810
|
+
##### ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise) <a id="path-context-ellipse-method"></a>
|
|
1820
1811
|
|
|
1821
1812
|
Draw an Ellispe curve which is centered at (`cx`, `cy`) position.
|
|
1822
1813
|
Add an instance of [EllipseCurve](#ellipse-curve) to the path.
|
|
@@ -1831,10 +1822,10 @@ Add an instance of [EllipseCurve](#ellipse-curve) to the path.
|
|
|
1831
1822
|
- `[counterclockwise]`: Flag indicating the direction of the arc.
|
|
1832
1823
|
|
|
1833
1824
|
```ts
|
|
1834
|
-
|
|
1825
|
+
PathContext.ellipse(cx: number, cy: number, rx: number, ry: number, rotation?: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
|
|
1835
1826
|
```
|
|
1836
1827
|
|
|
1837
|
-
##### arc(cx, cy, radius, startAngle, endAngle, counterclockwise) <a id="path-arc-method"></a>
|
|
1828
|
+
##### arc(cx, cy, radius, startAngle, endAngle, counterclockwise) <a id="path-context-arc-method"></a>
|
|
1838
1829
|
|
|
1839
1830
|
Draw an Arc curve which is centered at (`cx`, `cy`) position.
|
|
1840
1831
|
Add an instance of [ArcCurve](#arc-curve) to the path.
|
|
@@ -1847,10 +1838,10 @@ Add an instance of [ArcCurve](#arc-curve) to the path.
|
|
|
1847
1838
|
- `[counterclockwise]`: Flag indicating the direction of the arc.
|
|
1848
1839
|
|
|
1849
1840
|
```ts
|
|
1850
|
-
|
|
1841
|
+
PathContext.arc(cx: number, cy: number, radius: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
|
|
1851
1842
|
```
|
|
1852
1843
|
|
|
1853
|
-
##### rect(x, y, width, height) <a id="path-rect-method"></a>
|
|
1844
|
+
##### rect(x, y, width, height) <a id="path-context-rect-method"></a>
|
|
1854
1845
|
|
|
1855
1846
|
Draw a rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`.
|
|
1856
1847
|
Add an instance of [PolylineCurve](#polyline-curve) to the path.
|
|
@@ -1861,10 +1852,10 @@ Add an instance of [PolylineCurve](#polyline-curve) to the path.
|
|
|
1861
1852
|
- `height`: Rectangle height (Positive values are down, and negative are up).
|
|
1862
1853
|
|
|
1863
1854
|
```ts
|
|
1864
|
-
|
|
1855
|
+
PathContext.rect(x: number, y: number, width: number, height: number): this;
|
|
1865
1856
|
```
|
|
1866
1857
|
|
|
1867
|
-
##### roundRect(x, y, width, height, radius) <a id="path-round-rect-method"></a>
|
|
1858
|
+
##### roundRect(x, y, width, height, radius) <a id="path-context-round-rect-method"></a>
|
|
1868
1859
|
|
|
1869
1860
|
Draw a rounded rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`.
|
|
1870
1861
|
|
|
@@ -1875,47 +1866,109 @@ Draw a rounded rectangular path from the start position specified by `x` and `y`
|
|
|
1875
1866
|
- `radius`: Radius of the circular arc to be used for the corners of the rectangle.
|
|
1876
1867
|
|
|
1877
1868
|
```ts
|
|
1878
|
-
|
|
1869
|
+
PathContext.roundRect(x: number, y: number, width: number, height: number, radius: number | number[]): this;
|
|
1879
1870
|
```
|
|
1880
1871
|
|
|
1881
|
-
|
|
1872
|
+
### PathSVG <a id="path-svg"></a>
|
|
1882
1873
|
|
|
1883
|
-
|
|
1884
|
-
|
|
1874
|
+
Utility class extending [PathContext](#path-context) for manipulating connected curves and generating SVG path.
|
|
1875
|
+
It works by serializing 2D Canvas API to SVG path data.
|
|
1876
|
+
|
|
1877
|
+
- [new PathSVG()](#path-svg-constructor)
|
|
1878
|
+
- `static` [.serialize(curve, params)](#path-svg-static-serialize-method): `string`
|
|
1879
|
+
- `static` [.serializeLineCurve(curve)](#path-svg-static-serialize-line-curve-method): `string`
|
|
1880
|
+
- `static` [.serializePolylineCurve(curve)](#path-svg-static-serialize-polyline-curve-method): `string`
|
|
1881
|
+
- `static` [.serializeQuadraticBezierCurve(curve)](#path-svg-static-serialize-quadratic-bezier-curve-method): `string`
|
|
1882
|
+
- `static` [.serializeCubicBezierCurve(curve)](#path-svg-static-serialize-cubic-bezier-curve-method): `string`
|
|
1883
|
+
- `static` [.serializeCatmullRomCurve(curve, params)](#path-svg-static-serialize-catmull-rom-curve-method): `string`
|
|
1884
|
+
- `static` [.serializeSplineCurve(curve, params)](#path-svg-static-serialize-spline-curve-method): `string`
|
|
1885
|
+
- `static` [.serializeEllipseCurve(curve)](#path-svg-static-serialize-ellipse-curve-method): `string`
|
|
1886
|
+
- `static` [.serializeArcCurve(curve)](#path-svg-static-serialize-arc-curve-method): `string`
|
|
1887
|
+
- [.toString(params)](#path-svg-to-string-method): `string`
|
|
1888
|
+
|
|
1889
|
+
#### Methods
|
|
1890
|
+
|
|
1891
|
+
##### serialize(curve) <a id="path-svg-static-serialize-method"></a>
|
|
1892
|
+
|
|
1893
|
+
Serialize a [Curve](#curve)
|
|
1885
1894
|
|
|
1886
1895
|
```ts
|
|
1887
|
-
|
|
1896
|
+
static PathSVG.serialize(curve: Curve, params: object): string;
|
|
1888
1897
|
```
|
|
1889
1898
|
|
|
1890
|
-
|
|
1899
|
+
##### serializeLineCurve(curve) <a id="path-svg-static-serialize-line-curve-method"></a>
|
|
1891
1900
|
|
|
1892
|
-
|
|
1893
|
-
It works by serializing 2D Canvas API to SVG path data.
|
|
1901
|
+
Serialize a [LineCurve](#line-curve)
|
|
1894
1902
|
|
|
1895
|
-
|
|
1903
|
+
```ts
|
|
1904
|
+
static PathSVG.serializeLineCurve(curve: LineCurve): string;
|
|
1905
|
+
```
|
|
1896
1906
|
|
|
1897
|
-
|
|
1898
|
-
- [.curveResolution](#path-svg-curve-resolution): `number`
|
|
1899
|
-
- [.toString()](#path-svg-to-string-method): `string`
|
|
1907
|
+
##### serializePolylineCurve(curve) <a id="path-svg-static-serialize-polyline-method"></a>
|
|
1900
1908
|
|
|
1901
|
-
|
|
1909
|
+
Serialize a [PolylineCurve](#polyline-curve).
|
|
1902
1910
|
|
|
1903
|
-
|
|
1911
|
+
```ts
|
|
1912
|
+
static PathSVG.serializePolylineCurve(curve: PolylineCurve): string;
|
|
1913
|
+
```
|
|
1904
1914
|
|
|
1905
|
-
|
|
1915
|
+
##### serializeQuadraticBezierCurve(curve) <a id="path-svg-static-serialize-quadratic-bezier-method"></a>
|
|
1916
|
+
|
|
1917
|
+
Serialize a [QuadraticBezierCurve](#quadratic-bezier-curve).
|
|
1906
1918
|
|
|
1907
1919
|
```ts
|
|
1908
|
-
PathSVG.
|
|
1920
|
+
static PathSVG.serializeQuadraticBezierCurve(curve: QuadraticBezierCurve): string;
|
|
1909
1921
|
```
|
|
1910
1922
|
|
|
1911
|
-
|
|
1923
|
+
##### serializeCubicBezierCurve(curve) <a id="path-svg-static-serialize-cubic-bezier-method"></a>
|
|
1924
|
+
|
|
1925
|
+
Serialize a [CubicBezierCurve](#cubic-bezier-curve).
|
|
1912
1926
|
|
|
1913
|
-
|
|
1927
|
+
```ts
|
|
1928
|
+
static PathSVG.serializeCubicBezierCurve(curve: CubicBezierCurve): string;
|
|
1929
|
+
```
|
|
1930
|
+
|
|
1931
|
+
##### serializeCatmullRomCurve(curve) <a id="path-svg-static-serialize-catmull-rom-method"></a>
|
|
1932
|
+
|
|
1933
|
+
Serialize a [CatmullRomCurve](#catmull-rom-curve).
|
|
1934
|
+
|
|
1935
|
+
```ts
|
|
1936
|
+
static PathSVG.serializeCatmullRomCurve(curve: CatmullRomCurve, params: object): string;
|
|
1937
|
+
```
|
|
1938
|
+
|
|
1939
|
+
##### serializeSplineCurve(curve) <a id="path-svg-static-serialize-spline-method"></a>
|
|
1940
|
+
|
|
1941
|
+
Serialize a [SplineCurve](#spline-curve).
|
|
1942
|
+
|
|
1943
|
+
```ts
|
|
1944
|
+
static PathSVG.serializeSplineCurve(curve: SplineCurve, params: object): string;
|
|
1945
|
+
```
|
|
1946
|
+
|
|
1947
|
+
##### serializeEllipseCurve(curve) <a id="path-svg-static-serialize-ellipse-method"></a>
|
|
1948
|
+
|
|
1949
|
+
Serialize a [EllipseCurve](#ellipse-curve).
|
|
1950
|
+
|
|
1951
|
+
```ts
|
|
1952
|
+
static PathSVG.serializeEllipseCurve(curve: EllipseCurve): string;
|
|
1953
|
+
```
|
|
1954
|
+
|
|
1955
|
+
##### serializeArcCurve(curve) <a id="path-svg-static-serialize-arc-method"></a>
|
|
1956
|
+
|
|
1957
|
+
Serialize a [ArcCurve](#arc-curve).
|
|
1958
|
+
|
|
1959
|
+
```ts
|
|
1960
|
+
static PathSVG.serializeArcCurve(curve: ArcCurve): string;
|
|
1961
|
+
```
|
|
1962
|
+
|
|
1963
|
+
##### toString(params) <a id="path-svg-to-string-method"></a>
|
|
1914
1964
|
|
|
1915
1965
|
Return SVG path data string.
|
|
1916
1966
|
|
|
1967
|
+
- `[params]`
|
|
1968
|
+
- `[params.curveResolution=5]`: Resolution used for Catmull-Rom curves and Spline curves approximations.
|
|
1969
|
+
|
|
1917
1970
|
```ts
|
|
1918
|
-
PathSVG.toString(): string;
|
|
1971
|
+
PathSVG.toString(params: object): string;
|
|
1919
1972
|
```
|
|
1920
1973
|
|
|
1921
1974
|
### Color scale
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import type { Point } from '../../types';
|
|
2
|
+
import Curve from './Curve';
|
|
3
|
+
/**
|
|
4
|
+
* Utility class for manipulating Catmull-Rom curves
|
|
5
|
+
*
|
|
6
|
+
* @exports
|
|
7
|
+
* @class CatmullRomCurve
|
|
8
|
+
* @extends Curve
|
|
9
|
+
*/
|
|
10
|
+
export default class CatmullRomCurve extends Curve {
|
|
11
|
+
readonly type: string;
|
|
12
|
+
/**
|
|
13
|
+
* X-axis coordinate of the start point
|
|
14
|
+
*/
|
|
15
|
+
x1: number;
|
|
16
|
+
/**
|
|
17
|
+
* Y-axis coordinate of the start point
|
|
18
|
+
*/
|
|
19
|
+
y1: number;
|
|
20
|
+
/**
|
|
21
|
+
* X-axis coordinate of the first control point
|
|
22
|
+
*/
|
|
23
|
+
cp1x: number;
|
|
24
|
+
/**
|
|
25
|
+
* Y-axis coordinate of the first control point
|
|
26
|
+
*/
|
|
27
|
+
cp1y: number;
|
|
28
|
+
/**
|
|
29
|
+
* X-axis coordinate of the second control point
|
|
30
|
+
*/
|
|
31
|
+
cp2x: number;
|
|
32
|
+
/**
|
|
33
|
+
* Y-axis coordinate of the second control point
|
|
34
|
+
*/
|
|
35
|
+
cp2y: number;
|
|
36
|
+
/**
|
|
37
|
+
* X-axis coordinate of the end point
|
|
38
|
+
*/
|
|
39
|
+
x2: number;
|
|
40
|
+
/**
|
|
41
|
+
* Y-axis coordinate of the end point
|
|
42
|
+
*/
|
|
43
|
+
y2: number;
|
|
44
|
+
/**
|
|
45
|
+
* @param {number} x1 X-axis coordinate of the start point
|
|
46
|
+
* @param {number} y1 Y-axis coordinate of the start point
|
|
47
|
+
* @param {number} cp1x X-axis coordinate of the first control point
|
|
48
|
+
* @param {number} cp1y Y-axis coordinate of the first control point
|
|
49
|
+
* @param {number} cp2x X-axis coordinate of the second control point
|
|
50
|
+
* @param {number} cp2y Y-axis coordinate of the second control point
|
|
51
|
+
* @param {number} x2 X-axis coordinate of the end point
|
|
52
|
+
* @param {number} y2 Y-axis coordinate of the end point
|
|
53
|
+
*/
|
|
54
|
+
constructor(x1: number, y1: number, cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number);
|
|
55
|
+
/**
|
|
56
|
+
* Interpolate a point on the Catmull-Rom curve
|
|
57
|
+
*
|
|
58
|
+
* @param {number} t Normalized time value to interpolate
|
|
59
|
+
* @returns {Point} Interpolated coordinates on the curve
|
|
60
|
+
*/
|
|
61
|
+
getPoint(t: number): Point;
|
|
62
|
+
}
|