continuation du commit precedent

5 years ago · f4c3ce4fc7
parent 8384278e4c
commit f4c3ce4fc7
2 changed files with 145 additions and 149 deletions
--- a/index.html
+++ b/index.html
@ -1,12 +1,10 @@
-
 <!DOCTYPE html>
 <html>
+
 <head>
  <link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
-    <script
-      src="https://code.jquery.com/jquery-3.1.1.min.js"
-      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
-      crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.1.1.min.js"
+    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="semantic/semantic.min.js"></script>
  <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
  <script src="js/func.js"></script>
@ -17,7 +15,6 @@
      margin: 0;
      padding: 0;
      overflow: hidden;
-        background-color: #f0f0f0;
    }
  </style>
 </head>
@ -40,7 +37,19 @@
  <div id="container" style="border:1px solid red;"></div>
  <script>

+    var switchs = [], lines = [], logiques = [];
+
+    var logique = {
+      idown : "logique1",
+      id1 : "line1",
+      id2 : "line2",
+      id3 : "line3",
+    }

+    logiques.push(logique);
+    console.log(logiques);
+
+    var layer = new Konva.Layer();

    var stage = new Konva.Stage({
      container: 'container',
@ -48,98 +57,21 @@
      height: window.innerHeight / 2,
    });

+    initLayer();
+
    var etlogique = {
-        entre1 : createEtLogique(300,50, "pd"),
+      entre1: createEtLogique(300, 50, "logique1"),
      entre2: "200",
      sortie: "500",
    }

+    let line = createLine([120, 45, 300, 66], "line");
+    layer.add(line);
+    line = createLine([400, 75, 500, 75], "line");
+    layer.add(line);

-      var layer = new Konva.Layer();
-
-      /*
-       * create a triangle shape by defining a
-       * drawing function which draws a triangle
-       */
-
-      // add the triangle shape to the layer
-
-      
-
-      var imageObj2 = new Image();
-      imageObj2.onload = function () {
-        var yoda = new Konva.Image({
-          x: 500,
-          y: 50,
-          image: imageObj2,
-          width: 50,
-          height: 50,
-          id : "et",
-        });
-
-        // add the shape to the layer
-        layer.add(yoda);
-        layer.batchDraw();
-      };
-      imageObj2.src = 'img/idea_white.png';
-      
-
-      var rect1 = new Konva.Rect({
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 50,
-        stroke: 'black',
-        strokeWidth: 4,
-        id : "rect",
-      });
-      // add the shape to the layer
-      layer.add(rect1);
-      console.log(rect1);
-      var simpleText = new Konva.Text({
-        x: 20,
-        y: 20,
-        text: '0',
-        fontSize: 30,
-        fontFamily: 'Calibri',
-        fill: 'black',
-        id : "text",
-      });
-      layer.add(simpleText);
-
-      rect1.on('click', function () {
-        var et = stage.findOne("#text");
-        var line = stage.findOne("#line");
-        var text = et.text() == '1' ? '0' : '1';
-        var colorline = et.text() == '1' ? 'black' : 'blue';
-        line.stroke(colorline);
-        et.text(text);
-        layer.draw();
-      });
-      var redLine = new Konva.Line({
-        points: [120, 45, 300, 66],
-        stroke: 'black',
-        strokeWidth: 3,
-        lineCap: 'round',
-        lineJoin: 'round',
-        id : "line",
-      });
-      layer.add(redLine);
-
-      var lineFinal = new Konva.Line({
-        points: [400, 75, 500, 75],
-        stroke: 'black',
-        strokeWidth: 3,
-        lineCap: 'round',
-        lineJoin: 'round',
-        id : "lineFinal",
-      });
-      layer.add(lineFinal);
-      
-
-      // add the layer to the stage
    stage.add(layer);
-      console.log(layer);
  </script>
 </body>
+
 </html>
--- a/js/func.js
+++ b/js/func.js
@ -10,7 +10,7 @@ function createEtLogique(x, y, id){
      id: "pd",
    });

-        // add the shape to the layer
+
    layer.add(yoda);
    layer.batchDraw();
  };
@ -18,3 +18,67 @@ function createEtLogique(x, y, id){

  return imageObj;
 }
+
+function createLine(points, id) {
+  let line = new Konva.Line({
+    points: points,
+    stroke: 'black',
+    strokeWidth: 3,
+    lineCap: 'round',
+    lineJoin: 'round',
+    id: id,
+  });
+  return line
+}
+
+function initLayer() {
+  var imageObj2 = new Image();
+  imageObj2.onload = function () {
+    var yoda = new Konva.Image({
+      x: 500,
+      y: 50,
+      image: imageObj2,
+      width: 50,
+      height: 50,
+      id: "et",
+    });
+
+
+    layer.add(yoda);
+    layer.batchDraw();
+  };
+  imageObj2.src = 'img/idea_white.png';
+
+
+  var rect1 = new Konva.Rect({
+    x: 20,
+    y: 20,
+    width: 100,
+    height: 50,
+    stroke: 'black',
+    strokeWidth: 4,
+    id: "rect",
+  });
+
+  layer.add(rect1);
+  var simpleText = new Konva.Text({
+    x: 20,
+    y: 20,
+    text: '0',
+    fontSize: 30,
+    fontFamily: 'Calibri',
+    fill: 'black',
+    id: "text",
+  });
+  layer.add(simpleText);
+
+  rect1.on('click', function () {
+    var et = stage.findOne("#text");
+    var line = stage.findOne("#line");
+    var text = et.text() == '1' ? '0' : '1';
+    var colorline = et.text() == '1' ? 'black' : 'blue';
+    line.stroke(colorline);
+    et.text(text);
+    layer.draw();
+  });
+}