gojs+ 根据某些数据条件自定义图片

Question

我有一个go.picture，但设计可以根据相同的属性值进行更改，所以我如何根据数据进行自定义。

举个例子

$(go.Picture, {
  width: 20,
  height: 20,
  source: '../img/cat.svg',
  imageAlignment: go.Spot.Top,
  alignment: go.Spot.Right,
}),

这里我在nodeDataArray中有一组节点数据，如果名字是cat，那么cource应该是

来源：'../img/cat.svg',

并且如果节点数组中的名称属性是 dog ，源应该动态更改为 source: '../img/dog.svg',

假设这是我的数据

   const data = {
      nodeDataArray: [
        { key: 0, name: "Cat", color: "lightblue", loc: "0 0" },
        { key: 1, name: "Dog", color: "orange", loc: "150 0" },

      ],
      linkDataArray: [
        { key: -1, from: 0, to: 1 },
        { key: -2, from: 0, to: 2 },

      ],
      skipsDiagramUpdate: false
    };

任何帮助都非常有帮助

Answer 1

          go.Picture,
          {
            width: 30,
            height: 30,
            margin: new go.Margin(2, 5, 2, 22),
          },
          new go.Binding('source', '', (sourceData, target, name) => {
            if (sourceData.name.includes('cat') > -1) {
              return '../assets/img/cat.svg';
            } else return '../assets/img/dog.svg';
          })
            ),```

Answer 2

使用 data-binding 绑定到 data.name 属性:

$(go.Picture,
  {
    width: 20,
    height: 20,
    source: '../img/default.svg', // This image will display if data.name does not exist
    imageAlignment: go.Spot.Top,
    alignment: go.Spot.Right,
  },
  // Note carefully that this binding ONLY runs if data.name is specified
  new go.Binding("source", "name", function(name){
    if (name === "Dog") return '../img/dog.svg';
    else if (name === "Cat") return '../img/cat.svg';
    else return '../img/unknown.svg';
  })
  )

除非万不得已，否则不要使用 empty-string 数据绑定，因为它们必须对每次数据更改进行评估，因此速度较慢。

gojs+ 根据某些数据条件自定义图片

gojs+ customising picture based on some data condition

javascript

reactjs

gojs