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

首页

web前端

js教程

介绍Graphicsjs，一个功能强大的轻量级图形库

尊渡假赌尊渡假赌尊渡假赌

Feb 17, 2025 am 10:42 AM

HTML5：现代网络的基石。如今，在创建交互式图像时，SVG 和 Canvas 通常是首选技术——Flash 已被遗忘，Silverlight 则成为网络边缘罕见的独角兽，很少有人记得第三方插件。

每种技术的优缺点都有详细记录，但简而言之，SVG 更适合创建和处理交互式元素。这是因为 SVG 是一种基于 XML 的矢量格式，当使用 <svg></svg> 标签将图像加载到页面中时，其中的每个元素都可以在 SVG DOM 中使用。

在本文中，我想向您介绍 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'));

最终结果

查看 CodePen 上的街道清扫工/graphicsjs。

结论

向 HTML5 的转变改变了网络。当涉及到现代 Web 应用程序甚至简单的网站时，我们经常会遇到需要图像处理的任务。虽然不可能找到在每种情况下都能很好工作的解决方案，但您应该考虑 GraphicsJS 库。它是开源的、健壮的，具有出色的浏览器支持和许多使其有趣、方便且当然有用的功能。

我很乐意在下面的评论中听到您对 GrphicsJS 的反馈。您是否已经在使用它？您是否会考虑将其用于新项目？我很想知道原因，或者为什么不使用它。我还正在编写主要 JavaScript 绘图库列表以及将比较和对比所有这些库的文章。也可以随意指出您希望在那里看到的功能。

进一步阅读的链接

常规信息
- SVG
- Canvas
- SVG 与 Canvas
库
- GraphicsJS
- Raphaël
- Snap.svg
- BonsaiJS
GraphicsJS
- GitHub 上的 GraphicsJS
- GraphicsJS 文档
- GraphicsJS API 参考

关于 GraphicsJS 的常见问题

GraphicsJS 与其他 JavaScript 图形库有何不同？

GraphicsJS 因其强大且轻量级的特性而脱颖而出。它是一个强大的库，允许开发人员以高精度和高性能绘制和动画化任何图形。与其他库不同，GraphicsJS 提供了一套全面的功能，包括图层、渐变、图案等等，而不会影响速度或效率。它还支持所有现代浏览器，使其成为开发人员的多功能选择。

如何开始使用 GraphicsJS？

要开始使用 GraphicsJS，您需要在 HTML 文件中包含 GraphicsJS 库。您可以从官方网站下载该库，也可以使用 CDN。包含该库后，您可以通过调用该库提供的适当函数和方法来开始创建图形。

我可以使用 GraphicsJS 创建复杂的动画吗？

是的，GraphicsJS 旨在轻松处理复杂的动画。它提供了一套丰富的动画功能，包括缓动函数、延迟和持续时间设置。您可以动画化图形的任何属性，例如其位置、大小、颜色等等。这使得 GraphicsJS 成为创建交互式和动态图形的强大工具。

GraphicsJS 是否与所有浏览器兼容？

GraphicsJS 旨在与所有现代浏览器兼容，包括 Chrome、Firefox、Safari 和 Internet Explorer。它使用 SVG 和 VML 进行渲染，所有这些浏览器都支持它们。这确保您的图形在不同的平台和设备上看起来一致且性能良好。

如何使用 GraphicsJS 创建渐变？

使用 GraphicsJS 创建渐变很简单。您可以使用渐变方法定义线性或径向渐变，指定颜色和位置，然后将渐变应用于任何图形。这使您可以轻松创建丰富多彩的图形。

我可以使用 GraphicsJS 创建交互式图形吗？

是的，GraphicsJS 提供了一套事件处理功能，允许您创建交互式图形。您可以将事件侦听器附加到任何图形，使您可以响应用户的操作，例如点击、鼠标移动等等。这使得 GraphicsJS 成为创建交互式 Web 应用程序的绝佳选择。

GraphicsJS 是否支持图层？

是的，GraphicsJS 支持图层，允许您将图形组织到单独的组中。每个图层都可以独立操作，从而更易于管理复杂的图形。您还可以控制每个图层的可见性和 z 顺序，从而对图形进行细粒度控制。

如何使用 GraphicsJS 优化我的图形？

GraphicsJS 提供了几项功能，可以帮助您优化图形。例如，您可以使用裁剪方法隐藏指定区域之外的图形部分，从而减少所需的渲染量。您还可以使用缓存方法来存储图形的渲染输出，从而提高经常重新绘制图形的性能。

我可以使用 GraphicsJS 创建图表和图形吗？

虽然 GraphicsJS 不是专门为创建图表和图形而设计的，但其强大的绘图和动画功能使其可以创建任何类型的图形，包括图表和图形。您可以使用库的方法来绘制线条、曲线、矩形、圆形等等，从而创建各种图表类型。

GraphicsJS 是否免费使用？

是的，GraphicsJS 是一个免费的开源库。您可以在项目中免费使用它。该库也得到了积极维护，确保它与最新的 Web 标准和技术保持同步。

以上是介绍Graphicsjs，一个功能强大的轻量级图形库的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。