GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解

更新時(shí)間：2023年05月05日 10:26:09 作者：沅芷湘蘭

這篇文章主要為大家介紹了GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

在可視化圖形的分析中，對(duì)基礎(chǔ)圖形進(jìn)行增刪改之后。除了保存修改之后的可視化數(shù)據(jù)之外。還需要保存為圖片或者svg進(jìn)行分享。

導(dǎo)出圖片和SVG的使用

導(dǎo)出圖片和導(dǎo)出SVG相似,只是調(diào)用的生成方法不同。而生成圖片有兩種方法分別為makeImage和makeImageData。而生成SVG只有makeSvg方法。其準(zhǔn)備工作沿用之前的數(shù)據(jù)。添加生成image和svg的按鈕。

//html
<button @click="image">image</button>
<button @click="svg">svg</button>
//data
nodes: [
    { key: "1", color: "#99FFFF", text: "三國(guó)", 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);

導(dǎo)出圖片的使用方法

生成圖片有兩種方法分別為makeImage和makeImageData。makeImage生成的是圖表的標(biāo)簽內(nèi)容，makeImageData生成的則是Base64圖像數(shù)據(jù)。其使用方法分別如下

makeImage的使用

image(){
    this.myDiagram.makeImage({
        scale: 1.0,//放大倍數(shù)
        parts: this.myDiagram.links,//選中導(dǎo)出的圖中元器件
        background: "#FFF",//導(dǎo)出圖片的背景顏色
        type: "image/jpeg",//導(dǎo)出圖片的格式
        detail: 1.0,//導(dǎo)出圖片的詳細(xì)程度
        size: new go.Size(NAN,NAN),//導(dǎo)出圖片的尺寸
        position: new go.Point(0,0),導(dǎo)出圖片的左上角在畫布上的位置
        callback: img => {
            let a = document.createElement("a");
            a.style = "display: none";
            a.href = img.src;
            a.download = "導(dǎo)出圖片";
            a.click();
        }
    })
},

通過(guò)makeImage中可以配置屬性，保證導(dǎo)出圖片的格式和樣式。其中parts屬性為導(dǎo)出圖片中顯示畫布中的元器件，其后面的value值可以通過(guò)前面文章中的查詢節(jié)點(diǎn)和連線的方法獲取，其中上面示例中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 = "導(dǎo)出圖片";
  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圖像數(shù)據(jù)。因此通過(guò)window.URL.createObjectURL創(chuàng)建圖片的url鏈接。然后下載圖片。

導(dǎo)出SVG的使用方法

導(dǎo)出SVG圖片的是通過(guò)makeSvg來(lái)進(jìn)行配置

svg(){
    let svg = this.myDiagram.makeSvg({ 
        scale: 1.0,//放大倍數(shù)
        parts: this.myDiagram.links,//選中導(dǎo)出的圖中元器件
        background: "#FFF",//導(dǎo)出圖片的背景顏色
        type: "image/jpeg",//導(dǎo)出圖片的格式
        detail: 1.0,//導(dǎo)出圖片的詳細(xì)程度
        size: new go.Size(NAN,NAN),//導(dǎo)出圖片的尺寸
        position: new go.Point(0,0),//導(dǎo)出圖片的左上角在畫布上的位置
    });
    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 = "導(dǎo)出圖片";
  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);
  });
},

導(dǎo)出SVG的屬性配置和導(dǎo)出圖片一致，其調(diào)用的回調(diào)函數(shù)也是可以通用，因?yàn)榉祷氐氖?code>svg標(biāo)簽數(shù)據(jù)，只需要把makeSvg返回的svg對(duì)象轉(zhuǎn)換成blob圖像數(shù)據(jù)就可以了。

總結(jié)

導(dǎo)出圖片和導(dǎo)出svg是兩種不同的方式，只不過(guò)都是以圖像的形式進(jìn)行顯示。因?yàn)楝F(xiàn)在瀏覽器也是可以打開svg的，因此推薦使用導(dǎo)出svg。因?yàn)樵诳梢暬瘓D形數(shù)據(jù)量比較大的時(shí)候，svg能夠保持不失真，并且放大縮小顯示更加清晰。

以上就是GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解的詳細(xì)內(nèi)容，更多關(guān)于GoJs導(dǎo)出圖片SVG的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: