Paper.js 开源的矢量图形 JS 脚本动画插件 - 文章教程

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

发布于 2018-07-12 字数 4322 浏览 1860 评论 0

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

Paper.js 开源的 HTML5 Canvas 画布矢量图形的脚本动画库

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

缺点

Paper.js 是有很多亮点但是也有不足。

它不支持老版本浏览器

需要 Internet Explorer 9+、Firefox 4+、Safari 5+ 、Chrome

性能会比较慢

Pixar 的伍迪是用服务器集群完成的,而你只有你的笔记本。为了保证动画的最终效果,需要在比较差的浏览器上测试你的程序的性能,移动设备会更慢,移动设备支持 Canvas,但是跑它会比较慢。

项目地址:http://paperjs.org

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

cs163v

文章 0 评论 0

Mr Rock

文章 0 评论 0