-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
60 lines (55 loc) · 1.78 KB
/
index.html
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<div>
<label for="scale">Scale: <input id="scale" name="scale" type="number" step="0.01" value="1" onChange="warpToCurve()"></label>
<button onclick="warpToCurve()">Refresh</button>
</div>
<div>
<button onClick="toggleNormals()">Toggle normals</button>
<button onClick="toggleTexture()">Toggle texture</button>
</div>
<style>
input > img {
max-width: 100px;
max-height: 100px;
}
</style>
Texture:
<div id="svgContainer">
<span>
<label for="square">
<input id="square" value="square" type="radio" name="svg" checked><img src="./svgs/square.svg"/>
</label>
</span>
<span>
<label for="horizontal">
<input id="horizontal" value="horizontal" type="radio" name="svg"><img src="./svgs/horizontal.svg"/>
</label>
</span>
<span>
<label for="vertical">
<input id="vertical" value="vertical" type="radio" name="svg"><img src="./svgs/vertical.svg"/>
</label>
</span>
<span>
<label for="dna">
<input id="dna" value="dna" type="radio" name="svg"><img src="./svgs/dna.svg"/>
</label>
</span>
<span>
<label for="blob">
<input id="blob" value="blob" type="radio" name="svg"><img src="./svgs/blob.svg"/>
</label>
</span>
</div>
<hr/>
Canvas:
<canvas id="c" width="1000" height="600"></canvas>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/warp.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<script src="bezier.js"></script>
<script src="flatten.js"></script>
<script src="fabricBezier.js"></script>
<script src="index.js"></script>
<script src="normals.js"></script>
<script src="setup.js"></script>
<script src="patternBrush.js"></script>