这篇文章主要介绍“GoJs中导出图片或SVG实现的方法是什么”，在日常操作中，相信很多人在GoJs中导出图片或SVG实现的方法是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”GoJs中导出图片或SVG实现的方法是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
导出图片和SVG的使用
导出图片和导出SVG相似,只是调用的生成方法不同。而生成图片有两种方法分别为
makeImage和
makeImageData。而生成
SVG只有
makeSvg方法。其准备工作沿用之前的数据。添加生成
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);导出图片的使用方法
生成图片有两种方法分别为
makeImage和
makeImageData。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图像数据就可以了。