The colors of the start and end arrows are darker

The colors of the start and end arrows are darker.

such an image occurs when I look away

What do you think is the reason for this?

Untitled

such a problem does not appear when I zoom

My linkTemplate :

    this.diagram.linkTemplate =
        goMake(go.Link,
            {
                curve: go.Link.Bezier,
                toShortLength: 0.5,
                fromEndSegmentLength: 20, toEndSegmentLength: 50,
                zOrder: -1
            },
            {
                selectionAdornmentTemplate:
                    goMake(go.Adornment,
                        goMake(go.Shape,
                            { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 1 }),
                        goMake(go.Shape,
                            { toArrow: "CustomArrowHead", fill: "dodgerblue", stroke: null })
                    )
            },
            new go.Binding("points").makeTwoWay(),
            goMake(go.Shape,  // the highlight shape, normally transparent
                {
                    isPanelMain: true,
                    strokeWidth: 2,
                    stroke: "transparent",
                    name: "HIGHLIGHT",
                }),
            goMake(go.Shape, "RoundedRectangle", // the link path shape
                {
                    isPanelMain: true,
                    strokeWidth: 1
                },
                this.makeSubLinkBinding("stroke", "color")
            ),
            goMake(go.Shape,  // the arrowhead
                {
                    toArrow: "CustomArrowHead",
                    strokeWidth: 0
                },
                this.makeSubLinkBinding("fill", "color"),
                this.makeSubLinkBinding("stroke", "color")
            ),
            goMake(go.Panel, "Auto",
                {
                    _isLinkLabel: this.findConfigDiagram("linkConfig", "isDraggableLinkLabel"), visible: false
                },
                goMake(go.Shape, "RoundedRectangle",  // the label background, which becomes transparent around the edges
                    {
                        name: "linkTextBlockBackground"
                    },
                    this.makeSubLinkBinding("fill", "textBackgroundColor"),
                    this.makeSubLinkBinding("stroke", "textBackgroundColor"),
                    this.makeSubLinkBinding("visible", "isShowMouseOver")
                ),

                goMake(go.TextBlock, "transition",  // the label text
                    {
                        name: "linkTextBlock",
                        textAlign: "center",
                        isMultiline: false,
                        font: "6pt sans-serif",
                        margin: new go.Margin(2, 2, 1.41, 2),
                        editable: true,  // enable in-place editing
                    },
                    // editing the text automatically updates the model data
                    //new go.Binding("text", "", this.bindLinkText).makeTwoWay(this.converterLinkText),
                    //new go.Binding("font", "", this.bindLinkTextFont).makeTwoWay(),
                    //new go.Binding("isUnderline", "", this.bindLinkTextUnderline).makeTwoWay(),
                    //new go.Binding("stroke", "", this.bindLinkTextColor).makeTwoWay(),
                    //new go.Binding("textAlign", "", this.bindLinkTextAlignment).makeTwoWay(),
                    //new go.Binding("visible", "", this.bindLinkTextShow).makeTwoWay(),
                    //new go.Binding("font", "", this.bindShapeTextFont)
                    this.makeSubLinkBinding("text", "text"),
                    this.makeSubLinkBinding("isUnderline", "textIsUnderline"),
                    this.makeSubLinkBinding("stroke", "textColor"),
                    this.makeSubLinkBinding("textAlign", "textAlignment")
                )
            )
        );

At least three possibilities, in decreasing order of likelihood:

  1. Antialiasing, because it is not actually a straight line. Look at the Link.points to see if all the Point.y values are the same.
  2. The link label panel is visible and showing blanks, or something like that. Check its GraphObject.visible value.
  3. Optical illusion. Try hiding the node from your eyes and decide whether you still see that effect.

Please see the link here.

I just used a paint program to sample the color in the middle of the arrowhead and in the middle of the link path, and they were the same. So if you are seeing any differences, it must be an optical illusion.

The link route in your CodePen is indeed straight horizontal, but antialiasing might be making you think that the diagonal strokes of the arrowhead are fuzzier and thus a slightly different color.