paper js实现
Paper.js 实现基础图形绘制
Paper.js 是一个基于 HTML5 Canvas 的开源矢量图形库，适合创建交互式图形和动画。以下是一个基础实现示例：
// 初始化 Paper.js 项目
paper.install(window);
window.onload = function() {
paper.setup('myCanvas');
// 创建圆形
const circle = new Path.Circle({
center: [100, 100],
radius: 50,
fillColor: 'red'
});
// 创建矩形
const rectangle = new Path.Rectangle({
point: [200, 200],
size: [100, 60],
fillColor: 'blue'
});
// 创建路径（直线）
const line = new Path.Line({
from: [50, 300],
to: [350, 300],
strokeColor: 'green',
strokeWidth: 5
});
}实现交互功能
Paper.js 支持事件驱动的交互设计。以下代码演示如何实现拖拽交互：
paper.install(window);
window.onload = function() {
paper.setup('myCanvas');
const circle = new Path.Circle({
center: [100, 100],
radius: 30,
fillColor: 'orange'
});
// 启用拖拽
circle.onMouseDrag = function(event) {
this.position = event.point;
};
// 点击事件
circle.onClick = function() {
this.fillColor = Color.random();
};
}实现动画效果
Paper.js 内置了动画支持，可以通过 onFrame 事件实现：
paper.install(window);
window.onload = function() {
paper.setup('myCanvas');
const ball = new Path.Circle({
center: [100, 100],
radius: 20,
fillColor: 'purple'
});
let speed = new Point(3, 2);
view.onFrame = function(event) {
// 移动球体
ball.position = ball.position.add(speed);
// 边界检测
if (ball.position.x > view.size.width || ball.position.x < 0) {
speed.x *= -1;
}
if (ball.position.y > view.size.height || ball.position.y < 0) {
speed.y *= -1;
}
};
}实现复杂路径绘制
Paper.js 的 Path 对象支持复杂路径创建：
paper.install(window);
window.onload = function() {
paper.setup('myCanvas');
const path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 3;
// 添加路径点
path.add(new Point(50, 50));
path.add(new Point(150, 150));
path.add(new Point(250, 50));
path.add(new Point(350, 150));
// 平滑路径
path.smooth();
// 闭合路径
path.closed = true;
path.fillColor = new Color(1, 0, 0, 0.5);
}注意事项
-
确保在 HTML 中引入 Paper.js 库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script> <canvas id="myCanvas" resize></canvas> -
使用
paper.setup()初始化画布时必须指定有效的 canvas 元素 ID -
对于复杂项目，推荐使用 PaperScript（特殊的 JavaScript 方言）以获得更简洁的语法
-
性能优化建议：
- 尽量减少路径点的数量
- 对静态元素使用
item.cache()方法 - 批量操作时使用
project.activeLayer.activate()减少重绘
