Go.js Model Style Selection

This is a creation in Article, where the information may have evolved or changed.

First, use the official style

Style (shapes) address: http://gojs.net/latest/samples/shapes.html

How to use:

    myDiagram.nodeTemplateMap.add("End",      $(go.Node, "Spot", nodeStyle(),        $(go.Panel, "Auto",          $(go.Shape, "Circle", // 在此处设置样式            { minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }),          $(go.TextBlock, "End",            { font: "bold 11pt Courier New,Microsoft Yahei", stroke: lightText },            new go.Binding("text"))        ),        makePort("T", go.Spot.Top, false, true),        makePort("L", go.Spot.Left, false, true),        makePort("R", go.Spot.Right, false, true)      ));

Second, custom style

Shapeyou can build a geometry and control its shape and outline color, fill color, and so on.

Graphics

You can Shape.figure set its shape through the properties. When you use a GraphObject.make method to build, you can take a shape parameter as a second parameter as a string. You may also need to GraphObject.desiredSize pass GraphObject.width the, and GraphObject.height the size Shape of the property settings.

The following example lists some of the commonly used Shape shapes, and you can see their names:

diagram.add($(go.Part, "Horizontal",  $(go.Shape, "Rectangle",              { width: 40, height: 60, margin: 4, fill: null }),  $(go.Shape, "RoundedRectangle",              { width: 40, height: 60, margin: 4, fill: null }),  $(go.Shape, "Ellipse",              { width: 40, height: 60, margin: 4, fill: null }),  $(go.Shape, "Triangle",              { width: 40, height: 60, margin: 4, fill: null }),  $(go.Shape, "Diamond",              { width: 40, height: 60, margin: 4, fill: null })));

Results:

Fill Color and Contour

Shape.stroke Shape the outline line color that can be set through the property. By Shape.strokeWidth setting the thickness of the contour line. The Shape.fill fill color is set by the property.

diagram.add($(go.Part, "Horizontal",  $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4                }),  // default fill and stroke are "black"  $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,                fill: "green" }),  $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,                fill: "green", stroke: null }),  $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,                fill: null, stroke: "green" }),  $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,                fill: null, stroke: "green", strokeWidth: 3 }),  $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,                fill: null, stroke: "green", strokeWidth: 6 }),  $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,                fill: "green", background: "orange" })));

Results:

The values of the

shape.stroke and Shape.fill properties generally use CSS settings, and their default colors are black. But our most common use is to set them to null or transparent , which means null, the latter is transparent, there is no gap between the two on the surface, but there is a difference in the click behavior. If set to null , you can only click on the outline of the graphic to select it, and clicking on the graphic cannot be selected. And if you set it to transparent , you can select the graphic anywhere you click the graphic.

diagram.add($(go.Part, "Table",  $(go.Shape, { row: 0, column: 0, figure: "Club", width: 40, height: 40, margin: 4,                fill: "green" }),  $(go.TextBlock, "green", { row: 1, column: 0 }),  $(go.Shape, { row: 0, column: 1, figure: "Club", width: 40, height: 40, margin: 4,                fill: "white" }),  $(go.TextBlock, "white", { row: 1, column: 1 }),  $(go.Shape, { row: 0, column: 2, figure: "Club", width: 40, height: 40, margin: 4,                fill: "transparent" }),  $(go.TextBlock, "transparent", { row: 1, column: 2 }),  $(go.Shape, { row: 0, column: 3, figure: "Club", width: 40, height: 40, margin: 4,                fill: null }),  $(go.TextBlock, "null", { row: 1, column: 3 })));

Results:

Geometric shapes

The shape is actually a number of points of different coordinates, which are then connected together to form. In the above example, we are using some of the gojs defined, but GOJS also supports user-defined shapes, and can use Shape.geometry attributes. It is possible Geometry.parse to create a geometry, but Geometry the expression is complex, and we will describe it in detail later.

In the following example, we show the Geometry.parse process of creating a custom "W" geometry by means of a method:

var w_geometry = go. Geometry.parse ("M 0,0 L 10,50 20,10 30,50 40,0", false);d Iagram.add ($ (go. PART, "Horizontal", $ (go. Shape, {geometry:w_geometry, strokewidth:2}), $ (go.  Shape, {geometry:w_geometry, stroke: "Blue", Strokewidth:10, Strokejoin: "Miter", Strokecap: "Butt"}), $ (go.   Shape, {geometry:w_geometry, stroke: "Blue", Strokewidth:10, Strokejoin: "Miter", Strokecap: "Round"}), $ (go. Shape, {geometry:w_geometry, stroke: "Blue", Strokewidth:10, Strokejoin: "Miter", Strokecap: "Square"}) , $ (go.   Shape, {geometry:w_geometry, stroke: "Green", Strokewidth:10, Strokejoin: "Bevel", Strokecap: "Butt"}), $ (go. Shape, {geometry:w_geometry, stroke: "Green", Strokewidth:10, Strokejoin: "Bevel", Strokecap: "Round"}) , $ (go. Shape, {geometry:w_geometry, stroke: "Green", Strokewidth:10, Strokejoin: "Bevel", Strokecap: "Square"} ), $ (go. Shape, {geometry:w_geometry, stroke: "Red", StRokewidth:10, Strokejoin: "Round", Strokecap: "Butt"}), $ (go.  Shape, {geometry:w_geometry, stroke: "Red", Strokewidth:10, Strokejoin: "Round", Strokecap: "Round"}), $ (go.   Shape, {geometry:w_geometry, stroke: "Red", Strokewidth:10, Strokejoin: "Round", Strokecap: "Square"}), $ (go. Shape, {geometry:w_geometry, stroke: "Purple", Strokewidth:2, Strokedasharray: [4, 2]}), $ (go. Shape, {geometry:w_geometry, stroke: "Purple", Strokewidth:2, Strokedasharray: [6, 6, 2, 2]}));

Results:

Angle and scale

In addition to passing GraphObject.desiredSize , GraphObject.width GraphObject.height These several properties set Shape the size of the dimension outside, and you can also use GraphObject.angle GraphObject.scale the and properties to set Shape the angle and scale.

diagram.add($(go.Part, "Table",  $(go.Shape, { row: 0, column: 1,                figure: "Club", fill: "green", width: 40, height: 40,                }),  // default angle is zero; default scale is one  $(go.Shape, { row: 0, column: 2,                figure: "Club", fill: "green", width: 40, height: 40,                angle: 30 }),  $(go.Shape, { row: 0, column: 3,                figure: "Club", fill: "green", width: 40, height: 40,                scale: 1.5 }),  $(go.Shape, { row: 0, column: 4,                figure: "Club", fill: "green", width: 40, height: 40,                angle: 30, scale: 1.5 })));

Results:

In the following example, Shape.fill the property is set to a Brush brush object, and a linear gradient brush is used to give the Shape fill color.

diagram.add($(go.Part, "Table",  $(go.Shape, { row: 0, column: 0,                figure: "Club", width: 40, height: 40, angle: 0, scale: 1.5,                fill: $(go.Brush, go.Brush.Linear, { 0.0: "blue", 1.0: "red" }),                background: $(go.Brush, go.Brush.Linear, { 0.0: "yellow", 1.0: "green" }),                areaBackground: $(go.Brush, go.Brush.Linear, { 0.0: "gray", 1.0: "lightgray" }) }),  $(go.Shape, { row: 0, column: 1, width: 10, fill: null, stroke: null }),  $(go.Shape, { row: 0, column: 2,                figure: "Club", width: 40, height: 40, angle: 45, scale: 1.5,                fill: $(go.Brush, go.Brush.Linear, { 0.0: "blue", 1.0: "red" }),                background: $(go.Brush, go.Brush.Linear, { 0.0: "yellow", 1.0: "green" }),                areaBackground: $(go.Brush, go.Brush.Linear, { 0.0: "black", 1.0: "lightgray" }) })));

Results: