Sākums Izpētīt Palīdzība
Pierakstīties
ggrc
/
igeom
1
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

teste: desenhando retas dinamicamente

Victor Luiz Domingues 5 gadi atpakaļ
vecāks
e1a29980f9
revīzija
c85c78f3e6
3 mainītis faili ar 130 papildinājumiem un 27 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 50 1
      app/app.js
  2. 64 15
      app/components/line.js
  3. 16 11
      index.html

+ 50 - 1
app/app.js
Parādīt failu 

@@ -3,6 +3,11 @@ var app = (function() {
 
   var height = window.innerHeight;
 
   var layers = [];
 
   var _layer = [];
 
+  var tools = [];
 
+  var menu = [];
 
+  var layer = undefined;
 
+  var _selectedTool = [];
 
+  var group = undefined;
 
 
   var stage = new Konva.Stage({
 
     container: "container",
 
@@ -35,6 +40,7 @@ var app = (function() {
 
     createLayer();
 
     configureDragAndDrop();
 
     layer = currentLayer();
 
+    configureGroup();
 
   }
 
 
   function currentLayer() {
 
@@ -44,6 +50,11 @@ var app = (function() {
 
 
   function configureDragAndDrop() {
 
     stage.on("click tap", function(e) {
 
+      var tool = getSelectedTool();
 
+      if (tool != undefined && (e.target == undefined || e.target === stage)) {
 
+        tool.draw();
 
+      }
 
+
 
       if (e.target === stage) {
 
         stage.find("Transformer").destroy();
 
         layer.draw();
 
@@ -61,12 +72,50 @@ var app = (function() {
 
     });
 
   }
 
 
+  function configureGroup() {
 
+    group = new Konva.Group({
 
+      x: 30,
 
+      rotation: 10,
 
+      scaleX: 1.5
 
+    });
 
+    layer.add(group);
 
+  }
 
+
 
+  function setSelectedTool(tool) {
 
+    clearSelectedTool();
 
+    _selectedTool.push(tool);
 
+  }
 
+
 
+  function clearSelectedTool() {
 
+    _selectedTool = [];
 
+    setStatus("");
 
+  }
 
+
 
+  function getSelectedTool() {
 
+    if (_selectedTool.length > 0) return _selectedTool[0];
 
+    return undefined;
 
+  }
 
+
 
+  function getRelativePointerPosition() {
 
+    return stage.getPointerPosition();
 
+  }
 
+
 
+  function setStatus(status) {
 
+    document.getElementById("status").innerHTML = status;
 
+  }
 
+
 
   return {
 
     stage: stage,
 
     currentLayer: currentLayer,
 
     createLayer: createLayer,
 
     screen: screen,
 
     bootstrap: bootstrap,
 
-    layers: layers
 
+    layers: layers,
 
+    tools: tools,
 
+    setSelectedTool: setSelectedTool,
 
+    clearSelectedTool: clearSelectedTool,
 
+    getSelectedTool: getSelectedTool,
 
+    pos: getRelativePointerPosition,
 
+    setStatus: setStatus
 
   };
 
 })();

+ 64 - 15
app/components/line.js
Parādīt failu 

@@ -1,23 +1,72 @@
 
 var line = (function() {
 
   // dashed line
 
 
+  var tool = {};
 
+
 
+  var states = ["primeiro_ponto", "segundo_ponto"];
 
+
 
+  var state = undefined;
 
+
 
+  var points = [0, 0, 0, 0];
 
+
 
   function drawLine() {
 
-    var ln = new Konva.Line({
 
-      points: [10, 10, 70, 70],
 
-      stroke: "grey",
 
-      strokeWidth: 2,
 
-      lineJoin: "round",
 
-      draggable: true,
 
-      strokeScaleEnabled : false
 
-    });
 
-    
-    var layer = app.currentLayer();
 
-    layer.add(ln);
 
-    app.stage.add(layer);
 
-
 
-    app.stage.draw();
 
+    if (state == undefined) {
 
+      state = states[0];
 
+      app.setStatus("Selecione o primeiro ponto no canvas");
 
+    } else if (state == states[0]) {
 
+      var pos = app.pos();
 
+      points[0] = pos.x;
 
+      points[1] = pos.y;
 
+      state = states[1];
 
+      app.setStatus("Selecione o segundo ponto no canvas");
 
+    } else if (state == states[1]) {
 
+      var pos = app.pos();
 
+      points[2] = pos.x;
 
+      points[3] = pos.y;
 
+      var p = points.slice();
 
+      var ln = new Konva.Line({
 
+        points: p,
 
+        stroke: "grey",
 
+        strokeWidth: 2,
 
+        lineJoin: "round",
 
+        draggable: true,
 
+        strokeScaleEnabled: false
 
+      });
 
+
 
+      var layer = app.currentLayer();
 
+      layer.add(ln);
 
+      app.stage.add(layer);
 
+
 
+      app.stage.draw();
 
+      state = undefined;
 
+      app.clearSelectedTool();
 
+      app.setStatus("");
 
+    }
 
+  }
 
+
 
+  function bootstrap() {
 
+    app.tools.push(tool);
 
+  }
 
+
 
+  function onClick() {
 
+    app.setSelectedTool(tool);
 
+    state = states[0];
 
+    app.setStatus("Selecione o primeiro ponto no canvas");
 
   }
 
+
 
+  tool = {
 
+    id: "reta",
 
+    title: "Reta",
 
+    icon: "line",
 
+    click: onClick,
 
+    draw: drawLine,
 
+    points: points
 
+  };
 
+
 
+  bootstrap();
 
+
 
   return {
 
-    drawLine: drawLine
 
+    drawLine: drawLine,
 
+    onClick: onClick
 
   };
 
 })();

+ 16 - 11
index.html
Parādīt failu 

@@ -1,18 +1,23 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
     <title>Proof of Concept - iGeom - Web</title>
 
-
 
-</head>
 
-<body>
 
-    <button onclick="line.drawLine()">Desenhar reta</button>
 
+  </head>
 
+  <body>
 
+    <div id="tool-bar">
 
+      <button onclick="line.onClick()">Desenhar reta</button>
 
+      
+      <span id="status"> </span>
 
+    </div>
 
     <div id="container"></div>
 
     <script src="https://unpkg.com/konva@3.3.3/konva.min.js"></script>
 
     <script src="app/app.js"></script>
 
     <script src="app/components/line.js"></script>
 
-    <script>app.bootstrap();</script>
 
-</body>
 
-</html>
 
+    <script>
 
+      app.bootstrap();
 
+    </script>
 
+  </body>
 
+</html>