根据键定义自定义图标?

Define custom icon based on key?

我有模型数据,每个条目包含几个键,感兴趣的是 color

我想根据 color 中的值指定自定义图标,但在获取该值时遇到问题。

这是我的模型的样子:

  { key: "legendVendor", geo: "Vendor", color: vendorColor },
  { key: "legendFactory", geo: "Factory", color: factoryColor },
  { key: "legendVendorFactory", geo: "Vendor Factory", color: vendorFactoryColor },
  { key: "legendSupplier", geo: "Supplier", color: supplierColor },

我的颜色常量是这样定义的:

  var vendorColor = "#C8DA2B"; 
  var factoryColor = "#800080"; 
  var supplierColor = "#CCD1D1";
  var supplyChainColor = "#FFD700";
  var vendorFactoryColor = "#34c0eb";

这就是我根据颜色设置形状的方式:

  function geoFunc(geoname, color) {
    var geo = icons[geoname];
    // var color = icons[color];
    if (geo === undefined) geo = icons["cloud"];  // use this for an unknown icon name
    if (typeof geo === "string") {
      geo = icons[geoname] = go.Geometry.parse(geo, true);  // fill each geometry
    }

    switch(color) {
      case vendorColor:
        // code block
        geo = icons["heart"]
        geo = icons[geoname] = go.Geometry.parse(geo, true); 
        break;
      default:
        // code block
    }        

    return geo;
  }

这就是我调用该函数的方式:

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      {isTreeExpanded:false},
      {doubleClick: function(e, node) {node.expandTree(1);}},
      $(go.TextBlock, {text:"Text",width:100,height:100,textAlign:"center",font:"12pt sans-serif",margin:3,wrap: go.TextBlock.WrapDesiredSize,alignment:go.Spot.BottomCenter},new go.Binding("text", "geo")),
      $(go.Shape,
        { margin: 3, fill: colors["white"], strokeWidth: 0 },
        new go.Binding("geometry", "geo", "color", geoFunc), // magic happens here <--------
        new go.Binding("fill", "color")),

如何将 color 的值传递给函数 geoFunc

您应该会收到 运行 次错误,因为 "color" 不是转换函数。使用 go-debug.js 获取更多错误或警告消息可能会有所帮助。

如果删除 Binding 构造函数的 "geo" 参数,您将对构造函数进行有效调用,然后将调用 geoFunc 函数并传递 [=12] 的值=].