流程图控件GoJS教程:如何制作影像(一)

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

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

GoJS最新版

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

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

流程图控件GoJS教程:如何制作影像(一)

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

myDiagram.makeImage();

流程图控件GoJS教程:如何制作影像(一)使用“ scale”属性设置为1的对象调用makeImage会生成包含整个图的图像,而不仅仅是视口中可见的区域。但是,将修剪文档边界周围的空白区域。
myDiagram.makeImage({   scale:1});

流程图控件GoJS教程:如何制作影像(一)设置比例尺属性将创建一个比例尺图像,该图像正好足以容纳该图。下图以2的比例创建。
myDiagram.makeImage({   scale:2});

流程图控件GoJS教程:如何制作影像(一)通过设置makeImage的size选项创建以下图像。请注意,画布是均匀缩放的,任何多余的空间都放在图像的底部或右侧。
myDiagram.makeImage({   size:new go.Size(100,100)});

流程图控件GoJS教程:如何制作影像(一)通过设置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});

流程图控件GoJS教程:如何制作影像(一)或仅绘制链接:
myDiagram.makeImage({   parts:myDiagram.links});

流程图控件GoJS教程:如何制作影像(一)

未完待续……


想要购买GoJS正版授权,或了解更多产品信息请点击【咨询在线客服】

流程图控件GoJS教程:如何制作影像(一)

标签:

来源:慧都

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2020年8月7日
下一篇 2020年8月7日

相关推荐

发表回复

登录后才能评论