@rnacanvas/draw.svg 3.8.0 → 3.8.1
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 +47 -0
- package/dist/Path.d.ts +2 -0
- package/dist/Path.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,6 +17,53 @@ import { bringToFront, sendToBack } from '@rnacanvas/draw.svg';
|
|
|
17
17
|
import { InnerXML, OuterXML } from '@rnacanvas/draw.svg';
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
+
## `class Path`
|
|
21
|
+
|
|
22
|
+
Wraps an SVG path element.
|
|
23
|
+
|
|
24
|
+
### `readonly domNode`
|
|
25
|
+
|
|
26
|
+
The wrapped SVG path element.
|
|
27
|
+
|
|
28
|
+
```javascript
|
|
29
|
+
var domNode = document.createElement('http://www.w3.org/2000/svg', 'path');
|
|
30
|
+
|
|
31
|
+
var path = new Path(domNode);
|
|
32
|
+
|
|
33
|
+
path.domNode === domNode; // true
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### `closestPoint()`
|
|
37
|
+
|
|
38
|
+
Calculates and returns the closest point along the path to a given point
|
|
39
|
+
(as well as returns the length along the path that the closest point is).
|
|
40
|
+
|
|
41
|
+
```javascript
|
|
42
|
+
// make the path a horizontal line
|
|
43
|
+
path.domNode.setAttribute('d', 'M 0 0 H 10');
|
|
44
|
+
|
|
45
|
+
var p = path.closestPoint({ x: 5, y: 5 });
|
|
46
|
+
|
|
47
|
+
p; // { x: 5, y: 0, length: 5 }
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
A `precision` option can also be specified,
|
|
51
|
+
which roughly controls the margin for error in the closest point calculation.
|
|
52
|
+
|
|
53
|
+
(Lower precision improves the speed of calculation.)
|
|
54
|
+
|
|
55
|
+
```javascript
|
|
56
|
+
// make the path a horizontal line
|
|
57
|
+
path.domNode.setAttribute('d', 'M 0 0 H 100');
|
|
58
|
+
|
|
59
|
+
var p = path.closestPoint({ x: 33, y: 33 }, { precision: 20 });
|
|
60
|
+
|
|
61
|
+
// is within 20 of the true closest point
|
|
62
|
+
p; // { x: 40, y: 0, length: 40 }
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
This method will throw if a precision of 0 or a negative precision is specified.
|
|
66
|
+
|
|
20
67
|
## `setAttributes()`
|
|
21
68
|
|
|
22
69
|
Set multiple attributes of a target SVG element at once.
|
package/dist/Path.d.ts
CHANGED
|
@@ -7,6 +7,8 @@ export declare class Path {
|
|
|
7
7
|
*
|
|
8
8
|
* The precision option roughly corresponds to the margin for error in the closest point calculation.
|
|
9
9
|
*
|
|
10
|
+
* (Higher margin for error improves the speed of calculation.)
|
|
11
|
+
*
|
|
10
12
|
* This method will throw for non-positive precisions.
|
|
11
13
|
*/
|
|
12
14
|
closestPoint(p: Point, options?: {
|
package/dist/Path.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../src/Path.ts"],"names":[],"mappings":"AAEA,qBAAa,IAAI;IACH,QAAQ,CAAC,OAAO,EAAE,cAAc;gBAAvB,OAAO,EAAE,cAAc;IAE5C
|
|
1
|
+
{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../src/Path.ts"],"names":[],"mappings":"AAEA,qBAAa,IAAI;IACH,QAAQ,CAAC,OAAO,EAAE,cAAc;gBAAvB,OAAO,EAAE,cAAc;IAE5C;;;;;;;;;OASG;IACH,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;;;;;CAuBxD;AAED,KAAK,KAAK,GAAG;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC"}
|