流程图控件GoJS教程:如何在服务器上创建映像

翻译|使用教程|编辑:杨鹏连|2020-10-26 11:40:58.200|阅读 17 次

概述:对于许多应用程序来说,使用GoJS创建图的图像可能很有用,并且此页面详细介绍了此任务的一些选项。

# 项目交付用正版,省下一台Iphone12 # # 31款JAVA开发必备控件和工具 #

相关链接:

GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

对于许多应用程序来说,使用GoJS创建图的图像可能很有用,并且此页面详细介绍了此任务的一些选项。

Puppeteer

Puppeteer是一个Node库,它提供了高级API来控制无头Chrome。我们可以使用它在服务器端创建图像。如果安装了Node和npm,则可以使用进行安装npm install puppeteer。

以下代码是使用Puppeteer的一个小示例。如果将JavaScript另存为puppet.js,并使用node(node createImage.js)运行它,它将演示如何创建两个图像:一个来自图gojs-screenshot.png,一个来自HTML页面,一个来自page-screenshot.png。样本中的图表代码与最小样本中的代码相同。

// This example loads the GoJS library then adds HTML from scratch and evaluates some JavaScript,
// then creates a screenshot of Diagram with makeImageData, plus a screenshot of the page.

const puppeteer = require('puppeteer');
const fs = require('fs');

const parseDataUrl = (dataUrl) => {
  const matches = dataUrl.match(/^data:(.+);base64,(.+)$/);
  if (matches.length !== 3) {
    throw new Error('Could not parse data URL.');
  }
  return { mime: matches[1], buffer: Buffer.from(matches[2], 'base64') };
};

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Point to a version of go.js, either a local file or one on the web at a CDN
  await page.addScriptTag({
    url: 'https://unpkg.com/gojs'
    // path: '../../release/go.js'
  });

  // Create HTML for the page:
  page.setContent('<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>');

  // Set up a Diagram, and return the result of makeImageData:
  const imageData = await page.evaluate(() => {
    var $ = go.GraphObject.make;

    var myDiagram = $(go.Diagram, "myDiagramDiv",
      {
        "animationManager.isEnabled": false,
        "undoManager.isEnabled": true  // enable undo & redo
      });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text", "key"))
      );

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: "Alpha", color: "lightblue" },
        { key: "Beta", color: "orange" },
        { key: "Gamma", color: "lightgreen" },
        { key: "Delta", color: "pink" }
      ],
      [
        { from: "Alpha", to: "Beta" },
        { from: "Alpha", to: "Gamma" },
        { from: "Beta", to: "Beta" },
        { from: "Gamma", to: "Delta" },
        { from: "Delta", to: "Alpha" }
      ]);

    return myDiagram.makeImageData();
  });

  // Output the GoJS makeImageData as a .png:
  const { buffer } = parseDataUrl(imageData);
  fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');

  // Output a page screenshot
  await page.screenshot({ path: 'page-screenshot.png' });
  await browser.close();
})();
您还可以使用Puppeteer来获取实时HTML页面并执行相同的操作:
// This example loads a web page with a GoJS diagram,
// then creates a screenshot of the Diagram with makeImageData, plus a screenshot of the page.

const puppeteer = require('puppeteer');
const fs = require('fs');

const parseDataUrl = (dataUrl) => {
  const matches = dataUrl.match(/^data:(.+);base64,(.+)$/);
  if (matches.length !== 3) {
    throw new Error('Could not parse data URL.');
  }
  return { mime: matches[1], buffer: Buffer.from(matches[2], 'base64') };
};

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // This does not have to be a page on the web, it can be a localhost page, or file://
  await page.goto('https://gojs.net/samples/orgChartEditor.html', {
    waitUntil: 'networkidle2' // ensures images are loaded
  });


  const imageData = await page.evaluate(() => {
    window.myDiagram.animationManager.stopAnimation();
    return window.myDiagram.makeImageData({
      background: window.myDiagram.div.style.backgroundColor
    });
  });

  // Output the GoJS makeImageData as a .png:
  const { buffer } = parseDataUrl(imageData);
  fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');

  // Output a page screenshot
  await page.screenshot({ path: 'page-screenshot.png' });
  await browser.close();
})();

下载SVG文件

如果您希望用户下载SVG文件,则无需涉及Web服务器。请参阅样本最小SVG。请注意,该示例仅下载一个SVG文件,但是该文件可以覆盖整个文档。


想要购买GoJS正版授权,或了解更多产品信息请点击【咨询在线客服】



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Northwoods

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
GoJS

GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图。