動態鏈接 - GoJS

如何使用Go.js製作動態鏈接。動態鏈接 - GoJS

使用下面的代碼，我創建了兩個使用靜態值的顏色鏈接。我想讓這些價值觀成爲動態的（應該從範圍中）。

我已經聲明顏色名稱$ scope.model inColor和outColor分別代表開始和結束顏色。

這裏是我的代碼和Plunkr例如：

scripts.js中

var app = angular.module('app', []); 

app.directive('goDiagram', function($http) { 
    return { 
    restrict: 'E', 
    template: '<div></div>', 
    replace: true, 
    scope: { 
     model: '=goModel' 
    }, 
    link: function(scope, element, attrs) { 
     if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this 
     var $ = go.GraphObject.make; 
     var rainbow = $(go.Brush, "Linear", { 
     0: "red", 
     1: "green" 
     }); 
     var diagram = $(go.Diagram, element[0], { 
     nodeTemplate: $(go.Node, "Auto", { 
      locationSpot: go.Spot.Center 
      }, { 
      width: 120, 
      height: 15, 
      locationSpot: go.Spot.Center 
      }, 
      new go.Binding("location"), 
      $(go.Shape, { 
      fill: "#e74c3c", 
      stroke: '#c0392b' 
      }, { 
      portId: "", 
      cursor: "pointer", 
      strokeWidth: 0, 
      }), 
      $(go.TextBlock, { 
       margin: 0, 
       stroke: "#eee" 
      }, 
      new go.Binding("text", "key") 
     ) 
     ), 
     linkTemplate: $(go.Link, { 
      routing: go.Link.AvoidsNodes, 
      reshapable: true, 
      resegmentable: true 
      }, 
      $(go.Shape, 
      { strokeWidth: 3 , stroke: rainbow }, 
      // new go.Binding("stroke", rainbow), 
     ), 
      $(go.Shape, { 
      toArrow: "Standard" 
      }), 
     ), 
     }); 

     function updateAngular(e) { 
     if (e.isTransactionFinished) { 
      scope.$apply(); 
     } 
     } 

     function updateSelection(e) { 
     diagram.model.selectedNodeData = null; 
     var it = diagram.selection.iterator; 
     while (it.next()) { 
      var selnode = it.value; 
      // ignore a selected link or a deleted node 
      if (selnode instanceof go.Node && selnode.data !== null) { 
      diagram.model.selectedNodeData = selnode.data; 
      break; 
      } 
     } 
     scope.$apply(); 
     } 
     // watch scope 
     scope.$watch("model", function(newmodel) { 
     if (newmodel != undefined) { 
      var oldmodel = diagram.model; 
      if (oldmodel !== newmodel) { 
      diagram.removeDiagramListener("ChangedSelection", updateSelection); 
      diagram.model = newmodel; 
      diagram.addDiagramListener("ChangedSelection", updateSelection); 
      } 
     } 
     }); 
    } 
    } 
}); 

app.controller('appController', function($scope) { 
    $scope.init = function(d) { 
    $scope.hello = "Hello Plunker!!!!"; 
    $scope.model = new go.GraphLinksModel(
     [{ 
     key: "Alpha", 
     color: "lightblue", 
     location: new go.Point(150, 130) 
     }, { 
     key: "Beta", 
     color: "orange", 
     location: new go.Point(350, 130) 
     }, { 
     key: "Gamma", 
     color: "lightgreen", 
     location: new go.Point(150, 230) 
     }, { 
     key: "Delta", 
     color: "pink" 
     }], [{ 
     from: "Alpha", 
     to: "Beta", 
     inColor: "red", 
     outColor: "blue" 
     }, { 
     from: "Alpha", 
     to: "Gamma", 
     inColor: "yellow", 
     outColor: "blue" 
     }, { 
     from: "Beta", 
     to: "Gamma", 
     inColor: "green", 
     outColor: "pink" 
     }, { 
     from: "Gamma", 
     to: "Delta", 
     inColor: "black", 
     outColor: "red" 
     }, { 
     from: "Delta", 
     to: "Alpha", 
     inColor: "violet", 
     outColor: "green" 
     }]); 
    $scope.model.selectedNodeData = null; 
    } 
});

的index.html

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="https://gojs.net/latest/release/go.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="appController"> 
    <div ng-init="init()"> 
     <h1>{{hello}}</h1> 
     <go-diagram go-model="model" style="border: solid 1px black; width:100%; height:400px"></go-diagram> 
    </div> 
    </body> 

</html>

Plunkr

來源

2017-09-25 kabeer rifaye

這裏的產生刷子的轉換功能給個鏈接：

function linkLinearBrush(link) { 
    var b = new go.Brush(go.Brush.Linear); 
    var fp = link.fromPort.getDocumentPoint(go.Spot.Center); 
    var tp = link.toPort.getDocumentPoint(go.Spot.Center); 
    var right = (tp.x > fp.x); 
    var down = (tp.y > fp.y); 
    if (right) { 
    if (down) { 
     b.start = go.Spot.TopLeft; 
     b.end = go.Spot.BottomRight; 
    } else { 
     b.start = go.Spot.BottomLeft; 
     b.end = go.Spot.TopRight; 
    } 
    } else { // leftward 
    if (down) { 
     b.start = go.Spot.TopRight; 
     b.end = go.Spot.BottomLeft; 
    } else { 
     b.start = go.Spot.BottomRight; 
     b.end = go.Spot.TopLeft; 
    } 
    } 
    b.addColorStop(0.0, link.data.inColor); 
    b.addColorStop(1.0, link.data.outColor); 
    return b; 
}

當鏈接模板中使用：

myDiagram.linkTemplate = 
    $(go.Link, 
    $(go.Shape, { strokeWidth: 5 }, 
     new go.Binding("stroke", "", linkLinearBrush).ofObject()) 
);

你得到這種結果：

會如果需要的話，改變轉換函數以從連接的節點獲取顏色而不是從鏈接數據獲得顏色是微不足道的。

來源

2017-09-25 21:44:35

如何正確顯示筆劃線50％（inColor）和50％（outColor）以消除線中的模糊。 –

將顏色停止更改爲0.4999而不是0.0和0.5而不是1.0。 –

你能給我一個解決方案嗎？https://stackoverflow.com/questions/46455546/spacingzoom-directive-gojs –

動態鏈接 - GoJS

回答

相關問題