如何在 React 中使用 PaperJs?
How to use PaperJs with React?
我正在尝试在我的一个 React 组件中使用 PaperJs。我不确定在我的组件
中的什么地方使用 paper.view.onFrame 方法
https://github.com/react-paper/react-paper-bindings
有一个包可以让你看看 paperjs 和 reactjs 是如何一起实现的。
你可以按原样使用这个包(最后一次更新似乎是在 2018 年 12 月),或者你可以看看作者如何将 paperjs 实现到 reactjs 项目中。
我的 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 鼠标事件时遇到问题。如果有人能提供帮助,将不胜感激。
干杯
// 行尾
实际上我用一些额外的编码完全写了你的代码。 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;
}
对于那些正在寻找在 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;
我正在尝试在我的一个 React 组件中使用 PaperJs。我不确定在我的组件
中的什么地方使用 paper.view.onFrame 方法https://github.com/react-paper/react-paper-bindings
有一个包可以让你看看 paperjs 和 reactjs 是如何一起实现的。
你可以按原样使用这个包(最后一次更新似乎是在 2018 年 12 月),或者你可以看看作者如何将 paperjs 实现到 reactjs 项目中。
我的 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 鼠标事件时遇到问题。如果有人能提供帮助,将不胜感激。
干杯
// 行尾
实际上我用一些额外的编码完全写了你的代码。 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;
}
对于那些正在寻找在 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;