-
Notifications
You must be signed in to change notification settings - Fork 3
/
Path.tsx
42 lines (40 loc) · 906 Bytes
/
Path.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { Component } from 'solid-js'
import { Canvas, Path } from 'src'
import { createLine } from 'src/d/d'
const App: Component = () => (
<Canvas
style={{ width: '100%', height: '100%' }}
alpha
draggable
transform={{
position: { x: 200, y: 0 },
}}
>
<Path
transform={{
position: { x: 100, y: 100 },
}}
d={createLine([
{ x: 100, y: 100 },
{ x: 200, y: 200 },
])
.toQuadratic([
{ point: { x: 300, y: 400 } },
{ point: { x: 500, y: 300 } },
])
.toCubic([
{
point: { x: 300, y: 400 },
control: { x: 50, y: -50 },
},
{
point: { x: 500, y: 300 },
control: { x: 0, y: -50 },
},
])
.to({ x: 0, y: 100 })
.toLine({ x: 250, y: 50 })}
/>
</Canvas>
)
export default App