Two.js 扁平化 2D 绘图 API 插件

发布于 2018-08-04 21:45:05 字数 6027 浏览 3293 评论 0

Two.js 是一个高级浏览器上的 2D 绘图 API 他使用和 svg、canvas、webgl 相同的 API 绘制渲染器。

简介概述

1、专注于矢量形状

Two.js 是深深地鼓舞平面运动图形。其结果是，two.js 的目的是使创作和动画的平面形状更容易和更简洁。在这个写作 two.js 时不幸的是并不支持文本或图像。

2、Scenegraph

在其核心 two.js 依赖于scenegraph。这意味着当你绘制或创建对象（ Two.Polygon或Two.Group），两个实际上存储，并记得此事。你使该对象后，您可以对它应用任何数量的操作、例如：rotation、translation、scale等......

3、动画循环

Two.js 有一个内置的动画循环。简单性质和可以自动化或与另一个动画库配对。

4、SVG运行

Two.js 的特点Scalable Vector Graphics Interpreter。这意味着开发人员和设计师都可以在商业应用程序（如Adobe Illustrator中创建 SVG 元素和他们带入你 two.js 的场景。

二、基本用法

要启动这些演示，您必须下载 two.js 文件，将它添加到你的 HTML 文档中，建议放在 body 结束标签以前。

<script src="./path-to-two/two.js"></script>

1、绘制你的第一个形状

我们进入所有花哨的动画之前是好去感受为如何在 two.js 中的形状。为了做到这一点，我们需要具有的两个实例。这建立了一个包含 svg 元素或 Canvas 元素添加到该网页的 Dom 元素。把两个对象有一个 scene，其中包含的所有形状以及用于创建形状的方法。

// Make an instance of two and place it on the page.
var elem = document.getElementById('draw-shapes').children[0];
var params = { width: 285, height: 200 };
var two = new Two(params).appendTo(elem);

// two has convenience methods to create shapes.
var circle = two.makeCircle(72, 100, 50);
var rect = two.makeRectangle(213, 100, 100, 100);

// The object returned has many stylable properties:
circle.fill = '#FF8000';
circle.stroke = 'orangered'; // Accepts all valid css color
circle.linewidth = 5;

rect.fill = 'rgb(0, 200, 255)';
rect.opacity = 0.75;
rect.noStroke();

// Don't forget to tell two to render everything
// to the screen
two.update();

2、形状和组

将形状添加到组使管理更容易和更理智的多个形状。集团的提供简便的方法来移动你的内容通过 translation、rotation 和 scale。这些操作发出从坐标空间(0, 0)。在下面的例子中我们可以看到的圆形和矩形的初始取向改变从第一个例子。这些形状都被面向各地(0, 0)，这使我们能够变换形状的周围 centeroid 组。此外集团的样式设置操作滴下来，适用于每个形状。

var elem = document.getElementById('draw-group').children[0];
var two = new Two({ width: 285, height: 200 }).appendTo(elem);

var circle = two.makeCircle(-70, 0, 50);
var rect = two.makeRectangle(70, 0, 100, 100);
circle.fill = '#FF8000';
circle.stroke = 'orangered';
rect.fill = 'rgba(0, 200, 255, 0.75)';
rect.stroke = '#1C75BC';

// Groups can take an array of shapes and/or groups.
var group = two.makeGroup(circle, rect);

// And have translation, rotation, scale like all shapes.
group.translation.set(two.width / 2, two.height / 2);
group.rotation = Math.PI;
group.scale = 0.75;

// You can also set the same properties a shape have.
group.linewidth = 7;

two.update();

3、添加动画

最后让我们添加一些运动到我们的形状。到目前为止的示例使用 two.update(); 绘制到屏幕上的内容。Two.js 的实例有动画的两种特殊方法。

第一个是 two.play(); 和 two.update(); 要求在 60 fps。如果有太多的内容来呈现每个框架。

第二种方法是 two.bind(); 此方法接受 string 作为其第一个参数，指示要听听什么事件和一个 function 作为其划定什么要做的第一个参数中所述的事件发生时的第二个参数。若要同步带有动画的函数循环简单地调用 two.bind('update', referenceToFunction); 如下所述：

var elem = document.getElementById('draw-animation').children[0];
var two = new Two({ width: 285, height: 200 }).appendTo(elem);

var circle = two.makeCircle(-70, 0, 50);
var rect = two.makeRectangle(70, 0, 100, 100);
circle.fill = '#FF8000';
rect.fill = 'rgba(0, 200, 255, 0.75)';

var group = two.makeGroup(circle, rect);
group.translation.set(two.width / 2, two.height / 2);
group.scale = 0;
group.noStroke();

// Bind a function to scale and rotate the group
// to the animation loop.
two.bind('update', function(frameCount) {
  // This code is called everytime two.update() is called.
  // Effectively 60 times per second.
  if (group.scale > 0.9999) {
    group.scale = group.rotation = 0;
  }
  var t = (1 - group.scale) * 0.125;
  group.scale += t;
  group.rotation += t * 4 * Math.PI;
}).play();  // Finally, start the animation loop