JavaScript HTML5 Canvas 网页动画动画库 Paper.js

Paper.js 开源的矢量图形 JS 脚本动画插件

发布于 2018-07-12 21:45:05 字数 3624 浏览 2360 评论 0

Paper.js 是一个开源的矢量图形脚本框架，运行于 HTML5 Canvas（画布）之上。它提供了一个整洁的场景图（Scene Graph）或文档对象模型来创建矢量图形，并且拥有许多强大的功能，可以生成贝赛尔曲线等。所有这一切都通过一个精心设计的整洁一致的编程接口封装了起来。

Paper.js 是基于Scriptographer（一个有着活跃的社区和超过10年的发展的针对Adobe Illustrator的脚本环境）的，它以容易理解的方式使用DOM构造对象。它提供了在支持<canvas>标签的web浏览器上以创造性和优雅的方式做大量操作。它也提供了一种新的和有趣的方式画矢量图形。

使用方法

引入文件

<script src="js/paper.js" type="text/javascript"></script>
<script src="js/main.js" type="text/paperscript"></script>

HTML 画布

<canvas id="draw" width="100%" height="100%" resize="true"></canvas>

psper.js 被包含在你加入你的代码文件 type='text/paperscript' 之前，通过 Canvas 元素的 ID 去画以确保你的代码文件包含使用 paper.js 所有的类和功能能使用。

使用预定义图形

Paper.js允许你使用不同维度预定义图形和创建线段。例如，下面的代码用“Circle”构造了圆形路径：

var myCircle = new Path.Circle(new Point(300, 70), 50);
myCircle.fillColor = 'black';

这个代码片段创建了一个黑色圆形，半径为50pts，圆心坐标x300，y为70。

为了创建一个长方形，像圆形相同的方式通过“Rectangle”构造器，代码如下：

var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
path.selected = true;

创建交互

Paper.js支持拖放功能也支持键盘操作。下面演示一个在鼠标路径上画线段：

<!DOCTYPE HTML>
<html>
<head>
<script src="lib/paper.js" type="text/javascript"></script>
<script type="text/paperscript" canvas="draw">
// Create a new path once, when the script is executed:
var myPath = new Path();
myPath.strokeColor = 'black';
// This function is called whenever the user
// clicks the mouse in the view:
function onMouseDown(event) {
   // If the path is empty, we need to add two segments
   // to the path. The first one will stay put,
   // and the second one will be moved while dragging.
   if (myPath.segments.length == 0) {
	   myPath.add(event.point);
   }
   // Add a segment to the path at the position of the mouse:
   myPath.add(event.point);
}
function onMouseDrag(event) {
   // Move the last segment point of the path to the
   // current position of the mouse:
   myPath.lastSegment.point = event.point;
}
</script>
</head>
<body>
<canvas id="draw" width="100%" height="100%" resize="true"></canvas>
</body>
</html>

上面的代码允许你通过拖拉画线。

其他的鼠标处理功能当某个事件发生时能够被paper.js调用和触发。依赖于你想完成的哪种和什么级别的交互，你可以组合鼠标处理功能像event.point，event.downpoint 或 event.pressure 等能收到的不同有关鼠标事件对象。

创建动画

Paper.js 通过调用 onFrame 事件来创建动画。像下面这样定义：

function onFrame(event) {
    // Your animation code goes in here
}

动画的可以用 onFrame 方法创建包或旋转、移动，颜色效果和路径段动画等等，下面的代码创建并 3 度旋转顺时针方向的矩形：

// Create a rectangle shaped path with its top left point at
// {x: 75, y: 75} and a size of {width: 75, height: 75}
var topLeft = new Point(75, 75);
var size = new Size(75, 75);
var path = new Path.Rectangle(topLeft, size);
path.strokeColor = 'black';
function onFrame(event) {
   // Each frame, rotate the path by 3 degrees:
   path.rotate(3);
}