Graphical User Interface for the Scratch 3.0 paint editor, which is used to make and edit sprites for use in projects.
npm install scratch-paint
- Try it out at https://llk.github.io/scratch-paint/
- Or, to try it out as part of Scratch 3.0, visit https://scratch.mit.edu/create and click on the "Costumes" tab.
This package depends on Paper.js, so it depends indirectly on several native packages. Depending on your system
configuration, you may or may not need to install them. If you see errors about pixman, cairo, etc., check here:
- https://docs.microsoft.com/en-us/windows/wsl/install-win10
Scratch Paint requires you to have Git and Node.js installed. E.g.:
``bash`
- sudo apt-get update
- sudo apt-get install git-core
- sudo apt-get install nodejs
For Ubuntu on Windows, the Windows install of nodejs may interfere with the Linux one, so installing nodejs requires more steps:
`bash`
- curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
- sudo apt-get install -y nodejs
- PATH="/usr/bin:$PATH"
If you want to edit scratch-paint, or help contribute to our open-source project, fork the scratch-paint repo. Then:
`bash`
git clone https://github.com/
cd scratch-paint
npm install
In the cloned scratch-paint directory, run:`bash`
npm run build
npm start
Then go to http://localhost:8078/playground/. 8078 is BLOB upside-down. The True Name of this repo is scratch-blobs.
(Note that the npm run build step above seems like it's only necessary for some user and environments, and not others; check for yourself if the server that npm start starts is hot-reloading correctly.)
Get the rest of Scratch:
`bash`
git clone https://github.com/scratchfoundation/scratch-gui.gitscratch-paint
Go to your folder and run:`bash`
npm link
Now in another terminal, go back to the scratch-gui folder and run`bash`
npm install
npm link scratch-paint
npm start
Then go to http://localhost:8601. 601 is supposed to look like GUI (it's okay, I don't really see it either.) The Costumes tab should be running your local copy of scratch-paint!
bash
npm install --save scratch-paint
`For an example of how to use scratch-paint as a library, check out the
scratch-paint/src/playground directory.In your parent component:
`
import PaintEditor from 'scratch-paint';
...
image={optionalImage}
imageId={optionalId}
imageFormat='svg'
rotationCenterX={optionalCenterPointX}
rotationCenterY={optionalCenterPointY}
rtl={true|false}
onUpdateImage={handleUpdateImageFunction}
zoomLevelId={optionalZoomLevelId}
/>
`image: may either be nothing, an SVG string or a base64 data URI)
SVGs of up to size 480 x 360 will fit into the view window of the paint editor, while bitmaps of size up to 960 x 720 will fit into the paint editor. One unit of an SVG will appear twice as tall and wide as one unit of a bitmap. This quirky import behavior comes from needing to support legacy projects in Scratch.imageId: If this parameter changes, then the paint editor will be cleared, the undo stack reset, and the image re-imported.imageFormat: 'svg', 'png', or 'jpg'. Other formats are currently not supported.rotationCenterX: x coordinate relative to the top left corner of the sprite of the point that should be centered. If left undefined, image will be horizontally centered.rotationCenterY: y coordinate relative to the top left corner of the sprite of the point that should be centered. If left undefined, image will be vertcally centered.rtl: True if the paint editor should be laid out right to left (meant for right to left languages)onUpdateImage: A handler called with the new image (either an SVG string or an ImageData) each time the drawing is edited.zoomLevelId: All costumes with the same zoom level ID will share the same saved zoom level. When a new zoom level ID is encountered, the paint editor will zoom to fit the current costume comfortably. Leave undefined to perform no zoom to fit.
In the top-level combineReducers function:
`
import {ScratchPaintReducer} from 'scratch-paint';
...
combineReducers({
...
scratchPaint: ScratchPaintReducer
});
`
Note that scratch-paint expects its state to be in state.scratchPaint, so the name must be exact.Scratch-paint shares state with its parent component because it expects to share the parent's
IntlProvider, which inserts translations into the state. See the IntlProvider setup in scratch-gui here.$3
We use React and Redux. If you're just getting started with them, here are some good tutorials:
https://egghead.io/courses/getting-started-with-redux- Under
/src, our React/Redux code is divided mainly between components (presentational components), containers (container components), and reducers.-
css contains only shared css. Most of the css is stored alongside its component.-
helper contains pure javascript used by the containers. If you want to change how something works, it's probably here. For instance, the brush tool is in helper/blob-tools/, and the code that's run when you click the group button is in helper/group.js.$3
`bash
npm run test
`Just unit tests:
`bash
npm run unit
`An individual unit test: (run from
scratch-paint directory)
`bash
./node_modules/.bin/jest ./test/unit/undo-reducer.test.js
``Scratch-paint couldn't exist without w00dn/papergrapher and Paper.js. If you are amazed and/or baffled by the insane boolean operation math that makes the brush and eraser tools possible, please check out and consider contributing to Paper. Thank you!