HTML5：现代网络的基石。如今，在创建交互式图像时，SVG 和 Canvas 通常是首选技术——Flash 已被遗忘，Silverlight 则成为网络边缘罕见的独角兽，很少有人记得第三方插件。
每种技术的优缺点都有详细记录，但简而言之，SVG 更适合创建和处理交互式元素。这是因为 SVG 是一种基于 XML 的矢量格式，当使用 <svg></svg> 标签将图像加载到页面中时，其中的每个元素都可以在 SVG DOM 中使用。
在本文中，我想向您介绍 GraphicsJS，这是一个基于 SVG 的全新强大的开源 JavaScript 绘图库（对于旧版 IE 版本，它具有 VML 备用方案）。我将首先快速介绍其基础知识，然后借助两个简短而精彩的示例来展示该库的功能：第一个示例完全关于艺术，第二个示例说明如何在不到 50 行代码中编写一个简单的益智艺术游戏。
有很多库可以帮助开发人员使用 SVG：Raphaël、Snap.svg 和 BonsaiJS，仅举几例最佳库。这些库各有优缺点，但对其进行彻底比较将是另一篇文章的主题。本文是关于 GraphicsJS 的，因此让我解释一下它有什么优点和特殊之处。
首先，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，您需要引用该库并为绘图创建一个块级 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 行代码中使用 GraphicsJS 创建一个类似 Cookie Clicker 的游戏。
游戏名称为“风中清扫街道”，玩家扮演一名清道夫的角色，在秋天的多风下午清扫街道。该游戏使用 GraphicsJS 图库中程序生成的叶子示例中的一些代码。
您可以在 CodePen（或文章结尾）上查看完成的游戏。
我们首先创建一个舞台（如前所述），然后声明一些初始变量：
// 创建舞台
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'));查看 CodePen 上的街道清扫工/graphicsjs。
向 HTML5 的转变改变了网络。当涉及到现代 Web 应用程序甚至简单的网站时，我们经常会遇到需要图像处理的任务。虽然不可能找到在每种情况下都能很好工作的解决方案，但您应该考虑 GraphicsJS 库。它是开源的、健壮的，具有出色的浏览器支持和许多使其有趣、方便且当然有用的功能。
我很乐意在下面的评论中听到您对 GrphicsJS 的反馈。您是否已经在使用它？您是否会考虑将其用于新项目？我很想知道原因，或者为什么不使用它。我还正在编写主要 JavaScript 绘图库列表以及将比较和对比所有这些库的文章。也可以随意指出您希望在那里看到的功能。
GraphicsJS 因其强大且轻量级的特性而脱颖而出。它是一个强大的库，允许开发人员以高精度和高性能绘制和动画化任何图形。与其他库不同，GraphicsJS 提供了一套全面的功能，包括图层、渐变、图案等等，而不会影响速度或效率。它还支持所有现代浏览器，使其成为开发人员的多功能选择。
要开始使用 GraphicsJS，您需要在 HTML 文件中包含 GraphicsJS 库。您可以从官方网站下载该库，也可以使用 CDN。包含该库后，您可以通过调用该库提供的适当函数和方法来开始创建图形。
是的，GraphicsJS 旨在轻松处理复杂的动画。它提供了一套丰富的动画功能，包括缓动函数、延迟和持续时间设置。您可以动画化图形的任何属性，例如其位置、大小、颜色等等。这使得 GraphicsJS 成为创建交互式和动态图形的强大工具。
GraphicsJS 旨在与所有现代浏览器兼容，包括 Chrome、Firefox、Safari 和 Internet Explorer。它使用 SVG 和 VML 进行渲染，所有这些浏览器都支持它们。这确保您的图形在不同的平台和设备上看起来一致且性能良好。
使用 GraphicsJS 创建渐变很简单。您可以使用渐变方法定义线性或径向渐变，指定颜色和位置，然后将渐变应用于任何图形。这使您可以轻松创建丰富多彩的图形。
是的，GraphicsJS 提供了一套事件处理功能，允许您创建交互式图形。您可以将事件侦听器附加到任何图形，使您可以响应用户的操作，例如点击、鼠标移动等等。这使得 GraphicsJS 成为创建交互式 Web 应用程序的绝佳选择。
是的，GraphicsJS 支持图层，允许您将图形组织到单独的组中。每个图层都可以独立操作，从而更易于管理复杂的图形。您还可以控制每个图层的可见性和 z 顺序，从而对图形进行细粒度控制。
GraphicsJS 提供了几项功能，可以帮助您优化图形。例如，您可以使用裁剪方法隐藏指定区域之外的图形部分，从而减少所需的渲染量。您还可以使用缓存方法来存储图形的渲染输出，从而提高经常重新绘制图形的性能。
虽然 GraphicsJS 不是专门为创建图表和图形而设计的，但其强大的绘图和动画功能使其可以创建任何类型的图形，包括图表和图形。您可以使用库的方法来绘制线条、曲线、矩形、圆形等等，从而创建各种图表类型。
是的，GraphicsJS 是一个免费的开源库。您可以在项目中免费使用它。该库也得到了积极维护，确保它与最新的 Web 标准和技术保持同步。
以上是介绍Graphicsjs，一个功能强大的轻量级图形库的详细内容。更多信息请关注PHP中文网其他相关文章！
