流程图控件GoJS教程：如何制作影像（一）-控件新闻-慧都网

流程图控件GoJS教程：如何制作影像（一）

翻译|使用教程|编辑：杨鹏连|2020-09-10 10:11:25.060|阅读 284 次

概述：GoJS具有用于创建图像的两个功能：Diagram.makeImageData，它输出一个Base64图像数据串，和Diagram.makeImage，这是一个方便的功能调用Diagram.makeImageData并返回一个新HTMLImageElement与图像数据作为其源。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

相关链接：

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

GoJS具有用于创建图像的两个功能：Diagram.makeImageData，它输出一个Base64图像数据串，和Diagram.makeImage，这是一个方便的功能调用Diagram.makeImageData并返回一个新HTMLImageElement与图像数据作为其源。这两个函数具有相同的单个参数，即JavaScript对象，其中包含几个可定义的属性，在文档中进行了枚举。

该页面几乎与制作SVG上的页面相同，该页面显示了如何渲染SVG元素而不是PNG图像。

流程图控件GoJS教程：如何制作影像（一）

不带参数或使用空的属性对象调用makeImage会生成与图的视口大小相同的图像。

myDiagram.makeImage（）;

使用“ scale”属性设置为1的对象调用makeImage会生成包含整个图的图像，而不仅仅是视口中可见的区域。但是，将修剪文档边界周围的空白区域。

myDiagram.makeImage（{
   scale：1
}）;

设置比例尺属性将创建一个比例尺图像，该图像正好足以容纳该图。下图以2的比例创建。

myDiagram.makeImage（{
   scale：2
}）;

通过设置makeImage的size选项创建以下图像。请注意，画布是均匀缩放的，任何多余的空间都放在图像的底部或右侧。

myDiagram.makeImage（{
   size：new go.Size（100，100）
}）;

通过设置makeImage的size选项也可以创建以下图像，但仅设置宽度。高度将是统一包含图表所需的任何大小。

myDiagram.makeImage（{
   size：new go.Size（100，NaN）
}）;

零件选项允许我们指定要绘制的零件的可迭代集合。如果您只想制作图的一部分的图像，例如选择节点，这将很有用。

  myPartsList = new go.List（）;
  myPartsList.add（myDiagram.findNodeForKey（“ Beta”））;
  myPartsList.add（myDiagram.findNodeForKey（“ Delta”））;

myDiagram.makeImage（{
   parts：myPartsList
}）;

或仅绘制链接：

myDiagram.makeImage（{
   parts：myDiagram.links
}）;

流程图控件GoJS教程：如何制作影像（一）

未完待续......

想要购买GoJS正版授权，或了解更多产品信息请点击

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@hmdbvip.cn

文章转载自：

上一篇：Dynamic Web TWAIN开发指南：自定义动态Web TWAIN对象下一篇：JavaScript图表工具FusionCharts入门教程(36)：帕累托图

永利最大(官方)网站

在线采购

中文文档库

试用/Demo下载

开发社群