如何在 React 中使用 PaperJs？

Question

我正在尝试在我的 React 组件之一中使用 PaperJs。我不确定在我的组件中在哪里使用 paper.view.onFrame 方法

Answer 1

https://github.com/react-paper/react-paper-bindings

有一个包供您查看 paperjs 和 reactjs 如何一起实现。

您可以按原样使用该包（上次更新似乎在 2018 年 12 月有点好），或者您可以看到作者如何将 paperjs 实现到 reactjs 项目中。

Answer 2

对于那些正在寻找在带有钩子的 create-react-app 中使用 paperjs 的人。

应用程序.js

import Canvas from './Canvas';
import './App.css';

function App() {
  return (
    <div>
      <Canvas />
    </div>
  );
}

export default App;

画布.js

import React, { useRef, useEffect } from 'react';
import Paper from 'paper';
import draw1 from '../drawings/draw1';

const Canvas = props => {
  
  const canvasRef = useRef(null)
  
  useEffect(() => {
    const canvas = canvasRef.current;
    Paper.setup(canvas);
    draw1();
  }, []);
  
  return <canvas ref={canvasRef} {...props} id="canvas" resize="true" />
}

export default Canvas;

绘制1.js

import Paper from "paper";

const draw1 = () => {
  let myPath = new Paper.Path();

  Paper.view.onMouseDown = (event) => {
    myPath.strokeColor = "white";
    myPath.strokeWidth = 3;
  };

  Paper.view.onMouseDrag = (event) => {
    myPath.add(event.point);
  };

  Paper.view.draw();
};

export default draw1;