The border color of Rectangle Shape

Dear all

I would like to set difference color of each border side in the same Rectangle such as the left border is red and the right border is green.

And Is it possible to set difference weight of each border side ?

How to do by GoJS?

Thank you in advance.

Each Shape can have only a single Brush used to draw the outline stroke. So one cannot draw pieces of a Shape in one color and other pieces in another color.

But you can assemble multiple Shapes in a Panel, making sure that the vertical lines (and horizontal lines, if you want them) are positioned and sized correctly to create a rectangular figure.

Thank you very much , I will try it

And I have a question, if I use a vertical and a horizontal line on Panel that are in the “go.Group” when i re-sizing the group these line are increase or decrease according with the size of group or not .

If GoJS can to do, please recommend the example to follow it

Thank you in advance

Here you go. For a time being, you can see it in action at http://gojs.net/extras/multiColorRectangle.html.

    // parameters for the node template's border
    var borderThickness = 2;
    var cornerColor = "dimgray";

    myDiagram.nodeTemplate =
      $(go.Node, "Table",
        {
          resizable: true,
          minSize: new go.Size(100+borderThickness*2, 20+borderThickness*2),
          background: "transparent",
          defaultStretch: go.GraphObject.Fill
        },
        // make sure the border cells (rows 0 and 2 and columns 0 and 2) have a fixed thickness
        $(go.RowColumnDefinition, { row: 0, height: borderThickness }),
        $(go.RowColumnDefinition, { row: 2, height: borderThickness }),
        $(go.RowColumnDefinition, { column: 0, width: borderThickness }),
        $(go.RowColumnDefinition, { column: 2, width: borderThickness }),
        // all eight border cells
        $(go.Shape, "RightTriangle", { angle: 270 },
          { row: 0, column: 0, strokeWidth: 0, fill: cornerColor, width: borderThickness, height: borderThickness }),
        $(go.Shape,
          { row: 0, column: 1, strokeWidth: 0 },
          new go.Binding("fill", "top")),
        $(go.Shape, "RightTriangle", { angle: 0 },
          { row: 0, column: 2, strokeWidth: 0, fill: cornerColor, width: borderThickness, height: borderThickness }),
        $(go.Shape,
          { row: 1, column: 0, strokeWidth: 0 },
          new go.Binding("fill", "left")),
        $(go.Shape,
          { row: 1, column: 2, strokeWidth: 0 },
          new go.Binding("fill", "right")),
        $(go.Shape, "RightTriangle", { angle: 180 },
          { row: 2, column: 0, strokeWidth: 0, fill: cornerColor, width: borderThickness, height: borderThickness }),
        $(go.Shape,
          { row: 2, column: 1, strokeWidth: 0 },
          new go.Binding("fill", "bottom")),
        $(go.Shape, "RightTriangle", { angle: 90 },
          { row: 2, column: 2, strokeWidth: 0, fill: cornerColor, width: borderThickness, height: borderThickness }),
        // this is the center element, in this case a simple Panel with 2 TextBlocks
        $(go.Panel, "Vertical",
          { row: 1, column: 1, alignment: go.Spot.Top, margin: 3 },
          $(go.TextBlock,
            { font: "bold 12pt sans-serif" },
            new go.Binding("text", "key")),
          $(go.TextBlock,
            { stretch: go.GraphObject.Fill },
            new go.Binding("text"))
        )
      );

Note how each of the four sides have their color data bound to properties in the data.

This design uses a triangular half square in each corner, as if the border were drawn as a stroke with a “bevel” Shape.strokeJoin. You could replace that with a quarter-circle for a “round” join or a full square for a “miter” join. In any of those cases you’ll need to decide what brush to use for those corner shapes. I took the easy way out and just used a “dimgray” color.

Note: in certain situations it might have been possible to use a linear gradient Brush stroke in a simple “Rectangle” Shape. For example, if you only wanted the left to be red, the top and the bottom to be black, and the right to be green, you could create a linear brush with those colors and then assign or bind it to the Shape.stroke. But this example demonstrates a much more general technique for dealing with colored sides.

Thank you for good example :joy: