翻譯|使用教程|編輯:楊鵬連|2020-09-15 11:30:18.960|閱讀 483 次
概述:在此博客文章中,我們將說明如何在JavaScript圖中以編程方式平移和縮放。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
MindFusion.Diagramming for WinForms是一個能幫助你創(chuàng)建工作流和進程圖表的.NET控件;數(shù)據(jù)庫實體關系圖表;組織圖表;對象層次和關系圖表;圖表和樹。它是基于對象-圖表框,表格和箭頭類型,將其歸類分派給其他并結合成復雜的結構。該控件提供超過預先定義的50多種圖表框,如自定義設計樣式和對圖表框著色等。MindFusion.Diagramming for WinForms現(xiàn)已加入在線訂購,Standard Single Developer版本原價2848現(xiàn)在搶購立享優(yōu)惠只需2345,立即查看詳情>>
點擊下載MindFusion.Diagramming for WinForms最新試用版
我們將構建一個包含50個隨機節(jié)點的圖,并以編程方式縮放和平移該圖。這是最終圖的屏幕截圖:
 
 
一.項目設置
我們添加了對MindFusion.Diagramming.js和MindFusion.Common.js文件的引用。我們還添加了對另一個名為MouseEvents.js的文件的引用。這是我們的代碼隱藏文件。
	<script src="MindFusion.Common.js" type="text/javascript"></script> src="MindFusion.Common.js" type="text/javascript"></script>
<script src="MindFusion.Diagramming.js" type="text/javascript"></script><script src="MindFusion.Diagramming.js" type="text/javascript"></script>
<script src="MouseEvents.js" type="text/javascript"></script><script src="MouseEvents.js" type="text/javascript"></script>
在網(wǎng)頁的正文中,我們創(chuàng)建一個Canvas元素,并為其分配一個ID。這很重要,因為我們將在代碼中引用Canvas
	<div style="width: 100%; height: 100%; overflow: auto;"> style="width: 100%; height: 100%; overflow: auto;">
    <canvas id="diagram_canvas" width="2100" height="2100"><canvas id="diagram_canvas" width="2100" height="2100">
        This page requires a browser that supports HTML 5 Canvas element.
    </canvas></canvas>
</div></div>
在我們稱為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方法創(chuàng)建Diagram類的實例。所述的setBounds方法確定圖表的繪圖區(qū)域的尺寸。如果此大小大于“畫布”的大小,該圖將自動顯示滾動條。請注意,只有當圖的區(qū)域大于畫布時,我們才可以使用平移。
我們使用Diagram類的一些設置來自定義應用程序:
diagram.setDefaultShape(“ Rectangle”);。setDefaultShape (“ Rectangle” ); diagram.setRouteLinks(true);。setRouteLinks (true ); diagram.setRoundedLinks(true);。setRoundedLinks (true ); diagram.setShowGrid(false);。setShowGrid (false );鏈接將被路由和舍入,并且不會渲染網(wǎng)格。
三.圖表項目
我們使用Factory類的createShapeNode方法創(chuàng)建圖節(jié)點。該工廠類作為一個實例,可通過在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,然后根據(jù)隨機原理從三個畫筆中選擇一個畫筆,并在數(shù)組中對其進行初始化。每個第七個形狀都稍小一些–由setBounds方法設置,該方法以Rect作為參數(shù),該尺寸略小于創(chuàng)建形狀節(jié)點時使用的Rect實例。
節(jié)點之間的連接器是使用Factory的createDiagramLink方法創(chuàng)建的。我們循環(huán)遍歷所有50個節(jié)點,并將每個節(jié)點與圖節(jié)點集合中隨機抽取的節(jié)點連接。該集合可通過Diagram類的節(jié)點屬性獲得:
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方法自定義鏈接的外觀。我們選擇“圓形”形狀作為每個鏈接的頭部。
我們創(chuàng)建了具有相同邊界的圖表項目,這意味著它們彼此重疊。排列它們的最佳方法是使用JsDiagram提供的一種自動布局算法。它們是MindFusion.Graphs命名空間的成員–您可以檢查其余部分。在我們的示例中,我們選擇了LayeredLayout,它提供了很好的結果。我們將其方向設置為LayoutDirection。我們還設置了一些其他屬性來調(diào)節(jié)節(jié)點距離,層距離等:
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);所有布局都適用通過的安排法圖,是以布局的一個實例作為參數(shù)。
四.平移和縮放
我們將通過處理標準DOM事件來實現(xiàn)平移和縮放。第一個是“ 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值計算的。您可以通過除以較小或較大的數(shù)字來命令縮放量。重要的是,我們在事件參數(shù)上調(diào)用preventDefault(),以超過畫布對wheel事件的默認響應。
通過處理Canvas的mousedown和mouseup DOM事件來實現(xiàn)平移。
/* 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。這是默認行為,用鼠標拖動可創(chuàng)建新形狀,而在現(xiàn)有的DiagramShape -s 之間拖動則創(chuàng)建DiagramLink -s。
這樣我們的樣品就準備好了。
關于JavaScript繪圖:此本地JavaScript庫為開發(fā)人員提供了創(chuàng)建和自定義任何類型的圖,決策樹,流程圖,類層次結構,圖,家譜樹,BPMN圖等的能力。該控件提供了豐富的事件集,眾多的自定義選項,動畫,圖形操作,樣式和主題。您有100多個預定義節(jié)點,表節(jié)點和15多種自動布局算法。通過//mindfusion.eu/javascript-diagram.html了解有關JavaScript制圖的更多信息。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務必注明出處、不得修改原文相關鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: