VSdxmac 程序詳解

VSdxmac是一款非常優秀的矢量圖編輯器，它的主要功能是可以對各種矢量圖像進行精細的編輯處理，包括基本的線條繪製、形狀繪製、文本繪製、圖像導入等。在使用這款軟件時，需要掌握一些基礎操作技巧，本文將從多個方面進行詳細介紹。

一、基礎操作

1、打開和關閉文件

<button onclick="openFile()">打開文件</button>

<button onclick="closeFile()">關閉文件</button>

function openFile() {
    document.getElementById("myFile").click();
}

function closeFile() {
    diagram.close();
}

2、創建新文件

var diagram = new mxGraph(document.getElementById('graphContainer'));

var defaultParent = diagram.getDefaultParent();

function newFile() {
    diagram.clear();
}

3、保存當前文件

<button onclick="saveFile()">保存文件</button>

function saveFile() {
    var encoded = encodeURIComponent(mxUtils.getPrettyXml(diagram.getModel()));
    var filename = prompt("請輸入文件名：");
    if (filename && filename.length > 0) {
        var url = "/save/" + filename + ".xml";
        var req = mxUtils.load(url, "format=xml&xml=" + encoded);
    }
}

4、畫線

var cell1 = diagram.insertVertex(defaultParent, null, 'Start', 20, 20, 80, 30);

var cell2 = diagram.insertVertex(defaultParent, null, 'End', 250, 20, 80, 30);

var edge1 = diagram.insertEdge(defaultParent, null, '', cell1, cell2);

edge1.geometry.setTerminalPoint(new mxPoint(50, 50), true);

edge1.geometry.setTerminalPoint(new mxPoint(250, 50), false);

5、畫形狀

var cell1 = diagram.insertVertex(defaultParent, null, '', 20, 20, 120, 40, 'shape=ellipse');

var cell2 = diagram.insertVertex(defaultParent, null, '', 200, 20, 120, 40, 'shape=rectangle');

var edge1 = diagram.insertEdge(defaultParent, null, '', cell1, cell2);

二、高級操作

1、移動元素

var layout = new mxHierarchicalLayout(diagram);

layout.execute(defaultParent);

2、調整元素大小

var resize = new mxCellResize(diagram);

resize.execute(cell1, new mxRectangle(0, 0, 200, 100));

3、添加文本

var text = diagram.insertVertex(defaultParent, null, 'Hello World', 20, 20, 80, 30);

text.setStyle('fontFamily=Helvetica;fontSize=12;align=center;verticalAlign=middle;');

text.setConnectable(false);

4、嵌入圖像

var image = new Image();

image.src = 'image.png';

diagram.insertVertex(defaultParent, null, '', 20, 20, image.width, image.height, 'shape=image;image=' + image.src);

三、快捷鍵和自定義工具欄

1、快捷鍵

var undoManager = new mxUndoManager();

var listener = function(sender, evt) {
    undoManager.undoableEditHappened(evt.getProperty('edit'));
};

diagram.getModel().addListener(mxEvent.UNDO, listener);

var undo = function() {
    undoManager.undo();
};

var redo = function() {
    undoManager.redo();
};

mxEvent.addListener(document, 'keydown', function(evt) {
    if (evt.keyCode == 90 && (evt.ctrlKey || evt.metaKey)) {
        if (evt.shiftKey) {
            redo();
        } else {
            undo();
        }
    }
});

2、自定義工具欄

var toolbar = document.getElementById('toolbar');

var createButton = function(icon, funct) {
    var button = document.createElement('button');
    button.className = 'mxButton';
    button.style.width = '24px';
    button.style.height = '24px';
    button.style.border = 'none';
    button.style.backgroundImage = 'url(' + icon + ')';
    button.style.backgroundRepeat = 'no-repeat';
    button.style.backgroundPosition = 'center';
    button.style.cursor = 'pointer';
    button.onclick = funct;
    toolbar.appendChild(button);
    return button;
};

createButton('images/new.png', newFile);

createButton('images/save.png', saveFile);

createButton('images/undo.png', undo);

createButton('images/redo.png', redo);

四、插件和第三方庫

1、mxClient庫

<script src="mxClient.js"></script>

2、mxGraph插件

<script src="mxGraph.js"></script>

3、Layout插件

<script src="layouts/mxFastOrganicLayout.js"></script>

4、Preview插件

<script src="extensions/mxGraphHandler.js"></script>

5、Export插件

<script src="extensions/mxCellOverlay.js"></script>

五、總結

VSdxmac 是一款功能強大的矢量圖編輯器，集成了眾多實用的功能，可以幫助用戶輕鬆創建、編輯和展示各種矢量圖像。在使用本軟件時，需要掌握一些基礎操作技巧，並深入學習一些高級技術，這樣才能更好地發揮其優勢，提高自己的工作效率。