mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 21:42:30 -05:00
add paper canvas component
This commit is contained in:
parent
d804855f2f
commit
4e558380e7
4 changed files with 40 additions and 4 deletions
|
@ -1,3 +1,3 @@
|
||||||
node_modules/*
|
node_modules/*
|
||||||
build/*
|
dist/*
|
||||||
playground/
|
playground/
|
|
@ -41,6 +41,7 @@
|
||||||
"lodash.defaultsdeep": "4.6.0",
|
"lodash.defaultsdeep": "4.6.0",
|
||||||
"minilog": "3.1.0",
|
"minilog": "3.1.0",
|
||||||
"mkdirp": "^0.5.1",
|
"mkdirp": "^0.5.1",
|
||||||
|
"paper": "^0.11.4",
|
||||||
"postcss-import": "^10.0.0",
|
"postcss-import": "^10.0.0",
|
||||||
"postcss-loader": "^2.0.5",
|
"postcss-loader": "^2.0.5",
|
||||||
"postcss-simple-vars": "^4.0.0",
|
"postcss-simple-vars": "^4.0.0",
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import PaperCanvas from './paper-canvas.jsx';
|
||||||
|
|
||||||
export default class PaintEditorComponent extends React.Component {
|
export default class PaintEditorComponent extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div className="paint-editor">
|
<PaperCanvas />
|
||||||
BANANAS
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
36
src/components/paper-canvas.jsx
Normal file
36
src/components/paper-canvas.jsx
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import React from 'react';
|
||||||
|
import paper from 'paper';
|
||||||
|
|
||||||
|
class PaperCanvas extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
};
|
||||||
|
}
|
||||||
|
componentDidMount () {
|
||||||
|
paper.setup('paper-canvas');
|
||||||
|
// Create a Paper.js Path to draw a line into it:
|
||||||
|
var path = new paper.Path();
|
||||||
|
// Give the stroke a color
|
||||||
|
path.strokeColor = 'black';
|
||||||
|
var start = new paper.Point(100, 100);
|
||||||
|
// Move to start and draw a line from there
|
||||||
|
path.moveTo(start);
|
||||||
|
// Note that the plus operator on Point objects does not work
|
||||||
|
// in JavaScript. Instead, we need to call the add() function:
|
||||||
|
path.lineTo(start.add([200, -50]));
|
||||||
|
// Draw the view now:
|
||||||
|
paper.view.draw();
|
||||||
|
}
|
||||||
|
componentWillUnmount () {
|
||||||
|
}
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<canvas id="paper-canvas" />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
PaperCanvas.propTypes = {};
|
||||||
|
|
||||||
|
module.exports = PaperCanvas;
|
Loading…
Reference in a new issue