流程圖控件GoJS教程：使用Shape類繪制幾何圖形
GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
使用Shape類繪制幾何圖形。您可以控制繪制的形狀以及如何描邊和填充。
形狀，如TextBlock和Picture，是“原子”對象 - 它們不能包含任何其他對象。因此，Shape永遠不會繪制一些文本或圖像。
在這些簡單的演示中，代碼以編程方式創建一個Part并將其添加到Diagram中。了解模型和數據綁定后，通常不會以編程方式創建部件（節點或鏈接）。
數據
您可以將Shape.figure屬性設置為常用的形狀類型。使用GraphObject.make時，可以將圖形名稱作為字符串參數傳遞。您可能還需要設置GraphObject.desiredSize或GraphObject.width和GraphObject.height屬性，盡管通常由Panel確定形狀所在的大小。
以下是幾種最常用的Shape數據：
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, "Diamond", { width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "TriangleRight", { width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "TriangleDown", { width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "TriangleLeft", { width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "TriangleUp", { width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "MinusLine", { width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "PlusLine", { width: 40, height: 60, margin: 4, fill: null }),
$(go.Shape, "XLine", { width: 40, height: 60, margin: 4, fill: null })
));
您可以在形狀樣本中看到所有已命名的幾何圖形 。一些最常用的數字是在GoJS庫中預定義的。但是大多數數字都在extensions目錄的Figures.js文件中定義。
填充和描邊
該Shape.stroke屬性指定用于繪制圖形的輪廓刷。該Shape.fill屬性指定用于填充形狀的輪廓刷。額外的“筆劃...”屬性還控制繪制形狀輪廓的方式。最常見的此類屬性是Shape.strokeWidth。
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" })
));
該Shape.stroke和Shape.fill性質采取刷ES但大多數情況下都獲得了CSS顏色字符串來表示純色畫筆。這兩個屬性默認為純黑色畫筆。但是，將它們中的一個指定為null或“透明”是很常見的。空刷子表示沒有為該筆劃或填充繪制任何內容。透明刷子產生相同的外觀但不同的擊中測試行為。具有null Shape.fill的形狀會產生“空心”形狀 - 在形狀內部單擊將不會“擊中”該形狀，因此不會選擇該形狀所在的節點。但是具有透明填充的形狀會產生“填充” “形狀 - 形狀內的鼠標事件將”擊中“
diagram.div.style.background = "lightgray";
diagram.add(
$(go.Part, "Table",
$(go.Shape, { row: 0, column: 0, figure: "Club", width: 60, height: 60, margin: 4,
fill: "green" }),
$(go.TextBlock, "green", { row: 1, column: 0 }),
$(go.Shape, { row: 0, column: 1, figure: "Club", width: 60, height: 60, margin: 4,
fill: "white" }),
$(go.TextBlock, "white", { row: 1, column: 1 }),
$(go.Shape, { row: 0, column: 2, figure: "Club", width: 60, height: 60, margin: 4,
fill: "transparent" }),
$(go.TextBlock, "transparent", { row: 1, column: 2 }),
$(go.Shape, { row: 0, column: 3, figure: "Club", width: 60, height: 60, margin: 4,
fill: null }),
$(go.TextBlock, "null", { row: 1, column: 3 })
));
嘗試在每個形狀內單擊以查看哪些形狀將響應單擊并導致選擇整個面板。請注意，使用“透明”填充，您可以看到圖表背景，但是當您單擊它時，您會“點擊”形狀。只有最后一個，填充為空，才真正“空洞”。單擊最后一個形狀只會導致圖表背景上的單擊，除非您單擊筆劃輪廓。
幾何
每個Shape都從它使用的Geometry中獲得“形狀” 。幾何圖形只是一個保存的描述，說明如何在給定一組點的情況下繪制一些線條。設置Shape.figure使用可以參數化的命名預定義幾何。通常，給Shape一個Geometry而不是給它一個數字是最有效的。
如果你想要一些與GoJS中所有預定義圖形不同的東西，你可以構建自己的幾何圖形并設置Shape.geometry。構建自己的幾何體的一種方法是構建由PathSegment組成的PathFigure。在構建基于某些數據計算點的幾何時，通常需要這樣做。
但是，創建常量幾何的更簡單方法是調用Geometry.parse來讀取具有幾何定義路徑表達式的字符串，或者將Shape.geometryString設置為這樣的字符串。這些表達式具有移動假想“筆”的命令。幾何路徑的語法記錄在“ 幾何路徑字符串”頁面中。
此示例創建一個看起來像字母“W”的Geometry，并在具有不同筆觸特征的多個Shape對象中使用它。幾何對象可以由多個形狀共享。請注意，可能不需要指定GraphObject.desiredSize或GraphObject.width和GraphObject.height，因為Geometry定義了自己的大小。如果設置了大小或由包含Panel強加，則有效幾何由Shape.geometryStretch屬性確定。根據geometryStretch屬性的值，這可能會導致額外的空白空間或剪裁形狀。
var W_geometry = go.Geometry.parse("M 0,0 L 10,50 20,10 30,50 40,0", false);
diagram.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] })
));
角度和比例
除了設置GraphObject.desiredSize或GraphObject.width和GraphObject.height以聲明Shape的大小外，還可以設置其他屬性以影響外觀。例如，您可以設置GraphObject.angle和GraphObject.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 })
));
該Shape.fill和GraphObject.background刷規模，并與形狀一起轉動。所述GraphObject.areaBackground繪制在含面板的坐標，所以它不會受該對象的標度或角度。
以下兩個形狀各自使用三個單獨的線性漸變畫筆，三個屬性各一個。請注意左側未旋轉的形狀。由于其GraphObject.background畫筆是不透明的，因此您無法看到填充其后面相同區域的GraphObject.areaBackground畫筆。
var bluered = $(go.Brush, "Linear", { 0.0: "blue", 1.0: "red" });
var yellowgreen = $(go.Brush, "Linear", { 0.0: "yellow", 1.0: "green" });
var grays = $(go.Brush, "Linear", { 0.0: "black", 1.0: "lightgray" });
diagram.add(
$(go.Part, "Table",
$(go.Shape, { row: 0, column: 0,
figure: "Club", width: 40, height: 40, angle: 0, scale: 1.5,
fill: bluered,
background: yellowgreen,
areaBackground: grays
}),
$(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: bluered,
background: yellowgreen,
areaBackground: grays
})
));
自定義數字
如上所示，只需設置Shape.geometry或Shape.geometryString即可輕松創建自定義形狀。導入SVG時這非常方便。但是，也可以定義其他命名圖形，當您希望通過設置或數據綁定Shape.figure屬性來輕松指定或更改現有Shape的幾何圖形時，這很方便。
靜態函數Shape.defineFigureGenerator可用于定義新的圖形名稱。第二個參數是一個函數，它使用Shape和預期的寬度和高度調用，以生成并返回幾何。這允許基于Shape的屬性和預期大小來參數化幾何。特別是，除了寬度和高度之外，還可以在生成Geometry時考慮Shape.parameter1和Shape.parameter2屬性。為了有效，生成的幾何邊界必須等于或小于提供的寬度和高度。
go.Shape.defineFigureGenerator("RoundedTopRectangle", function(shape, w, h) {
// this figure takes one parameter, the size of the corner
var p1 = 5; // default corner size
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
var geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(new go.PathFigure(0, p1)
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w, h))
.add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});
go.Shape.defineFigureGenerator("RoundedBottomRectangle", function(shape, w, h) {
// this figure takes one parameter, the size of the corner
var p1 = 5; // default corner size
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
var geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(new go.PathFigure(0, 0)
.add(new go.PathSegment(go.PathSegment.Line, w, 0))
.add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, p1, h))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()));
// don't intersect with two bottom corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
return geo;
});
diagram.nodeTemplate =
$(go.Part, "Spot",
{
selectionAdorned: false, // don't show the standard selection handle
resizable: true, resizeObjectName: "SHAPE", // user can resize the Shape
rotatable: true, rotateObjectName: "SHAPE", // user can rotate the Shape
// without rotating the label
},
$(go.Shape,
{
name: "SHAPE",
fill: $(go.Brush, "Linear", { 0.0: "white", 1.0: "gray" }),
desiredSize: new go.Size(100, 50)
},
new go.Binding("figure", "fig"),
new go.Binding("parameter1", "p1")),
$(go.Panel, "Vertical",
$(go.TextBlock,
new go.Binding("text", "fig")),
$(go.TextBlock, { stroke: "blue" },
new go.Binding("text", "parameter1", function(p1) { return p1; }).ofObject("SHAPE"))
)
);
diagram.model = new go.Model([
{ fig: "RoundedTopRectangle" },
{ fig: "RoundedTopRectangle", p1: 0 },
{ fig: "RoundedTopRectangle", p1: 3 },
{ fig: "RoundedTopRectangle", p1: 10 },
{ fig: "RoundedTopRectangle", p1: 50 },
{ fig: "RoundedTopRectangle", p1: 250 },
{ fig: "RoundedBottomRectangle" },
{ fig: "RoundedBottomRectangle", p1: 0 },
{ fig: "RoundedBottomRectangle", p1: 3 },
{ fig: "RoundedBottomRectangle", p1: 10 },
{ fig: "RoundedBottomRectangle", p1: 50 },
{ fig: "RoundedBottomRectangle", p1: 250 }
]);
請注意Shape.parameter1屬性（綁定到“p1”屬性的數據）如何控制角的舍入程度。每個圖形的定義根據幾何體的實際大小限制圓度。您可以通過調整最后一個形狀的大小來查看效果 - 如果形狀變大，則p1 == 250的形狀上的曲線可能很大。
=====================================================
想要購買GoJS正版授權的朋友可以。
更多精彩內容，敬請關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線