GoJS设置渐变色与选中节点的颜色

设置渐变色

import gobg from './images/gobg@2x.png'
const $ = go.GraphObject.make;

var greenBrush = $(go.Brush, "Linear", { 0: "rgba(0,89,252,1)", 1: "rgba(18,212,241,1)", start: go.Spot.Left, end: go.Spot.Right });
const data = {
    "nodeDataArray": [
        { 
        "text": "事故发生", "figure": "RoundedRectangle", "fill": greenBrush, "key": -5, "img": gobg, 
        "loc": "-50.00000000000001 -219.25584766476652", 
        },
        
    ],
    
}

export default data

设置节点选中颜色

$(go.Shape, "Rectangle", 
		// when this Part.isSelected changes value, change this Shape.fill value:
		new go.Binding("fill", "isSelected", function(sel) {
	if (sel) return "red"; else return "lightgray";
}).ofObject("")),
或者
function mouseEnter(e, obj) {    var shape = obj.findObject("SHAPE");
    shape.fill = "#6DAB80";
    shape.stroke = "#A6E6A1";    var text = obj.findObject("TEXT");
    text.stroke = "white";
  };  function mouseLeave(e, obj) {    var shape = obj.findObject("SHAPE");    // Return the Shape's fill and stroke to the defaults
    shape.fill = obj.data.color;
    shape.stroke = null;    // Return the TextBlock's stroke to its default
    var text = obj.findObject("TEXT");
    text.stroke = "black";
  };

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      {        mouseEnter: mouseEnter,        mouseLeave: mouseLeave
      },
      $(go.Shape, "Rectangle",
        { strokeWidth: 2, stroke: null, name: "SHAPE" },        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 10, font: "bold 18px Verdana", name: "TEXT" },        new go.Binding("text", "key"))
    );

  diagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "#96D6D9" },
    { key: "Beta",  color: "#96D6D9" },
    { key: "Gamma", color: "#EFEBCA" },
    { key: "Delta", color: "#EFEBCA" }
  ],
  [
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Gamma" },
    { from: "Beta", to: "Beta" },
    { from: "Gamma", to: "Delta" },
    { from: "Delta", to: "Alpha" }
  ]);

参考:https://gojs.net.cn/intro/selection.html#SelectionAppearanceChanges

https://gojs.net.cn/intro/highlighting.html

去除边框

canvas {
    border: 0px;
    outline: none;
}

去除选中边框

const diagram =
            $(go.Diagram,
                {
                    'undoManager.isEnabled': false,  // enable undo & redo
                    'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' },
                    model: $(go.GraphLinksModel,
                        {
                            linkKeyProperty: 'key'  // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
                        }),
                    isReadOnly: true,
                    //去除节点点击边框
                    nodeSelectionAdornmentTemplate:
                        $(go.Adornment, "Auto"),

                });

修改流程图选择的箭头

diagram.linkTemplate =
            $(go.Link,  // the whole link panel

                { relinkableFrom: true, relinkableTo: true, reshapable: true },
                {
                    routing: go.Link.AvoidsNodes,
                    curve: go.Link.JumpOver,
                    corner: 5,
                    toShortLength: 4,

                },
                new go.Binding("points").makeTwoWay(),
                $(go.Shape,  // the link path shape
                    { isPanelMain: true, strokeWidth: 3, stroke: '#055ABF' }),
                $(go.Shape,  // the arrowhead
                    { toArrow: "Standard", stroke: null, fill: "#055ABF", }),
                $(go.Panel, "Auto",
                    new go.Binding("visible", "isSelected").ofObject(),

                    $(go.TextBlock,
                        {
                            textAlign: "center",
                            font: "10pt helvetica, arial, sans-serif",
                            stroke: "#919191",
                            margin: 2,
                            minSize: new go.Size(10, NaN),
                            editable: false,

                        },
                        new go.Binding("text").makeTwoWay())
                ),
                //改变选中颜色
                {
                    selectionAdornmentTemplate:
                        $(go.Adornment,
                            $(go.Shape,
                                { isPanelMain: true, stroke: "#f47a28", strokeWidth: 4 }),//修改线颜色和大小
                            $(go.Shape,
                                { toArrow: "Standard", fill: "#f47a28", stroke: null })//修改线箭头的颜色和大小
                        )
                }

            );
        return diagram;