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 用于矢量绘图、交互和动画，适用于数据可视化、游戏开发等场景。通过结合事件监听和动态更新，可实现复杂交互式图形应用。