翻譯|使用教程|編輯:吳園園|2020-01-09 09:30:07.373|閱讀 502 次
概述:用戶通常通過單擊來手動選擇Part,然后通過在后臺單擊或按Esc鍵取消選擇它們。您可以通過設(shè)置Part.isSelected來以編程方式選擇零件。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
GoJS是一款功能強大,快速且輕量級的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖,且極大地簡化您的JavaScript / Canvas 程序。
數(shù)據(jù)綁定
選擇任何節(jié)點,然后單擊“添加”按鈕。請注意,該圖是如何自動以樹狀布局的。
像所有Part一樣,裝飾件也支持數(shù)據(jù)綁定。如果裝飾的零件具有數(shù)據(jù)綁定(即,如果Part.data不為空),則該零件的所有裝飾也將綁定到同一數(shù)據(jù)對象。
diagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse),
$(go.Shape, "RoundedRectangle", { fill: "lightgray", strokeWidth: 2 },
new go.Binding("stroke", "color")),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key")),
{
selectionAdornmentTemplate:
$(go.Adornment, "Auto",
$(go.Shape,
{ fill: null, stroke: "dodgerblue", strokeWidth: 6 },
new go.Binding("stroke", "color")),
$(go.Placeholder)
) // end Adornment
}
);
var nodeDataArray = [
{ key: "Alpha", loc: "0 0", color: "blue" },
{ key: "Beta", loc: "200 50", color: "red" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.selectCollection(diagram.nodes);
注意每個裝飾物與選定節(jié)點的data.color具有相同的顏色。
選擇外觀變化
添加選擇裝飾不是視覺上指示已選擇零件的唯一方法。您還可以修改零件中一個或多個對象的外觀。
一種方法是使用數(shù)據(jù)綁定。在這里,我們的數(shù)據(jù)綁定Shape.fill到Part.isSelected財產(chǎn)與轉(zhuǎn)換器功能將布爾值設(shè)置為顏色字符串或刷子。我們還關(guān)閉了常規(guī)的矩形藍色選擇裝飾。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ selectionAdorned: false }, // don't bother with any selection adornment
new go.Binding("location", "loc", go.Point.parse),
$(go.Shape, "RoundedRectangle", { fill: "lightgray", strokeWidth: 2 },
// when this Part.isSelected changes value, change this Shape.fill value:
new go.Binding("fill", "isSelected", function(sel) {
if (sel) return "cyan"; else return "lightgray";
}).ofObject("")), // The object named "" is the root visual element, the Node itself
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha", loc: "0 0" },
{ key: "Beta", loc: "200 50" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.select(diagram.findNodeForKey("Beta"));
現(xiàn)在,當(dāng)您選擇一個節(jié)點時,其背景顏色將變?yōu)榍嗌?
通常,當(dāng)Part.isSelected的值更改時,您可以執(zhí)行代碼來修改Part 。在此示例中,我們將具有與先前示例相同的副作用。
function onSelectionChanged(node) {
var icon = node.findObject("Icon");
if (icon !== null) {
if (node.isSelected)
icon.fill = "cyan";
else
icon.fill = "lightgray";
}
}
diagram.nodeTemplate =
$(go.Node, "Auto",
{ selectionAdorned: false, // don't bother with any selection adornment
selectionChanged: onSelectionChanged }, // executed when Part.isSelected has changed
new go.Binding("location", "loc", go.Point.parse),
$(go.Shape, "RoundedRectangle",
{ name: "Icon", fill: "lightgray", strokeWidth: 2 }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha", loc: "0 0" },
{ key: "Beta", loc: "200 50" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.select(diagram.findNodeForKey("Beta"));
在此類事件處理程序中可以執(zhí)行的操作受到一些限制:您不應(yīng)選擇或取消選擇任何部分,也不應(yīng)在圖中添加或刪除任何部分。
====================================================
想要購買GoJS正版授權(quán)的朋友可以
有關(guān)產(chǎn)品的最新消息和最新資訊,歡迎掃描關(guān)注下方微信公眾號

本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:GoJS