文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

GoJs中导出图片或者SVG实现示例详解

2023-05-18 20:11

关注

前言

在可视化图形的分析中,对基础图形进行增删改之后。除了保存修改之后的可视化数据之外。还需要保存为图片或者svg进行分享。

导出图片和SVG的使用

导出图片和导出SVG相似,只是调用的生成方法不同。而生成图片有两种方法分别为makeImagemakeImageData。而生成SVG只有makeSvg方法。其准备工作沿用之前的数据。添加生成imagesvg的按钮。

//html
<button @click="image">image</button>
<button @click="svg">svg</button>
//data
nodes: [
    { key: "1", color: "#99FFFF", text: "三国", figure: "Rectangle" },
    { key: "1-1", color: "#FF0000", text: "魏", figure: "Circle" },
    { key: "1-2", color: "#FFFF66", text: "蜀", figure: "Circle" },
    { key: "1-3", color: "#0000FF", text: "吴", figure: "Circle" },
],
links: [
    {
      from: "1",
      to: "1-1",
    },
    {
      from: "1",
      to: "1-2",
    },
    {
      from: "1",
      to: "1-3",
    },
],
//methods
this.myDiagram = $$(go.Diagram, "myDiagramDiv", {
    allowDelete: true,
    layout: $$(go.TreeLayout),
    });
this.myDiagram.nodeTemplate = $$(
go.Node,
"Vertical",
$$(
  go.Shape,
  "Circle",
  { width: 30, height: 30, name: "ICON" },
  new go.Binding("fill", "color"),
  new go.Binding("figure", "figure")
),
$$(go.TextBlock,new go.Binding("text", "text"))
);
this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);

导出图片的使用方法

生成图片有两种方法分别为makeImagemakeImageData。makeImage生成的是图表的标签内容,makeImageData生成的则是Base64图像数据。其使用方法分别如下

makeImage的使用

image(){
    this.myDiagram.makeImage({
        scale: 1.0,//放大倍数
        parts: this.myDiagram.links,//选中导出的图中元器件
        background: "#FFF",//导出图片的背景颜色
        type: "image/jpeg",//导出图片的格式
        detail: 1.0,//导出图片的详细程度
        size: new go.Size(NAN,NAN),//导出图片的尺寸
        position: new go.Point(0,0),导出图片的左上角在画布上的位置
        callback: img => {
            let a = document.createElement("a");
            a.style = "display: none";
            a.href = img.src;
            a.download = "导出图片";
            a.click();
        }
    })
},

通过makeImage中可以配置属性,保证导出图片的格式和样式。其中parts属性为导出图片中显示画布中的元器件,其后面的value值可以通过前面文章中的查询节点和连线的方法获取,其中上面示例中this.myDiagram.links为所有的连线。

makeImageData的使用

image(){
    let blob = this.myDiagram.makeImageData({
        returnType: "blob",
        scale: 1.0,
        detail: 10.0,
        background: "#FFF",
        callback: this.myCallback,
    });
},
myCallback(blob) {
  let url = window.URL.createObjectURL(blob);
  let filename = "img.png";
  let a = document.createElement("a");
  a.style = "display: none";
  a.href = url;
  a.download = "导出图片";
  let file = new File([blob], filename, { type: "png" });
  // IE 11
  if (window.navigator.msSaveBlob !== undefined) {
    window.navigator.msSaveBlob(blob, filename);
    return;
  }
  document.body.appendChild(a);
  requestAnimationFrame(function () {
    a.click();
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  });
},

其中makeImageData中的属性配置和makeImage一样。但是makeImageData生成的Base64图像数据。因此通过window.URL.createObjectURL创建图片的url链接。然后下载图片。

导出SVG的使用方法

导出SVG图片的是通过makeSvg来进行配置

svg(){
    let svg = this.myDiagram.makeSvg({ 
        scale: 1.0,//放大倍数
        parts: this.myDiagram.links,//选中导出的图中元器件
        background: "#FFF",//导出图片的背景颜色
        type: "image/jpeg",//导出图片的格式
        detail: 1.0,//导出图片的详细程度
        size: new go.Size(NAN,NAN),//导出图片的尺寸
        position: new go.Point(0,0),//导出图片的左上角在画布上的位置
    });
    let svgstr = new XMLSerializer().serializeToString(svg);
    let blob = new Blob([svgstr], { type: "image/svg+xml" });
    this.myCallback(blob);
},
myCallback(blob) {
  let url = window.URL.createObjectURL(blob);
  let filename = "img.png";
  let a = document.createElement("a");
  a.style = "display: none";
  a.href = url;
  a.download = "导出图片";
  let file = new File([blob], filename, { type: "png" });
  // IE 11
  if (window.navigator.msSaveBlob !== undefined) {
    window.navigator.msSaveBlob(blob, filename);
    return;
  }
  document.body.appendChild(a);
  requestAnimationFrame(function () {
    a.click();
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  });
},

导出SVG的属性配置和导出图片一致,其调用的回调函数也是可以通用,因为返回的是svg标签数据,只需要把makeSvg返回的svg对象转换成blob图像数据就可以了。

总结

导出图片和导出svg是两种不同的方式,只不过都是以图像的形式进行显示。因为现在浏览器也是可以打开svg的,因此推荐使用导出svg。因为在可视化图形数据量比较大的时候,svg能够保持不失真,并且放大缩小显示更加清晰。

以上就是GoJs中导出图片或者SVG实现示例详解的详细内容,更多关于GoJs导出图片SVG的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