如何在 Gojs 中更新颜色变化的 json答案

【问题标题】：How to update json on colorchange in Go.js如何在 Gojs 中更新颜色变化的 json
【发布时间】：2015-06-02 04:28:41
【问题描述】：

我正在使用Go.js 来实现流程图并将 json 数据保存到 sql 中。但我无法更新 json 数据。这是我的代码

myDiagram.addDiagramListener("ChangedSelection", function (e1) {
      var sel = e1.diagram.selection;
      var str = "";
      if (sel.count === 0) {
        str = "Selecting nodes in the main Diagram will display information here.";
        info.innerHTML = str;
        return;
      } else if (sel.count > 1) {
        str = sel.count + " objects selected.";
        info.innerHTML = str;
        return;
      }
      // One object selected, display some information
        var elem = sel.first();

        var shape = elem.findObject("SHAPE");
        var txtblock = elem.findObject("TEXT");
        str += "<h3>Selected Node:</h3>";
        str += "<p>Figure: " + shape.figure + "</p>";
        str += "<p>Text: " + txtblock.text + "</p>";
        var strokeColor = shape.stroke;
        str += '<p style="float: left; margin-right: 10px;">Color: <input type="text" id="custom" /></p>';
        info.innerHTML = str;

      // Initialize color picker
      $("#custom").spectrum({
          color: strokeColor,

          // Change colors by constructing a gradient
          change: function(color) {
            var c = color.toRgb();
            var r,g,b;
            var grad1 = new go.Brush(go.Brush.Linear);
            r = Math.min(c.r + 10, 255);
            g = Math.min(c.g + 10, 255);
            b = Math.min(c.b + 10, 255);
            grad1.addColorStop(0, "rgb(" + r +","+ g +","+ b + ")");
            grad1.addColorStop(0.5, color.toRgbString());
            r = Math.max(c.r - 30, 0);
            g = Math.max(c.g - 30, 0);
            b = Math.max(c.b - 30, 0);
            grad1.addColorStop(1, "rgb(" + r +","+ g +","+ b+  ")");
            shape.fill = grad1;
            shape.stroke = "rgb(" + r +","+ g +","+ b+  ")";
            alert(myDiagram.model.toJson());
            txtblock.stroke = (r < 100 && g < 100 && b < 100) ? "white" : "black";
          }
      });

    });

我需要这样的json数据

 { "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [ {"category":"Start", "text":"Start", "key":-1, "loc":"-30 -301", "color":"rgb(196,0,0)"} ],
  "linkDataArray": [  ]}

如果我静态添加颜色元素，它会起作用。但不更新颜色变化的jsondata。

【问题讨论】：

标签： javascript jquery json gojs

【解决方案1】：

我找到了答案。我必须在节点形状中创建一个新对象来更改颜色。

new go.Binding("stroke", "color").makeTwoWay()),

我的完整节点功能将如下所示。

myDiagram.nodeTemplateMap.add("Start",
      GO(go.Node, "Spot", nodeStyle(),
        GO(go.Panel, "Auto",
          GO(go.Shape, "Circle",new go.Binding("fill", "color"),
            { minSize: new go.Size(40, 60), fill: "#79C900", stroke: null ,name: "SHAPE"},
            new go.Binding("stroke", "color").makeTwoWay()),
          GO(go.TextBlock, "Start",
            { margin: 5, font: "bold 11pt Helvetica, Arial, sans-serif", name: "TEXT", stroke: lightText })
        ),
        // three named ports, one on each side except the top, all output only:
        makePort("L", go.Spot.Left, true, false),
        makePort("R", go.Spot.Right, true, false),
        makePort("B", go.Spot.Bottom, true, false)
      ));

【讨论】：