-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo-programmatic-usage.html
119 lines (95 loc) · 3.65 KB
/
demo-programmatic-usage.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
#canvas-main{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: none;
width: 100%;
border: 1px solid black;
color: #66a3ff;
}
</style>
<script src="dist/portraycanvas.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2 class="mt-2">PortrayCanvas demo</h2>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-4">
<p>Open your console (<a href="http://google.com/#q=How+to+open+javascript+console" target="_blank">How?</a>) to read the canvas events.</p>
<p>Try pasting this code into your console:</p>
<pre style="background-color: #fafafa; padding: 5px;" class="mb-4"><code>
lines = [
[{x:0.072, y:0.253},{x:0.063, y:0.434}],
[{x:0.070, y:0.345},{x:0.156, y:0.343}],
[{x:0.162, y:0.268},{x:0.154, y:0.401}],
[{x:0.212, y:0.277},{x:0.218, y:0.416}],
[{x:0.210, y:0.274},{x:0.298, y:0.268}],
[{x:0.218, y:0.326},{x:0.309, y:0.328}],
[{x:0.222, y:0.410},{x:0.309, y:0.406}],
[{x:0.361, y:0.270},{x:0.369, y:0.395}],
[{x:0.369, y:0.397},{x:0.425, y:0.395}],
[{x:0.464, y:0.279},{x:0.462, y:0.401}],
[{x:0.462, y:0.401},{x:0.537, y:0.397}],
[{x:0.587, y:0.283},{x:0.608, y:0.429}],
[{x:0.589, y:0.281},{x:0.710, y:0.276}],
[{x:0.701, y:0.274},{x:0.722, y:0.416}],
[{x:0.613, y:0.423},{x:0.722, y:0.410}]]
lines.map(line => canvas.drawLine(line));
</code></pre>
</div>
<div class="mb-2 col-sm-6 col-md-4 col-lg-3 col-sm-offset-0 col-md-offset-2 col-lg-offset-5">
<canvas id="canvas-main" height="200"></canvas>
<div id="borrame1"></div><br>
<div id="borrame2"></div><br>
<div id="borrame3"></div><br>
</div>
</div>
<!-- Do some things programmatically -->
<div class="row mb-2">
<div class="col-md-7">
<div class="btn-group" role="group">
<button class="btn btn-secondary" onclick="canvas.clear()">Clear canvas</button>
<button class="btn btn-secondary" onclick="canvas.undo()">Undo line</button>
<button class="btn btn-secondary" onclick="console.log(canvas.getLines())">Console print all lines</button>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-md-5">
<div class="btn-group">
<button class="btn btn-secondary" onclick="canvas.setColor(document.getElementById('new-color').value);">Change color</button>
<button class="btn btn-secondary" onclick="canvas.revertDefaultColor()">Default color</button>
<input class="form-control" type="text" id="new-color" placeholder="#FFAA00">
</div>
</div>
</div>
</div>
<script>
// Parameterizable canvas
var canvas = new PortrayCanvas(document.getElementById("canvas-main"), {
lineWidth: 4,
period: 20,
onLineFinish: function(c){
console.log("A line was finished, here are all the lines:");
console.log(c.getLines());
},
onClear: function(){
console.log("The canvas was cleared");
},
onUndo: function(line){
console.log("This line was deleted:");
console.log(line);
}
});
</script>
</body>
</html>