paper js实现
使用 Paper.js 实现绘图功能
Paper.js 是一个基于 HTML5 Canvas 的开源矢量图形库，适用于创建交互式图形和动画。以下是基本实现方法：
安装 Paper.js
通过 npm 安装：
npm install paper或直接在 HTML 中引入 CDN：
<script src="https://unpkg.com/paper@0.12.17/dist/paper-full.min.js"></script>初始化 Paper.js
在 HTML 中创建 Canvas 元素并初始化 Paper.js：
<canvas id="myCanvas" resize></canvas>
<script type="text/javascript">
paper.setup('myCanvas');
</script>绘制基本图形
Paper.js 提供多种矢量图形绘制方式，例如路径、圆形、矩形等。
绘制路径（自由线条）
var path = new paper.Path();
path.strokeColor = 'black';
path.add(new paper.Point(20, 20));
path.add(new paper.Point(100, 100));绘制圆形
var circle = new paper.Path.Circle({
center: [100, 100],
radius: 50,
fillColor: 'red'
});绘制矩形
var rectangle = new paper.Path.Rectangle({
point: [50, 50],
size: [100, 50],
strokeColor: 'blue',
fillColor: 'green'
});交互式绘图
Paper.js 支持鼠标和触摸事件，可实现动态绘图。
鼠标绘图示例
var tool = new paper.Tool();
tool.onMouseDown = function(event) {
var path = new paper.Path();
path.strokeColor = 'black';
path.add(event.point);
};
tool.onMouseDrag = function(event) {
path.add(event.point);
};动画效果
利用 onFrame 事件实现动画：
var ball = new paper.Path.Circle({
center: [100, 100],
radius: 30,
fillColor: 'yellow'
});
ball.speed = 2;
paper.view.onFrame = function(event) {
ball.position.x += ball.speed;
if (ball.position.x > paper.view.size.width) {
ball.position.x = 0;
}
};导出 SVG
Paper.js 支持导出 SVG 格式：
var svg = paper.project.exportSVG({ asString: true });
console.log(svg);总结
Paper.js 提供丰富的 API 用于矢量绘图、交互和动画，适用于数据可视化、游戏开发等场景。通过结合事件监听和动态更新，可实现复杂交互式图形应用。
