介绍Graphicsjs，一个功能强大的轻量级图形库-js教程-PHP中文网

在本文中，我想向您介绍 GraphicsJS，这是一个基于 SVG 的全新强大的开源 JavaScript 绘图库（对于旧版 IE 版本，它具有 VML 备用方案）。我将首先快速介绍其基础知识，然后借助两个简短而精彩的示例来展示该库的功能：第一个示例完全关于艺术，第二个示例说明如何在不到 50 行代码中编写一个简单的益智艺术游戏。

关键要点

GraphicsJS 是一个新的、强大的、开源的 JavaScript 绘图库，基于 SVG，并为旧版 IE 版本提供 VML 备用方案。它轻量级且灵活，具有丰富的 JavaScript API。
该库由 AnyChart 发布，至少已在 AnyChart 的专有产品中使用三年来渲染图表，确保其稳健性。与 AnyChart 的 JavaScript 绘图库不同，GraphicsJS 可免费用于商业和非营利项目。
GraphicsJS 具有跨浏览器兼容性，支持 Internet Explorer 6.0 、Safari 3.0 、Firefox 3.0 和 Opera 9.5 。它在旧版 IE 版本中以 VML 渲染，在所有其他浏览器中以 SVG 渲染。
该库允许将图形和动画结合起来，示例包括动画篝火、旋转星系、降雨以及可玩的 15 拼图游戏。它还包含详尽的文档和全面的 API 参考。
GraphicsJS 库可用于创建交互式 Web 应用程序，其功能包括图层、渐变、图案、事件处理和性能优化。它还支持复杂的动画和转换，使其成为开发人员的多功能选择。

为什么选择 GraphicsJS

有很多库可以帮助开发人员使用 SVG：Raphaël、Snap.svg 和 BonsaiJS，仅举几例最佳库。这些库各有优缺点，但对其进行彻底比较将是另一篇文章的主题。本文是关于 GraphicsJS 的，因此让我解释一下它有什么优点和特殊之处。

Introducing GraphicsJS, a Powerful Lightweight Graphics Library

首先，GraphicsJS 轻量级且具有非常灵活的 JavaScript API。它实现了许多丰富的文本功能，以及一个与浏览器特定 HTML DOM 实现分离的虚拟 DOM。

其次，它是一个新的开源 JavaScript 库，于去年秋季由 AnyChart（全球领先的交互式数据可视化软件开发商之一）发布。AnyChart 至少已使用 GraphicsJS 三年（自 AnyChart 7.0 发布以来）在其专有产品中渲染图表，因此 GraphicsJS 已完全经过实战测试。（免责声明：我是 AnyChart 的研发主管和 GraphicsJS 的首席开发人员）

第三，与 AnyChart 的 JavaScript 绘图库不同，GraphicsJS 可免费用于商业和非营利项目。它在 GitHub 上根据 Apache 许可证提供。

第四，GraphicsJS 具有跨浏览器兼容性，支持 Internet Explorer 6.0 、Safari 3.0 、Firefox 3.0 和 Opera 9.5 。它在旧版 IE 版本中以 VML 渲染，在所有其他浏览器中以 SVG 渲染。

最后，GraphicsJS 允许您将图形和动画完美地结合起来。查看其主要图库，其中包含动画篝火、旋转星系、降雨、程序生成的叶子、可玩的 15 拼图游戏等等。GraphicsJS 在其详尽的文档和全面的 API 参考中包含更多示例。

GraphicsJS 基础知识

要开始使用 GraphicsJS，您需要引用该库并为绘图创建一个块级 HTML 元素：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>GraphicsJS Basic Example</title>    
 </head>
 <body>
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   <🎜>
   <🎜>
 </body>
 </html>

登录后复制

然后，您应该创建一个舞台并在其中绘制一些内容，例如矩形、圆形或其他形状：

 // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);

登录后复制

以下是 CodePen 上的示例，我们在其中更进一步并绘制了死亡圣器符号。

我们的第一幅杰作

填充、描边和图案填充

可以使用填充设置和描边设置对任何形状或路径进行着色。所有内容都有描边（边框），但只有形状和闭合路径才有填充。填充和描边设置非常丰富，您可以将线性或圆形渐变用于填充和描边。此外，线条可以是虚线的，并且支持具有多种平铺模式的图像填充。但这都是您几乎可以在任何库中都能找到的相当标准的内容。使 GraphicsJS 具有特殊性的是其网格和图案填充功能，它不仅允许您直接使用 32 种(!) 可用的网格填充图案，还允许您轻松创建由形状或文本组成的自定义图案。

现在，让我们看看究竟可以实现什么！我将绘制一幅男人站在房子附近的简笔画，然后用不同的图案和颜色填充来增强它。为了简单起见，让我们把它做成一幅幼稚的艺术画（并尽量不要涉及到艺术粗野）。就是这样：

 // 创建舞台
 var stage = acgraph.create('stage-container');

 // 绘制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 绘制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 绘制一个人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

登录后复制

查看 CodePen 上的结果。

如您所见，我们现在正在使用变量——所有在舞台上绘制内容的方法都会返回对所创建对象的引用，并且此链接可用于更改或删除对象。

