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

翻译|使用教程|编辑:杨鹏连|2020-09-16 11:46:25.510|阅读 13 次

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

# 购买正版开发软件送开发入门教材和电子资料,点击进入了解详情 #

相关链接:

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

点击下载GoJS最新版

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

流程图控件GoJS教程:如何制作影像(二)
myDiagram.makeImage({
  scale: 1.5,
  size: new go.Size(100,100)
});
我们可能需要一个非常大的缩放图像,该图像的大小受到限制,我们可以使用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)
});

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

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

myDiagram.makeImage({
  position: new go.Point(20,20),
  size: new go.Size(50,50)
});
将背景设置为CSS颜色字符串将用给定的颜色替换透明的Diagram背景。
流程图控件GoJS教程:如何制作影像(二)
myDiagram.makeImage({
  size: new go.Size(NaN,250),
  background: "rgba(0, 255, 0, 0.5)" // semi-transparent green background
});

流程图控件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服务器。请参阅样本“Minimal Blob ”。请注意,该示例仅下载单个图像。
如果用户可以接受该选择,建议您使用SVG下载图像。该样本位于最小SVG处。


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



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Northwoods

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
GoJS

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

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat