Visual Paradigm教程：如何使用Open API為你的圖表生成圖像映射
圖像映射功能支持用戶創(chuàng)建指向HTML文檔中特定部分圖片的超級鏈接。使用Open API你可以將Visual Paradigm的圖表導入為圖像文件，并生成帶有圖像映射的HTML文檔。用戶只需要點擊圖表圖像就可以跳轉到你所定義的URL地址。在本文中，將為你展示如何將圖表導出為圖像，并為其生成圖像映射。
獲取輸出文件夾
我們首先通過文件選擇器JFileChooser來獲取用戶的輸出文件夾，并指定它為只接收文件夾。
// Create file chooser for picking the output directory
JFileChooser fileChooser = ApplicationManager.instance().getViewManager().createJFileChooser();
fileChooser.setDialogTitle("Specify output folder");
fileChooser.setDialogType(JFileChooser.DIRECTORIES_ONLY);
int returnValue = fileChooser.showSaveDialog(null);
// if user selected a folder then proceed to genrate the image map
if (returnValue == JFileChooser.APPROVE_OPTION) {
File outputFolder = fileChooser.getSelectedFile();
outputFolder.mkdirs();
將圖表導出為圖像
當我們獲取到輸出文件夾后，需要將當前的圖表導出為圖像文件并保存到用戶指定的位置。我們可以使用ModelConvertionManager.exportActiveDiagramAsImage來執(zhí)行導出操作，導出的圖像會進行修整以填充周圍的空白空間。這意味著我們從圖表中獲取的圖形坐標不會體現(xiàn)到實際導出圖像的位置。為了獲得修整的偏移量我們在exportActiveDiagramAsImage中引入了java.awt.Point對象。在導出圖像之后，Point對象將會由偏移的X和Y構成，我們可以使用它來計算輸出圖像中元素的移動位置。
// Create point object to retrieve the trimmed offset between actual diagram and exported diagram
Point offsetPoint = new Point();
// Obtain the ModelConvertionManager
ModelConvertionManager convertionManager = ApplicationManager.instance().getModelConvertionManager();
// Ask ModelConvertionManager to export active diagram into SVG image to the output folder.
// The Point object will filled with offset value after export diagram to image.
convertionManager.exportActiveDiagramAsImage(new File(outputFolder.getAbsolutePath() + File.separator + "image.png"),
ModelConvertionManager.IMAGE_TYPE_PNG, offsetPoint);
生成帶有圖像映射的HTML
在將圖表導入為圖像之后，我們可以開始生成HTML內容和圖像映射，我們將通過創(chuàng)建StringBuffer來保存HTML和圖像映射內容。
StringBuffer sb = new StringBuffer();
sb.append("<html><head></head><body>\n");
sb.append("<img src=\"image.png\" usemap=\"#imgmap\"/>\n");
sb.append("<map name=\"imgmap\">\n");
對于我們從圖表中獲得的每個圖形，我們會為它創(chuàng)建一個矩形的映射區(qū)域，然后通過減去偏移量來獲取圖像的實際位置。
// Loop through all shapes in active diagram
IShapeUIModel[] shapes = diagram.toShapeUIModelArray();
if (shapes != null && shapes.length > 0) {
for (IShapeUIModel shape : shapes) {
// Create a map area for each shape.
// Remember to reduce the trimmed offset when export diagram to image
sb.append("<area shape=\"rect\" coords=\"" + (shape.getX() - offsetPoint.getX())
+ "," + (shape.getY() - offsetPoint.getY())
+ "," + (shape.getX() + shape.getWidth() - offsetPoint.getX())
+ "," + (shape.getY() + shape.getHeight() - offsetPoint.getY())
+ "\" href=\"https://www.visual-paradigm.com\">\n");
}
}
// Close the image map and HTML
sb.append("</map>\n");
sb.append("</body></html>");
最后我們?yōu)檩敵鑫募A編寫HTML。
// Write the HTML with image map to file
File htmlFile = new File(outputPath + File.separator + "index.html");
try {
FileOutputStream fout = new FileOutputStream(htmlFile);
fout.write(sb.toString().getBytes());
fout.close();
} catch (Exception e) {
e.printStackTrace();
}
示例插件
本文中附帶的示例插件將演示如何將當前活動的圖表導出為帶有圖像映射的HTML。在你將插件部署到Visual Paradigm之后，你可以點擊應用程序工具欄中的plugin按鈕來觸發(fā)它。
然后，它會帶來文件選擇器功能以指定輸出文件夾。
之后，包含圖像映射的HTML連同圖表圖像將會被導出到這個指定的文件夾里。
相關：示例插件的下載地址>>
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
提供CDN加速/云存儲服務
客服熱線