还要注意链式调用（例如 stage.path().moveTo(320, 330).lineTo(320, 340);）如何在 GraphicsJS 中随处可见，它有助于缩短代码。链式调用应谨慎使用，但如果应用得当，它确实使代码更紧凑且更易于阅读。

现在，让我们把这个涂色页交给一个孩子，让他们来涂色。因为即使是孩子也能掌握以下技术：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>GraphicsJS Basic Example</title>    
 </head>
 <body>
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   <🎜>
   <🎜>
 </body>
 </html>

登录后复制

这就是我们示例现在的外观。

现在，我们有一幅高地人在苏格兰短裙旁边，他站在他的砖砌城堡附近，屋顶是稻草的图片。我们甚至可以冒险说这确实是一件我们想要获得版权的艺术品。让我们使用基于自定义文本的图案填充来做到这一点：

 // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);

登录后复制

如您所见，这很容易做到：您创建一个文本对象的实例，然后在舞台上形成一个图案，并将文本放入图案中。

查看 CodePen 上的彩色版权房屋/graphicsjs。

在不到 50 行代码中创建一个益智艺术游戏

在本文的下一部分，我想向您展示如何在不到 50 行代码中使用 GraphicsJS 创建一个类似 Cookie Clicker 的游戏。

游戏名称为“风中清扫街道”，玩家扮演一名清道夫的角色，在秋天的多风下午清扫街道。该游戏使用 GraphicsJS 图库中程序生成的叶子示例中的一些代码。

您可以在 CodePen（或文章结尾）上查看完成的游戏。

图层、zIndex 和虚拟 DOM

我们首先创建一个舞台（如前所述），然后声明一些初始变量：

 // 创建舞台
 var stage = acgraph.create('stage-container');

 // 绘制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 绘制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 绘制一个人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

登录后复制

对于这个游戏，我们将使用图层——GraphicsJS 中用于对元素进行分组的对象。如果您想对元素应用类似的更改（例如转换），则必须对元素进行分组。您可以在暂停模式下更改图层（稍后将详细介绍），这可以提高性能和用户体验。

在此演示中，我们使用图层功能来帮助我们将叶子组合在一起，并避免它们覆盖标签（它告诉我们清扫了多少叶子）。为此，我们创建一个标签，然后调用 stage.layer 方法，该方法创建舞台绑定图层。我们将此图层的 zIndex 属性设置为低于标签的 zIndex 属性。

 // 给图片着色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 砖墙
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋顶
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));

登录后复制

执行此操作后，无论我们在图层中创建多少叶子，我们都可以确保它们不会覆盖文本。

转换

接下来，让我们添加一个函数来绘制我们的叶子。这将使用方便的 GraphicsJS 转换 API，该 API 允许您移动、缩放、旋转和剪切元素和元素组。当与图层和虚拟 DOM 结合使用时，这是一个非常强大的工具。

 // 169 是版权符号的字符代码
 var  text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2);
 var  pattern_font = stage.pattern(text.getBounds());
 pattern_font.addChild(text);
 // 用图案填充整个图像
 frame.fill(pattern_font);

登录后复制

您会看到每个路径的创建方式相同，但随后会进行转换。这将产生非常漂亮的随机叶子图案。

处理事件

GraphicsJS 中的任何对象、舞台和图层都可以处理事件。支持的事件的完整列表可在 EventType API 中找到。舞台有四个特殊的事件来控制渲染。

在这个游戏示例中，我们正在使用附加到叶子对象的事件侦听器，以便用户将鼠标悬停在它们上时，它们会一个接一个地消失。为此，请将以下代码添加到 drawLeaves 函数的底部，在 return 语句之前：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>GraphicsJS Basic Example</title>    
 </head>
 <body>
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   <🎜>
   <🎜>
 </body>
 </html>

登录后复制

在这里，我们还可以看到我们正在使用图层来计算叶子。

 // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);

登录后复制

请注意，我们实际上并没有在这里存储叶子的数量。由于我们将叶子添加到特定图层并从中删除叶子，因此这使我们能够跟踪我们有多少个子元素（以及因此还剩下多少叶子）。

GraphicsJS 提供了一个虚拟 DOM，它是 HTML DOM 的抽象，轻量级且与浏览器特定的 SVG/VML 实现分离。它对于执行许多伟大的事情非常有用，例如跟踪所有对象和图层，对组应用转换以及在帮助下优化渲染允许我们跟踪和控制渲染过程的方法。

性能优化

虚拟 DOM 以及事件处理程序允许 GraphicsJS 用户控制渲染。性能文章可以帮助您了解这些内容之间的关系。

在游戏中生成叶子时，我们需要在添加新叶子时暂停渲染，并且只有在所有更改完成后才恢复渲染：

 // 创建舞台
 var stage = acgraph.create('stage-container');

 // 绘制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 绘制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 绘制一个人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

登录后复制

这种处理新元素的方法使新叶子几乎可以立即出现。

最后，通过调用 shakeTree() 来启动所有内容。

 // 给图片着色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 砖墙
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋顶
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));

登录后复制