reactjs - 如何在 React 中使用 PaperJs?
问题描述
我正在尝试在我的一个 React 组件中使用 PaperJs。我不确定在我的组件中在哪里使用 paper.view.onFrame 方法
解决方案
对于那些正在寻找在 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;
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;
推荐阅读
- aframe - A-Frame 中的 3D 天空盒
- c# - Windows Server 2019 上的 Xamarin 模拟器
- string - Hive - 不保留空字符串
- react-native - flexWrap 中元素的对齐方式取决于元素的数量
- unity3d - 允许玩家在 Unity 中拖动对象
- firebase - Firebase 托管 - 如何创建可公开访问的文件夹?
- amazon-web-services - 如何衡量何时扩展 Web 应用程序 aws 的值
- python - mac (miniconda) 上的 jupyter notebook 的 posix_spawn 失败
- python - torch.clamp 中与列相关的边界
- c# - 在 Xamarin Forms 中调用 XmlSerializer 的构造函数时引发 NotSupportedException