如何在ReactJS中通过PaperScript正确集成PaperJS并实现绘图？

核心思路 #

PaperScript是PaperJS专属语法，无需手动绑定paper对象，事件处理、API调用更简洁。在React中集成需通过paper.PaperScript.execute()方法执行PaperScript代码，同时配合React的生命周期完成画布初始化与资源清理。

修改后的代码实现 #

1. Canvas组件（Canvas.js）

import React, { useRef, useEffect } from 'react';
import Paper from 'paper';

// 直接内嵌PaperScript代码，或通过raw loader导入单独文件
const paperScriptCode = `
let myPath;

// PaperScript直接声明事件处理函数
function onMouseDown(event) {
  myPath = new Path();
  myPath.strokeColor = 'black';
  myPath.strokeWidth = 3;
}

function onMouseDrag(event) {
  myPath.add(event.point);
}
`;

const Canvas = props => {
  const canvasRef = useRef(null)
  
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // 初始化PaperJS画布
    Paper.setup(canvas);
    
    // 执行PaperScript代码，绑定当前Paper环境
    Paper.PaperScript.execute(paperScriptCode, Paper);

    // 处理窗口resize，确保画布尺寸适配
    const handleResize = () => {
      Paper.view.viewSize = new Paper.Size(canvas.offsetWidth, canvas.offsetHeight);
    };
    window.addEventListener('resize', handleResize);
    handleResize(); // 初始化时设置一次尺寸

    // 清理资源，避免内存泄漏
    return () => {
      window.removeEventListener('resize', handleResize);
      Paper.project.clear();
      Paper.view.remove();
    };
  }, []);
  
  // 设置画布样式，占满可用区域（可根据需求调整）
  return <canvas ref={canvasRef} {...props} style={{ width: '100%', height: '80vh', border: '1px solid #ccc' }} />
}

export default Canvas;

2. （可选）单独的PaperScript文件

如果想把PaperScript代码拆分到单独文件（比如draw.paperscript），需要通过raw loader导入为字符串：

// draw.paperscript
let myPath;

function onMouseDown(event) {
  myPath = new Path();
  myPath.strokeColor = 'black';
  myPath.strokeWidth = 3;
}

function onMouseDrag(event) {
  myPath.add(event.point);
}

在Canvas.js中导入时，需添加?raw后缀（Vite环境），或配置webpack的raw-loader：

import paperScriptCode from './draw.paperscript?raw';

关键注意事项 #

• PaperScript语法无需手动引用paper对象，API（如Path、Point）可直接使用，事件处理函数直接声明即可自动绑定到视图。
• 无需手动调用paper.view.draw()，PaperScript会自动触发视图更新。
• 必须在组件卸载时清理PaperJS的project和view，避免内存泄漏。

优化建议 #

• 画布尺寸：通过监听窗口resize动态调整视图尺寸，确保绘图区域始终适配容器。
• 样式控制：给canvas添加明确的宽高样式，避免默认小尺寸问题。

内容的提问来源于stack exchange，提问作者Leonid Kislov