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

发布于 2018-08-04 字数7409 浏览 688 评论 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>

two-js1、绘制你的第一个形状

我们进入所有花哨的动画之前是好去感受为如何在 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

在线例子

更多的在线例子请浏览:http://jonobr1.github.io/two.js/examples/

API 文档

Two

当您导入的库两个是一个 window 水平类,作为该项目的主要交互点。它公开一些方法和属性。这些使它能够绘制,但是也起其他功能,如增大绘图空间。下面是记录的属性和 Two 类的功能。除非指定的方法为链接返回他们的 Two 实例。

var two = new Two(params);

创建Two params在哪里与下面列出的几个可选参数的 JavaScript 对象的一个新实例:

类型 params.type

设置渲染器为实例的类型: svg,webgl,帆布,等……在Two.Types内进行了适用的类型。默认类型是Two.Types.svg.

宽度 params.width

设置绘图空间的宽度。不理会如果params.fullscreen设置为true。默认宽度为640像素为单位)。

高度 params.height

设置绘图空间的高度。不理会如果params.fullscreen设置为true。默认高度为480像素。

自动启动 params.autostart

一个布尔值来自动添加要在requestAnimationFrame上绘制的实例。这是方便的替代品,所以你不必叫two.play().

全屏 params.fullscreen

一个布尔值来设置绘图空间的实例或不是全屏。如果设置为true然后width和height参数将不会得到尊重。

比率 params.ratio

为canvas和webgl渲染器设置的分辨率。如果为空则 two.js 自动推断基于devicePixelRatio的比率的 api。

类型 two.type

一个字符串,表示哪种类型的渲染器实例已恳求。

帧数表示two.frameCount

表示已过了多少帧的数字。

timeDeltatwo.timeDelta

表示至今多少时间的最后一帧以毫秒为单位的数字。

更多文档请参考:http://jonobr1.github.io/two.js/#two-class

如何获取

官方网站  |  下载地址  |  在线例子 帮助文档

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!