network导出图片
代码：
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2022-04-18 14:44:05
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-05-05 16:29:34
*/
import React, {
useEffect, useState } from 'react'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
const [network, setnetwork] = useState({
})
const [src, setsrc] = useState("")
const init = () => {
var box = new twaver.ElementBox();
var network = new twaver.vector.Network(box);
setnetwork(network)
network.invalidateElementUIs();
network.adjustBounds({
x: 0, y: 0, width: 500, height: 500 });
document.getElementById("testID").appendChild(network.getView());
var autoLayouter = new twaver.layout.AutoLayouter(box);
network.setScrollBarVisible(false)
var from1 = new twaver.Node();
from1.setName('from1');
box.add(from1);
var to = new twaver.Node();
to.setName('To');
box.add(to);
var from2 = new twaver.Node();
from2.setName('from2');
box.add(from2);
var from3 = new twaver.Node();
from3.setName('from3');
box.add(from3);
var from4 = new twaver.Node();
from4.setName('from4');
box.add(from4);
var link = new twaver.Link(from1, to);
var link2 = new twaver.Link(from2, to);
var link3 = new twaver.Link(from3, to);
var link4 = new twaver.Link(from4, to);
link.setName('Link');
link2.setName('link2');
link3.setName('link3');
link4.setName('link4');
box.add(link);
box.add(link2);
box.add(link3);
box.add(link4);
autoLayouter.doLayout('symmetry', function () {
network.zoomOverview(false);
});
}
useEffect(init, [])
const exportFun = () => {
var canvas;
if (network.getCanvasSize) {
//canvas = network.toCanvas(network.getCanvasSize().width/5, network.getCanvasSize().height/5);
canvas = network.toCanvas(400, 400);
} else {
canvas = network.toCanvas(network.getView().scrollWidth, network.getView().scrollHeight);
}
if (twaver.Util.isIE) {
} else {
var Imgsrc = canvas.toDataURL("image/png");
var link = document.createElement('a')
setsrc(Imgsrc)
link.href = Imgsrc
console.log(Imgsrc)
link.download = "imgName"
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
return (
<>
<p style={
{
fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
<ul style={
{
fontSize: "20px", paddingLeft: "50px" }}>
<li>导出img</li>
<button onClick={
exportFun}>点击，导出network pic</button>
<img style={
{
width: "200px", height: "200px" }} src={
src}></img>
</ul>
{
/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
<div id="testID" style={
{
width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
</>
)
}
export default Demo
主要就是利用twaver自带的方法转成canvas对象。
if (network.getCanvasSize) {
//canvas = network.toCanvas(network.getCanvasSize().width/5, network.getCanvasSize().height/5);
canvas = network.toCanvas(400, 400);
} else {
canvas = network.toCanvas(network.getView().scrollWidth, network.getView().scrollHeight);
}
然后将canvas变成base64，在页面显示并导出：
const exportFun = () => {
var canvas;
if (network.getCanvasSize) {
//canvas = network.toCanvas(network.getCanvasSize().width/5, network.getCanvasSize().height/5);
canvas = network.toCanvas(400, 400);
} else {
canvas = network.toCanvas(network.getView().scrollWidth, network.getView().scrollHeight);
}
if (twaver.Util.isIE) {
} else {
var Imgsrc = canvas.toDataURL("image/png");
var link = document.createElement('a')
setsrc(Imgsrc)
link.href = Imgsrc
console.log(Imgsrc)
link.download = "imgName"
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
学习参考：TWaver Documents