如何在 React 中使用 PaperJs？答案

【问题标题】：How to use PaperJs with React?如何在 React 中使用 PaperJs？
【发布时间】：2019-10-05 11:08:59
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

App.js

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

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

export default App;

Canvas.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;

draw1.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;

【讨论】：

【解决方案2】：

实际上，我用一些额外的编码完全编写了您的代码。 Paperjs 鼠标事件似乎有效，但它们的位置与单击的位置不同。它大约是 Point 的 2 倍。当我点击 50,50 时，它会绘制 100,100。我在下面分享我的代码（Ricardo Sanchez 的 Sketch.js 的更新版本）：

import paper from "paper";

export default function Sketch() {
  window.onload = function () {
    paper.install(window);
    paper.setup("paper-canvas");
    draw();

    var myPath;

    paper.view.onMouseDown = function(event) {
        myPath = new paper.Path();
        myPath.strokeColor = 'black';
    }
    
    paper.view.onMouseDrag = function(event) {
        myPath.add(event.point);
    }
    
    paper.view.onMouseUp = function(event) {
        var myCircle = new paper.Path.Circle({
            center: event.point,
            radius: 10
        });
        myCircle.strokeColor = 'black';
        myCircle.fillColor = 'white';
    }

    paper.view.draw();
  };

  function draw(event) {
    const path = new paper.Path.Circle({
      center: [80, 50],
      radius: 35,
      fillColor: "red",
    });

    const secondPath = new paper.Path.Circle({
      center: [120, 50],
      radius: 35,
      fillColor: "#00FF00",
    });
  }

  // Most return null
  return null;
}

【讨论】：

这个 2 倍大的问题似乎是由于在视网膜显示器上对同一画布上的 paper.setup 的多次调用而触发的。我不确定如何确保仅调用一次 paper.setup 并让 React 不理会组件。

【解决方案3】：

我的 2 美分，希望这会有所帮助。

假设您有一个 MainView 组件，例如：

import React, {Component} from 'react';
import Sketch from './Sketch';

export default class MainView extends Component {

render() {
    return(
        <div>
            <canvas id='paper-canvas' resize='true' />
            <Sketch />
        </div>
    );
  }
}

Sketch 组件将包含您所有的 paperjs 代码，它是一个简单的 Function 组件，例如：

import paper from 'paper';

export default function Sketch() {

   window.onload = function() {
       paper.install(window);
       paper.setup('paper-canvas');

       // draw or call your drawing functions here

       view.onFrame = draw;
   }

   function draw(event) {
       // animation loop
   }

   // Most return null
   return null;
}

这对我来说很好用，但我目前在 Sketch 组件中调用本机 paperjs 鼠标事件时遇到问题。如果有人可以提供帮助将不胜感激。

干杯

// 行尾

【讨论】：

【解决方案4】：

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

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

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

【讨论】：