Quillot Mathias / triangle

Download as
Browse Code »

Commit 9db1a6bb0f8531596308156adb2e9d831bfd0bdf

Authored by Quillot Mathias
1 parent 0ad2a6f56d
Exists in master

First usable mockup GUI of triangle

Showing 1 changed file with 302 additions and 5 deletions Inline Diff

1 <html> 1 <html>
2 <head> 2 <head>
3 <meta charset="UTF-8"> 3 <meta charset="UTF-8">
4 <title>Mockup Triangle Interface</title> 4 <title>Konva's test</title>
5 <script src="https://unpkg.com/konva@3.3.2/konva.min.js"></script> 5 <script src="https://unpkg.com/konva@3.3.2/konva.min.js"></script>
6 </head> 6 </head>
7 <body> 7 <body>
8 <h1>Mockup Triangle Interface</h1> 8 <h1>Interface Mockup with Konda JS</h1>
9 <p> 9 <div id="container"></div>
10 First example of mockup. 10
11 </p> 11 <script type="text/javascript">
12
13 // -- FUNCTIONS --
14 /**
15 * Check if an intersection exists between AB and CD.
16 * Return :
17 * - false if it has no intersection
18 * - true otherwise
19 */
20 function isThereIntersection(A, B, C, D) {
21 a = A.x;b = A.y;c = B.x;d = B.y
22 p = C.x;q = C.y;r = D.x;s = D.y
23 var det, gamma, lambda;
24 det = (c - a) * (s - q) - (r - p) * (d - b);
25 if (det === 0) {
26 return false;
27 } else {
28 lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / det;
29 gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / det;
30 return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1)
31 }
32 };
33
34 /**
35 * Compute intersection between two lines
36 * Please, check if an intersection exists between
37 * calling this function. (ref isThereIntersection)
38 *
39 * Return:
40 * - Intersection point between two lines
41 */
42 function intersection(A, B, C, D) {
43 a = A.x;b = A.y;c = B.x;d = B.y
44 p = C.x;q = C.y;r = D.x;s = D.y
45
46 l1_a = (B.y - A.y) / (B.x - A.x);
47 l1_b = A.y - l1_a * A.x;
48 l2_a = (D.y - C.y) / (D.x - C.x);
49 l2_b = C.y - l2_a * C.x;
50
51 // Compute intersection point
52 x = (l2_b - l1_b) / (l1_a - l2_a)
53 y = l1_a * x + l1_b
54 return {
55 x: x,
56 y: y
57 }
58 }
59
60 /**
61 * Return the index of the closest point
62 *
63 */
64 function closestPoint(ref, points) {
65 var dist = 100000;
66 var closest_i = -1;
67 for(var i in points) {
68 cur = Math.sqrt(Math.pow(ref.x - points[i].x, 2) + Math.pow(ref.y - points[i].y, 2));
69 if(cur < dist) {
70 dist = cur;
71 closest_i = i;
72 }
73 }
74 return closest_i;
75 }
76 // -- DATA --
77 data = {
78 triangle: {
79 A: {
80 x:170,
81 y: 80
82 },
83 B: {
84 x: 365,
85 y: 125
86 },
87 C: {
88 x: 215,
89 y: 260
90 }
91 }
92 }
93
94 // -- Help functions --
95 function writeMessage(message) {
96 text.text(message);
97 layer.draw();
98 }
99
100 // -- STAGE & LAYER--
101 var stage = new Konva.Stage({
102 container: 'container', // id of container <div>
103 width: 500,
104 height: 500
105 });
106
107 var layer = new Konva.Layer();
108
109 // -- TEXT --
110 var text = new Konva.Text({
111 x: 10,
112 y: 10,
113 fontFamily: 'Calibri',
114 fontSize: 24,
115 text: 'Test',
116 fill: 'black'
117 });
118
119
120 // -- RECTANGLE --
121 // TODO: Ajouter un rectangle en fond qui serve à
122 // gérer l'événement de la souris.
123
124 var rect = new Konva.Rect({
125 x: 0,
126 y: 0,
127 width: stage.attrs.width,
128 height: stage.attrs.height,
129 stroke: 'black',
130 strokeWidth: 0
131 });
132
133
134 // -- TRIANGLE --
135 var triangle = new Konva.Shape({
136 stroke: 'black',
137 fill: '#00D2FF',
138 strokeWidth: 1,
139 sceneFunc: function(context) {
140 context.beginPath();
141 context.moveTo(data.triangle.A.x, data.triangle.A.y);
142 context.lineTo(data.triangle.B.x, data.triangle.B.y);
143 context.lineTo(data.triangle.C.x, data.triangle.C.y);
144 context.closePath();
145 context.fillStrokeShape(this);50
146 }
147 });
148
149 bar = {
150 x: (data.triangle.A.x + data.triangle.B.x + data.triangle.C.x) / 3,
151 y: (data.triangle.A.y + data.triangle.B.y + data.triangle.C.y) / 3
152 }
153
154
155 triangle.on("mousemove mousedown", function(event){
156 if(event.evt.buttons === 1) {
157 var mousePos = stage.getPointerPosition();
158 var x = mousePos.x;
159 var y = mousePos.y;
160 point.position({x: x, y: y});
161 layer.draw();
162 }
163 })
164
165 function eventOutTriangle(event) {
166 if(event.evt.buttons === 1) {
167 var mousePos = stage.getPointerPosition();
168 var pointout = {
169 x: mousePos.x,
170 y: mousePos.y
171 }
172 var lines_to_test = [
173 {
174 A: data.triangle.A,
175 B: data.triangle.B
176 },
177 {
178 A: data.triangle.B,
179 B: data.triangle.C
180 },
181 {
182 A: data.triangle.C,
183 B: data.triangle.A
184 }
185 ]
186
187 var intersections = []
188 for(var ind in lines_to_test) {
189 line = lines_to_test[ind];
190 var inter = isThereIntersection(
191 line.A, line.B,
192 bar, pointout
193 )
194 if(inter !== false) {
195 intersections.push(
196 intersection(
197 line.A, line.B,
198 bar, pointout
199 )
200 );
201 }
202 }
203 i = closestPoint(pointout, intersections);
204 point.position({
205 x: intersections[i].x,
206 y: intersections[i].y
207 });
208 layer.draw();
209 }
210 }
211
212 rect.on("mousemove", function(event) {
213 eventOutTriangle(event);
214 })
215
216 // -- POINT --
217 // create our shape
218 var point = new Konva.Circle({
219 x: bar.x,
220 y: bar.y,
221 radius: 5,
222 fill: 'red',
223 stroke: 'black',
224 strokeWidth: 1
225 });
226
227 point.listening(false);
228
229
230 // -- IMAGE REFS --
231 // 1rst ref
232 var ref1Obj = new Image();
233 ref1Obj.onload = function() {
234 var ref1 = new Konva.Image({
235 x: 50,
236 y: 50,
237 image: ref1Obj,
238 width: 100,
239 height: 100
240 });
241
242 ref1.on("mousemove", function(event) {
243 eventOutTriangle(event);
244 });
245
246 layer.add(ref1);
247 layer.draw();
248 }
249 ref1Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
250
251 // 2nd ref
252 var ref2Obj = new Image();
253 ref2Obj.onload = function() {
254 var ref2 = new Konva.Image({
255 x: 150,
256 y: 300,
257 image: ref1Obj,
258 width: 100,
259 height: 100
260 });
261
262 ref2.on("mousemove", function(event) {
263 eventOutTriangle(event);
264 });
265
266 layer.add(ref2);
267 layer.draw();
268 }
269 ref2Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
270
271
272 // 3rd ref
273 var ref3Obj = new Image();
274 ref3Obj.onload = function() {
275 var ref3 = new Konva.Image({
276 x: 390,
277 y: 50,
278 image: ref3Obj,
279 width: 100,
280 height: 100
281 });
282
283 ref3.on("mousemove", function(event) {
284 eventOutTriangle(event);
285 });
286
287 layer.add(ref3);
288 layer.draw();
289 }
290 ref3Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
291
292
293 // -- ADDING
294 // add the shape to the layer
295 layer.add(rect);
296 layer.add(triangle);
297 layer.add(point);
298 layer.add(text);
299
300
301 // add the layer to the stage
302 stage.add(layer);
303
304
305 // -- DRAWING
306 layer.draw();
307 </script>
308
12 </body> 309 </body>
13 </html> 310 </html>