GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解
前言
在可視化圖形的分析中,對基礎(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: "三國", 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(); } }) },
通過makeImage
中可以配置屬性,保證導(dǎo)出圖片的格式和樣式。其中parts
屬性為導(dǎo)出圖片中顯示畫布中的元器件,其后面的value
值可以通過前面文章中的查詢節(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ù)。因此通過window.URL.createObjectURL
創(chuàng)建圖片的url鏈接。然后下載圖片。
導(dǎo)出SVG的使用方法
導(dǎo)出SVG圖片的是通過makeSvg來進(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
對象轉(zhuǎn)換成blob
圖像數(shù)據(jù)就可以了。
總結(jié)
導(dǎo)出圖片和導(dǎo)出svg
是兩種不同的方式,只不過都是以圖像的形式進(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的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js尾調(diào)用優(yōu)化的實(shí)現(xiàn)
這篇文章主要介紹了js尾調(diào)用優(yōu)化的實(shí)現(xiàn),尾調(diào)用(Tail Call)是函數(shù)式編程的一個(gè)重要概念,本文介紹它的含義和用法。感興趣的可以了解一下2019-05-05Bootstrap 模態(tài)框多次顯示后臺提交多次BUG的解決方法
本篇文章主要介紹了Bootstrap 模態(tài)框多次顯示后臺提交多次BUG的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12基于Bootstrap的后臺管理面板 Bootstrap Metro Dashboard
這篇文章主要介紹了基于Bootstrap的后臺管理面板:Bootstrap Metro Dashboard,對Bootstrap的后臺管理面板感興趣的小伙伴們可以參考一下2016-06-06利用JavaScript腳本實(shí)現(xiàn)滾屏效果的方法
這篇文章主要介紹了利用JavaScript腳本實(shí)現(xiàn)滾屏效果的方法,即一個(gè)公告欄顯示般的效果,需要的朋友可以參考下2015-07-07webuploader分片上傳的實(shí)現(xiàn)代碼(前后端分離)
這篇文章主要介紹了webuploader分片上傳的實(shí)現(xiàn)代碼(前后端分離),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09