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 Side-by-side Diff

1 1 <html>
2 2 <head>
3 3 <meta charset="UTF-8">
4   - <title>Mockup Triangle Interface</title>
  4 + <title>Konva's test</title>
5 5 <script src="https://unpkg.com/konva@3.3.2/konva.min.js"></script>
6 6 </head>
7 7 <body>
8   - <h1>Mockup Triangle Interface</h1>
9   - <p>
10   - First example of mockup.
11   - </p>
  8 + <h1>Interface Mockup with Konda JS</h1>
  9 + <div id="container"></div>
  10 +
  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 309 </body>
13 310 </html>