引入强大的轻量级图形库GraphicsJS

最新推荐文章于 2024-05-08 09:48:20 发布

dingshi7798

最新推荐文章于 2024-05-08 09:48:20 发布

阅读量767

点赞数

文章标签： javascript 人工智能 ViewUI

HTML5是现代网络的基础。如今，在创建交互式图像时，SVG和Canvas通常是首选的技术-Flash已被人们遗忘，Silverlight是一种稀有的独角兽，分布在Web郊区，很少有人记得第三者插件。

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

在本文中，我想向您介绍GraphicsJS ，这是一个新的强大的开源JavaScript绘图库，它基于SVG（对于旧IE版本，具有VML后备功能）。我将首先简要介绍它的基础知识，然后借助两个简短而引人入胜的示例展示该库的功能：第一个是关于艺术的，而第二个是说明如何编写简单时间的代码少于50行的杀手级艺术游戏。

为什么选择GraphicsJS

有很多库可以帮助开发人员使用SVG： Raphaël ， Snap.svg和BonsaiJS仅举几例。这些中的每一个都有其优点和缺点，但是它们的全面比较将是另一篇文章的主题。本文都是关于GraphicsJS的，所以让我解释一下它的优点和特殊之处。

GraphicsJS，AnyChart提供的轻量级且功能强大的基于SVG的JavaScript图形库

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

其次，它是一个新的开放源代码JavaScript库，由互动数据可视化领域的全球领先软件开发商之一AnyChart 于去年秋天发布。自从AnyChart 7.0发行以来，AnyChart一直使用GraphicsJS在其专有产品中渲染图表至少三年了，因此GraphicsJS已进行了全面的测试。（免责声明，我是AnyChart的研发负责人和GraphicsJS的首席开发人员）

第三，与AnyChart的JavaScript图表库不同，GraphicsJS可以在商业和非盈利项目中免费使用。在Apache许可下，它可以在GitHub上使用。

第四，GraphicsJS是跨浏览器兼容的，支持Internet Explorer 6.0 +，Safari 3.0 +，Firefox 3.0+和Opera 9.5+。它在较旧的IE版本中以VML呈现，在所有其他浏览器中以SVG呈现。

最后，GraphicsJS允许您将图形和动画组合在一起，以达到最佳效果。查看其主要画廊，其中包括动画篝火，旋转的星系，大雨，程序生成的树叶，可播放的15拼图等等。 GraphicsJS在其广泛的文档和全面的API参考中包含许多其他示例。

GraphicsJS基础

要开始使用GraphicsJS，您需要引用该库并为图形创建一个块级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>

    <script src="https://cdn.anychart.com/js/latest/graphics.min.js"></script>
    <script>
      // GraphicsJS code here
    </script>
  </body>
</html>

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

// create a stage
var stage = acgraph.create('stage-container');
// draw a rectangle
var stage.rect(25, 50, 350, 300);

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

我们的第一部杰作

填充，描边和图案填充

可以使用填充设置和笔触设置为任何形状或路径着色。一切都有笔触（边界），但只有形状和闭合路径具有填充。填充和描边设置非常丰富，您可以对填充和描边进行线性或圆形渐变。同样，可以将虚线折断，并支持具有几种平铺模式的图像填充。但这几乎是所有库中都能找到的非常标准的东西。使GraphicsJS与众不同的是其填充和图案填充功能，它不仅使您可以立即使用32（！）可用填充填充图案之一，而且还可以轻松地创建由形状或文本构成的自己的图案。

现在，让我们看看到底有什么可能！我将画一个男人站在房子附近的小图，然后用不同的图案和颜色填充对其进行增强。为了简单起见，让我们将其制作成一幅幼稚的艺术图片（并尽量避免陷入art brut ）。它去了：

// create a stage
var stage = acgraph.create('stage-container');

// draw the frame
var frame = stage.rect(25, 50, 350, 300);

// draw the house
var walls = stage.rect(50, 250, 200, 100);
var roof  = stage.path()
  .moveTo(50, 250)
  .lineTo(150, 180)
  .lineTo(250, 250)
  .close();

// draw a man
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上检查结果。

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

还要注意，GraphicsJS中无处不在的链接如何帮助缩短代码。链接（例如stage.path().moveTo(320, 330).lineTo(320, 340); ）应谨慎使用，但如果正确应用，它的确会使代码紧凑且易于阅读。

现在，让我们将此着色页提供给孩子，让他们为其着色。因为甚至一个孩子也可以掌握以下技术：

// color the picture
// fancy frame
frame.stroke(["red", "green", "blue"], 2, "2 2 2");
// brick walls
walls.fill(acgraph.hatchFill('horizontalbrick'));
// straw roof
roof.fill("#e4d96f");
// plaid kilt
kilt.fill(acgraph.hatchFill('plaid'));

这是我们的示例现在的样子。

现在，我们有一张苏格兰短裙的高地人的照片，他正站在他带草屋顶的砖城堡附近。我们甚至可以轻描淡写地说这确实是我们要版权的艺术品 。让我们使用基于文本的自定义图案填充来实现：

