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

注意事项

1. 确保在 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>

2. 使用 paper.setup() 初始化画布时必须指定有效的 canvas 元素 ID

3. 对于复杂项目，推荐使用 PaperScript（特殊的 JavaScript 方言）以获得更简洁的语法

4. 性能优化建议：

   

• 尽量减少路径点的数量
• 对静态元素使用 item.cache() 方法
• 批量操作时使用 project.activeLayer.activate() 减少重绘