JavaScript图中以编程方式平移和缩放

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购，Standard Single Developer版本原价2848现在抢购立享优惠只需2345，立即查看详情>>

点击下载MindFusion.Diagramming for WinForms最新试用版

我们将构建一个包含50个随机节点的图，并以编程方式缩放和平移该图。这是最终图的屏幕截图：

我们将针对JavaScript使用MindFusion图表库。

一.项目设置

我们添加了对MindFusion.Diagramming.js和MindFusion.Common.js文件的引用。我们还添加了对另一个名为MouseEvents.js的文件的引用。这是我们的代码隐藏文件。

在网页的正文中，我们创建一个Canvas元素，并为其分配一个ID。这很重要，因为我们将在代码中引用Canvas

style="width: 100%; height: 100%; overflow: auto;"> This page requires a browser that supports HTML 5 Canvas element.

二.图表设置

在我们称为MouseEvents.js的代码隐藏文件中，我们使用DOMContentLoaded事件初始化该图。

document.addEventListener(“DOMContentLoaded”, function ().addEventListener(“DOMContentLoaded”, function ()
{{
// create a Diagram component that wraps the “diagram_canvas” canvas// create a Diagram component that wraps the “diagram_canvas” canvas
diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, document.getElementById(“diagram_canvas”));= MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, document.getElementById(“diagram_canvas”));
diagram.setBounds(new Rect(5, 5, 2000, 1000));.setBounds(new Rect(5, 5, 2000, 1000));
我们使用AbstractionLayer类的createControl方法创建Diagram类的实例。所述的setBounds方法确定图表的绘图区域的尺寸。如果此大小大于“画布”的大小，该图将自动显示滚动条。请注意，只有当图的区域大于画布时，我们才可以使用平移。

我们使用Diagram类的一些设置来自定义应用程序：

diagram.setDefaultShape（“ Rectangle”）;。setDefaultShape （“ Rectangle” ）;
diagram.setRouteLinks（true）;。setRouteLinks （true ）;
diagram.setRoundedLinks（true）;。setRoundedLinks （true ）;
diagram.setShowGrid（false）;。setShowGrid （false ）;
链接将被路由和舍入，并且不会渲染网格。

三.图表项目

我们使用Factory类的createShapeNode方法创建图节点。该工厂类作为一个实例，可通过在getFactory（）方法： 对（VAR I = 0;我<50; i ++在）

{{
    var colorIndex = Math.floor(Math.random() * 3);  var colorIndex = Math.floor(Math.random() * 3);  
    var shape = diagram.getFactory().createShapeNode(new Rect(136, 36, 20, 10));var shape = diagram.getFactory().createShapeNode(new Rect(136, 36, 20, 10));
    shape.setBrush({ type: 'SolidBrush', color: colors[colorIndex] });.setBrush({ type: 'SolidBrush', color: colors[colorIndex] });
    if(i % 3   == 0)if(i % 3   == 0)
        shape.setShape('Ellipse');.setShape('Ellipse');
    else else 
        shape.setShape('Rectangle');.setShape('Rectangle');
    if( i % 7 == 0)if( i % 7 == 0)
    {{
        shape.setBounds(new Rect(136, 36, 16, 8)); .setBounds(new Rect(136, 36, 16, 8)); 
    }}

    shape.setText("Node " + (i + 1).toString());.setText("Node " + (i + 1).toString());
    shape.setTextColor("white");.setTextColor("white");
}}

我们将第三个形状制作为Ellipse，然后根据随机原理从三个画笔中选择一个画笔，并在数组中对其进行初始化。每个第七个形状都稍小一些–由setBounds方法设置，该方法以Rect作为参数，该尺寸略小于创建形状节点时使用的Rect实例。
节点之间的连接器是使用Factory的createDiagramLink方法创建的。我们循环遍历所有50个节点，并将每个节点与图节点集合中随机抽取的节点连接。该集合可通过Diagram类的节点属性获得：

diagram.nodes.forEach(function(node).nodes.forEach(function(node)
{{
var nodeIndex = Math.floor(Math.random() * 50); var nodeIndex = Math.floor(Math.random() * 50);

var node2 = diagram.nodes[nodeIndex];var node2 = diagram.nodes[nodeIndex];
var link = diagram.getFactory().createDiagramLink(node, node2);var link = diagram.getFactory().createDiagramLink(node, node2);
link.setHeadShape("Circle");.setHeadShape("Circle");

})})
我们通过setHeadShape方法自定义链接的外观。我们选择“圆形”形状作为每个链接的头部。
我们创建了具有相同边界的图表项目，这意味着它们彼此重叠。排列它们的最佳方法是使用JsDiagram提供的一种自动布局算法。它们是MindFusion.Graphs命名空间的成员–您可以检查其余部分。在我们的示例中，我们选择了LayeredLayout，它提供了很好的结果。我们将其方向设置为LayoutDirection。我们还设置了一些其他属性来调节节点距离，层距离等：

var layout = new MindFusion.Graphs.LayeredLayout(); layout = new MindFusion.Graphs.LayeredLayout();
layout.direction = MindFusion.Graphs.LayoutDirection.LeftToRight;.direction = MindFusion.Graphs.LayoutDirection.LeftToRight;
layout.siftingRounds = 0;.siftingRounds = 0;
layout.nodeDistance = 8;.nodeDistance = 8;
layout.layerDistance = 8;.layerDistance = 8;
diagram.arrange(layout);.arrange(layout);
所有布局都适用通过的安排法图，是以布局的一个实例作为参数。

四.平移和缩放

我们将通过处理标准DOM事件来实现平移和缩放。第一个是“ wheel”事件，我们将其附加到图表canvas元素：

var dgrm = document.getElementById(‘diagram_canvas’); dgrm = document.getElementById(‘diagram_canvas’);

dgrm.addEventListener(‘wheel’, function(e).addEventListener(‘wheel’, function(e)
{{
var zoom = diagram.getZoomFactor();var zoom = diagram.getZoomFactor();
zoom -= e.deltaY / 10;-= e.deltaY / 10;
if (zoom > 10)if (zoom > 10)
diagram.setZoomFactor(zoom);.setZoomFactor(zoom);

e.preventDefault(); // do not scroll.preventDefault(); // do not scroll

});});
我们使用Diagram的getZoomFactor和setZoomFactor方法来操纵缩放比例。缩放步骤是基于事件args的deltaY值计算的。您可以通过除以较小或较大的数字来命令缩放量。重要的是，我们在事件参数上调用preventDefault（），以超过画布对wheel事件的默认响应。
通过处理Canvas的mousedown和mouseup DOM事件来实现平移。

/* events fired on the draggable target */
dgrm.addEventListener(‘mousedown’, function(e).addEventListener(‘mousedown’, function(e)
{{
if( e.ctrlKey)if( e.ctrlKey)
diagram.setBehavior(MindFusion.Diagramming.Behavior.Pan);.setBehavior(MindFusion.Diagramming.Behavior.Pan);

}, false);}, false);

dgrm.addEventListener(‘mouseup’, function(e).addEventListener(‘mouseup’, function(e)
{{
if( e.ctrlKey)if( e.ctrlKey)
diagram.setBehavior(MindFusion.Diagramming.Behavior.LinkShapes);.setBehavior(MindFusion.Diagramming.Behavior.LinkShapes);

}, false);}, false);
如果要平移图，我们只需使用setBehavior方法更改图的行为即可。这些选项是“ 行为”枚举的成员。当用户单击图并按下Ctrl键时，我们将图的行为更改为“ Pan”。当鼠标抬起但按下Ctrl键时，我们将行为放回LinkShapes。这是默认行为，用鼠标拖动可创建新形状，而在现有的DiagramShape -s 之间拖动则创建DiagramLink -s。
这样我们的样品就准备好了。

关于JavaScript绘图：此本地JavaScript库为开发人员提供了创建和自定义任何类型的图，决策树，流程图，类层次结构，图，家谱树，BPMN图等的能力。该控件提供了丰富的事件集，众多的自定义选项，动画，图形操作，样式和主题。您有100多个预定义节点，表节点和15多种自动布局算法。通过https://mindfusion.eu/javascript-diagram.html了解有关JavaScript制图的更多信息。