GraphicsJS 入门，一个轻量级的前端图形库

为什么选择GraphicsJS

前端可以选择的svg库，有很多，比如snap.svg或者BonsaiJS当然这些库也是各有优势。而这篇文章主要就是说GraphicsJS，让大家知道他的优势和特点。

• 轻量级，具备灵活的 Javascript API

• 来自AnyChart团队，全球非常出名的可视化团队。

• GraphicsJS 是一个开源项目，无需商业授权

• 对于低版本的浏览器的支持，支持IE6

• 对于图像和动画支持比较好，帮助开发者创建复杂的交互效果

GraphicsJS 基本使用

<style>  
.stage{
  width: 280px;
  height: 280px;
}
</style>

<div class="stage" id="rect1"></div>

 <script src="https://cdn.anychart.com/js/latest/graphics.min.js"></script>


<script>  
 // create a stage
  var stage = acgraph.create('rect1');
  // draw a rectangle
  stage.rect(25, 50, 200, 200);
</script>  
...

`

进一步深入

填充，描边和图案填充

任何的形状和路径都可以使用fill 和 stroke属性来修改起颜色属性，但是只有闭合和路径或者形状，才能够使用fill属性，而且你还可以使用渐变和图片来进行填充。而且GraphicsJS还允许你自己定义填充的图案。 下面我们来实现一个比较复杂的效果，实现一个人挨着一个房子(参考 sitepoints)：

// 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);

如同代码里的实现，所有的绘制都是通过stage里面的方法，而且这条原型链上可以对该对象进行移除和修改。

接下来我们给图形上点色彩。

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;
};

现在的效果类似我们又了一个穿裙子的人，站在城堡的旁边，我们还可以方框的背景填充版权符号，我们可使用自定义填充模版。

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

我们非常轻松的创建一个文本，并且去生成一个填充图案。

Demo效果

接下来我们创建一个简单的交互游戏

游戏非常简单就是用户通过鼠标扫除落叶。鼠标滑过树叶时候，树叶会自动消失。

Layers, zIndex and the Virtual DOM

首先我们创建一些初始化变量

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
}

游戏中我们需要使用layer,这是一个包含多个原色的对象，这些元素最好分成小组，以方便我们进行批量操作。在Demo中我们需要将树叶放在一个组中，避免遮盖了存放奇数的文本，因此我们还需要创建一个label然后使用stage.layer,这样我们通过设置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);

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 任何的对象 图层，都可以处理事件，在这里，你可以查看到支持的事件类型.在这里我们也需要给树叶绑定mouse over的事件，当鼠标滑过的时候，树叶执行函数。

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

优化

绑定事件的virtual dom可以让开发者自己去控制渲染，关于性能优化的建议可以看这里。

为了让我们能过持续看到效果，当树叶数量减少的时候我们需要添加一些上去。

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
}

而该函的用途就是为了让我们可以持续的添加新叶子。

效果如图:

DEMO效果

小结

H5彻底颠覆了web,而我们也开始接触到大量对图形的操作需求，这个时候不妨试一试graph.js 作为一个开源项目，它小巧而又强大，拥有足够多的API去支持i 你的工作，并且你无需担心浏览器兼容性。官方还提供了足够多的demo,大家可以去自己研究和学习。

原文来自:Jack Pu's Blog

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com