// 169 is a char code of the copyright symbol
var  text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2);
var  pattern_font = stage.pattern(text.getBounds());
pattern_font.addChild(text);
// fill the whole image with the pattern
frame.fill(pattern_font);

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

请参阅CodePen上带有 SitePoint（ @SitePoint ）的彩色彩色钢笔房子/ graphicsjs 。

用不到50行代码创建时间杀手艺术游戏

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

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

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

图层，zIndex和虚拟DOM

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

// create stage
var stage = acgraph.create("stage-container");

// color palettes for leaves
var palette_fill = ['#5f8c3f', '#cb9226', '#515523', '#f2ad33', '#8b0f01']; 
var palette_stroke = ['#43622c', '#8e661b', '#393b19', '#a97924', '#610b01'];

// counter
var leavesCounter = 0;

在本游戏中，我们将使用Layer —一个用于对GraphicsJS中的元素进行分组的对象。如果要对元素进行类似的更改（例如转换），则必须将元素分组。处于挂起模式时，您可以更改图层（稍后将进行详细介绍），从而提高性能和用户体验。

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

// create a label to count leaves
var counterLabel = stage.text(10,10, "Swiped: 0", {fontSize: 20});

// a layer for the leaves
var gameLayer = stage.layer().zIndex(counterLabel.zIndex()-1);

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

转变

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

function drawLeaf(x, y) {
  // choose a random color from a palette
  var index = Math.floor(Math.random() * 5);
  var fill = palette_fill[index];
  var stroke = palette_stroke[index];

  // generate random scaling factor and rotation angle
  var scale = Math.round(Math.random() * 30) / 10 + 1;
  var angle = Math.round(Math.random() * 360 * 100) / 100;

  // create a new path (leaf)
  var path = acgraph.path();

  // color and draw a leaf
  path.fill(fill).stroke(stroke, 1, 'none', 'round', 'round');
  var size = 18;
  path.moveTo(x, y)
    .curveTo(x + size / 2, y - size / 2, x + 3 * size / 4, y + size / 4, x + size, y)
    .curveTo(x + 3 * size / 4, y + size / 3, x + size / 3, y + size / 3, x, y);

  // apply random transformations
  path.scale(scale, scale, x, y).rotate(angle, x, y);

  return path; 
};

您会看到，每个路径都是以相同的方式创建的，但是随后被转换了。这导致一个非常好的随机叶子图案。

处理事件

GraphicsJS中的任何对象，阶段和层都可以处理事件。 EventType API中提供了受支持事件的完整列表。阶段有四个特殊事件来控制渲染。

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

path.listen("mouseover", function(){
  path.remove();
  counterLabel.text("Swiped: " + leavesCounter++);
  if (gameLayer.numChildren() < 200) shakeTree(300); 
});

在这里，我们还可以看到我们正在使用该层对叶子进行计数。

if (gameLayer.numChildren() < 200) shakeTree(300);

请注意，我们实际上并未在此处存储叶子数。由于叶子是我们要添加到特定层或从特定层中删除的路径，因此这使我们能够跟踪我们有多少个孩子（因此还有多少个叶子）。

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

性能优化

虚拟DOM以及事件处理程序允许GraphicsJS用户控制渲染。性能文章可以使您了解这些事物之间的关联方式。

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

function shakeTree(n){
  stage.suspend(); // suspend rendering
  for (var i = 0; i < n; i++) {
    var x = Math.random() * stage.width()/2 + 50;
    var y = Math.random() * stage.height()/2 + 50;
    gameLayer.addChild(drawLeaf(x, y)); // add a leaf
  }

  stage.resume(); // resume rendering
}

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

最后，通过调用shakeTree()开始一切。

// shake a tree for the first time
shakeTree(500);

最终结果

请参阅CodePen上的SitePoint （ @SitePoint ）通过wind / graphicsjs开发的Pen 扫街机。

包容性

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

我很高兴在下面的评论中听到您对GrphicsJS的反馈。您已经在使用它了吗？您会考虑将其用于新项目吗？我很想听听为什么，或者为什么不是。我目前还在研究主要的JavaScript绘图库列表，以及一篇将它们进行比较和对比的文章。也可以随时将我指向您希望在其中看到的任何图书馆。

进一步阅读链接

From: https://www.sitepoint.com/introducing-graphicsjs-a-powerful-lightweight-graphics-library/

dingshi7798

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
引入强大的轻量级图形库GraphicsJS

HTML5是现代网络的骨干。而如今，当它涉及到创建交互式图像，SVG和Canvas往往选择的技术 - 闪存已被遗忘，Silverlight是一种罕见的独角兽是在Web郊区驻留，并有少数谁记得第三方插件。每个的利弊是有据可查的，但简而言之，SVG是更好地适用于创建和处理互动元素。这是因为，SVG是基于XML的矢量格式，并且当图像被加载到使用一个页<svg>标签，在其内部的每一...
复制链接

扫一扫