文档彩票走势图>>Visual Paradigm教程>>Visual Paradigm教程：如何使用Open API为你的图表生成图像映射

Visual Paradigm教程：如何使用Open API为你的图表生成图像映射

图像映射功能支持用户创建指向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();

将图表导出为图像

当我们获取到输出文件夹后，需要将当前的图表导出为图像文件并保存到用户指定的位置。我们可以使用来执行导出操作，导出的图像会进行修整以填充周围的空白空间。这意味着我们从图表中获取的图形坐标不会体现到实际导出图像的位置。为了获得修整的偏移量我们在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内容和图像映射，我们将通过创建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");

对于我们从图表中获得的每个图形，我们会为它创建一个矩形的映射区域，然后通过减去偏移量来获取图像的实际位置。

// 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=\"//www.visual-paradigm.com\">\n");
  }
}
// Close the image map and HTML    
sb.append("</map>\n");    
sb.append("</body></html>");

最后我们为输出文件夹编写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。在你之后，你可以点击应用程序工具栏中的plugin按钮来触发它。

从工具栏中触发示例插件

然后，它会带来文件选择器功能以指定输出文件夹。

指定输出文件

之后，包含图像映射的HTML连同图表图像将会被导出到这个指定的文件夹里。

生成图像映射的输出文件夹

彩票走势图

Visual Paradigm教程：如何使用Open API为你的图表生成图像映射

获取输出文件夹

将图表导出为图像

生成带有图像映射的HTML

示例插件

用科技创就卓越

Create excellence with technology