mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 13:32:28 -05:00
Use a raster for the guid layer background
This commit is contained in:
parent
29f5cc7216
commit
67562c8799
4 changed files with 16 additions and 12 deletions
|
@ -77,6 +77,7 @@
|
||||||
"style-loader": "^0.18.0",
|
"style-loader": "^0.18.0",
|
||||||
"svg-url-loader": "^2.2.0",
|
"svg-url-loader": "^2.2.0",
|
||||||
"tap": "^10.2.0",
|
"tap": "^10.2.0",
|
||||||
|
"url-loader": "^0.6.2",
|
||||||
"webpack": "^3.5.4",
|
"webpack": "^3.5.4",
|
||||||
"webpack-dev-server": "^2.7.0"
|
"webpack-dev-server": "^2.7.0"
|
||||||
},
|
},
|
||||||
|
|
BIN
src/helper/background.png
Normal file
BIN
src/helper/background.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
|
@ -1,4 +1,5 @@
|
||||||
import paper from '@scratch/paper';
|
import paper from '@scratch/paper';
|
||||||
|
import canvasBg from './background.png';
|
||||||
|
|
||||||
const getGuideLayer = function () {
|
const getGuideLayer = function () {
|
||||||
for (let i = 0; i < paper.project.layers.length; i++) {
|
for (let i = 0; i < paper.project.layers.length; i++) {
|
||||||
|
@ -31,20 +32,18 @@ const _makePaintingLayer = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
const _makeBackgroundGuideLayer = function () {
|
const _makeBackgroundGuideLayer = function () {
|
||||||
const BLOCK_WIDTH = 4;
|
|
||||||
const guideLayer = new paper.Layer();
|
const guideLayer = new paper.Layer();
|
||||||
guideLayer.locked = true;
|
guideLayer.locked = true;
|
||||||
for (let i = 0; i < 500 / BLOCK_WIDTH; i += 2) {
|
const img = new Image();
|
||||||
for (let j = 0; j < 400 / BLOCK_WIDTH; j++) {
|
img.src = canvasBg;
|
||||||
const rect = new paper.Shape.Rectangle(
|
img.onload = () => {
|
||||||
new paper.Point((i + (j % 2)) * BLOCK_WIDTH, j * BLOCK_WIDTH),
|
const raster = new paper.Raster(img);
|
||||||
new paper.Point((i + (j % 2) + 1) * BLOCK_WIDTH, (j + 1) * BLOCK_WIDTH)
|
raster.parent = guideLayer;
|
||||||
);
|
raster.guide = true;
|
||||||
rect.fillColor = '#E5E5E5';
|
raster.locked = true;
|
||||||
rect.guide = true;
|
raster.position = paper.view.center;
|
||||||
rect.locked = true;
|
raster.sendToBack();
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
||||||
const vLine = new paper.Path.Line(new paper.Point(0, -7), new paper.Point(0, 7));
|
const vLine = new paper.Path.Line(new paper.Point(0, -7), new paper.Point(0, 7));
|
||||||
vLine.strokeWidth = 2;
|
vLine.strokeWidth = 2;
|
||||||
|
|
|
@ -50,6 +50,10 @@ const base = {
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.png$/i,
|
||||||
|
loader: 'url-loader'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
test: /\.svg$/,
|
test: /\.svg$/,
|
||||||
loader: 'svg-url-loader?noquotes'
|
loader: 'svg-url-loader?noquotes'
|
||||||
|
|
Loading…
Reference in a new issue