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 是一款功能强大的矢量图编辑器，集成了众多实用的功能，可以帮助用户轻松创建、编辑和展示各种矢量图像。在使用本软件时，需要掌握一些基础操作技巧，并深入学习一些高级技术，这样才能更好地发挥其优势，提高自己的工作效率。