GoJS如何制作影像

Wesley13
• 阅读 420

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

GoJS具有用于创建图像的两个功能:Diagram.makeImageData,它输出一个Base64图像数据串,和Diagram.makeImage,这是一个方便的功能调用Diagram.makeImageData并返回一个新HTMLImageElement与图像数据作为其源。这两个函数具有相同的单个参数,即JavaScript对象,其中包含几个可定义的属性,在文档中进行了枚举。
该页面几乎与制作SVG上的页面相同,该页面显示了如何渲染SVG元素而不是PNG图像。

GoJS如何制作影像

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

myDiagram.makeImage();

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

myDiagram.makeImage({ scale: 1 });

GoJS如何制作影像

设置比例尺属性将创建一个比例缩放的图像,该图像恰好足以容纳该图。下图以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 });

GoJS如何制作影像

或者只是简单地绘制链接:

myDiagram.makeImage({ parts:myDiagram.links });

GoJS如何制作影像

同时设置缩放比例和尺寸将创建一个图像,该图像将被专门缩放并裁剪为给定的尺寸,如下图所示。

myDiagram.makeImage({ scale: 1.5, size: new go.Size(100,100) });

GoJS如何制作影像

我们可能需要一个非常大的缩放图像,该图像的大小受到限制,我们可以使用maxSize属性来限制一个或两个尺寸。下图应用了非常大的比例,但是水平尺寸受到限制,因此将发生一些水平裁剪。
maxSize的默认值为go.Size(2000, 2000),并且指定go.Size(600, NaN)等效于指定go.Size(600, 2000)。如果我们不想在高度上裁剪,我们可以写go.Size(600, Infinity)。

myDiagram.makeImage({ scale:9, maxSize:new go.Size(600,NaN) });

同时设置位置和大小会创建一个图表图像,该图像专门定位并裁剪为给定的大小。设置位置但未设置比例尺时,比例尺默认为1。

myDiagram.makeImage({ position: new go.Point(20,20), size: new go.Size(50,50) });

将背景设置为CSS颜色字符串将用给定的颜色替换透明的Diagram背景。

myDiagram.makeImage({ size:new go.Size(NaN,250), background:“ rgba( 0,255,0,0.5 )” //半透明的绿色背景 });

GoJS如何制作影像

在下面的代码中,我们使用文档边界将Diagram分成四个相等的部分,从而在每个部分中制作出四个图像。通过这种方式,我们可以为分页,制作图库或打印目的准备图像。创建的四个图像如下所示。

var d = myDiagram.documentBounds; var halfWidth = d.width / 2; var halfHeight = d.height / 2; img = myDiagram.makeImage({ position: new go.Point(d.x, d.y), size: new go.Size(halfWidth,halfHeight) }); addImage(img); // Adds the image to a DIV below

img = myDiagram.makeImage({
        position: new go.Point(d.x + halfWidth, d.y),
        size: new go.Size(halfWidth,halfHeight)
      });
addImage(img);

img = myDiagram.makeImage({
        position: new go.Point(d.x, d.y+ halfHeight),
        size: new go.Size(halfWidth,halfHeight)
      });
addImage(img);

img = myDiagram.makeImage({
        position: new go.Point(d.x + halfWidth, d.y + halfHeight),
        size: new go.Size(halfWidth,halfHeight)
      });
addImage(img);

GoJS如何制作影像

图像类型

我们可以设置参数对象的类型和详细信息属性,以检索不同种类的图像。唯一受广泛支持的类型是“ image / jpeg”。jpeg的详细信息通过使用0到1之间的值(包括0和1)来确定其质量。Jpegs通常不用于图表,因为它们的有损压缩会导致文本不可读。

下图是输出的jpeg。请注意透明背景如何变为黑色,因为jpeg格式不支持alpha透明,并且HTML5画布的默认状态是完全透明的黑色像素rgba(0,0,0,0)。

myDiagram.makeImage({ scale:1, type:“ image / jpeg” });

GoJS如何制作影像

下图是使用指定的AntiqueWhite背景创建的jpeg。

myDiagram.makeImage({ scale: 1, background: "AntiqueWhite", type: "image/jpeg" });

GoJS如何制作影像

下图是创建的jpeg(具有AntiqueWhite背景)和details选项,但质量很低。

myDiagram.makeImage({ scale: 1, background: "AntiqueWhite", type: "image/jpeg", details: 0.05 });

下载图像

如果您希望用户下载图像,则无需涉及Web服务器。请参阅样本“ 最小斑点”。请注意,该示例仅下载单个图像。
如果用户可以接受该选择,建议您使用SVG下载图像。该样本位于最小SVG处。

本文转载自慧都科技, 欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
浅梦一笑 浅梦一笑
2个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
技术小男生 技术小男生
2个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi /etc/profile2:按字母键i进入编辑模式,在最底部添加内容: JAVAHOME/opt/jdk1.8.0152 CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jar PATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、 请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。 创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现 接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿 吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
小森森 小森森
2个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本 欢迎添加左边的微信一起探讨!项目地址:](https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n) \2. Bug修复更新日历 2. 情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意), \ \ 和 注意
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
> MemFire Cloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
Android So动态加载 优雅实现与原理分析
> 背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载. ![](https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png) 点击上方“蓝字”关注我
helloworld_28799839 helloworld_28799839
2个月前
常用知识整理
# Javascript ## 判断对象是否为空 ```js Object.keys(myObject).length === 0 ``` ## 经常使用的三元运算 > 我们经常遇到处理表格列状态字段如 `status` 的时候可以用到 ``` vue