GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图。
<div id="myDiagramDiv"></div>
初始化创建画布
<script>
var $ = go.GraphObject.make;var myDiagram =$(go.Diagram, "myDiagramDiv");
</script>
- Shape:形状——Rectangle(矩形)、RoundedRectangle(圆角矩形),Ellipse(椭圆形),Triangle(三角形),Diamond(菱形),Circle(圆形)等
- TextBlock:文本域(可编辑)
- Picture:图片
- Panel:容器来保存其他Node的集合
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{ selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate },
{ resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
{ rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
new go.Binding("angle").makeTwoWay(),
// the main object is a Panel that surrounds a TextBlock with a Shape
$(go.Panel, "Auto",
{ name: "PANEL" },
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Shape, "Rectangle", // default figure
{
portId: "", // the default port: if no spot on link data, use closest side
fromLinkable: true, toLinkable: true, cursor: "pointer",
fill: "white" // default color
},
new go.Binding("figure"),
new go.Binding("fill")),
$(go.TextBlock,
{
font: "bold 11pt Helvetica, Arial, sans-serif",
stroke: lightText,
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
contextMenu: partContextMenu
},
new go.Binding("text").makeTwoWay())
),
// four small named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false),
{
// handle mouse enter/leave events to show/hide the ports
//鼠标移动 移出节点事件
mouseEnter: function (e, node) {
showSmallPorts(node, true);
},
mouseLeave: function (e, node) {
showSmallPorts(node, false);
}
}
);
事件绑定
var Select_Port = null;
//单机事件
myDiagram.addDiagramListener("ObjectSingleClicked", function (e) {
Select_Port = e.subject.part;
//节点类型的判断处理
if (e.subject.part instanceof go.Node) {
}
});
//右键事件
myDiagram.addDiagramListener("ObjectContextClicked", function (e) {
Select_Port = e.subject.part;
var str = e.stroke;
alert(1);
});
简单罗列使用中的关键点 后续开发完成 补充完整code