diff --git a/package.json b/package.json index 1a3ae1ec..a2e6b6fe 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,7 @@ "style-loader": "^0.18.0", "svg-url-loader": "^2.2.0", "tap": "^10.2.0", + "url-loader": "^0.6.2", "webpack": "^3.5.4", "webpack-dev-server": "^2.7.0" }, diff --git a/src/helper/background.png b/src/helper/background.png new file mode 100644 index 00000000..74902b2a Binary files /dev/null and b/src/helper/background.png differ diff --git a/src/helper/layer.js b/src/helper/layer.js index 40d197b6..6d9878ef 100644 --- a/src/helper/layer.js +++ b/src/helper/layer.js @@ -1,4 +1,5 @@ import paper from '@scratch/paper'; +import canvasBg from './background.png'; const getGuideLayer = function () { for (let i = 0; i < paper.project.layers.length; i++) { @@ -31,20 +32,18 @@ const _makePaintingLayer = function () { }; const _makeBackgroundGuideLayer = function () { - const BLOCK_WIDTH = 4; const guideLayer = new paper.Layer(); guideLayer.locked = true; - for (let i = 0; i < 500 / BLOCK_WIDTH; i += 2) { - for (let j = 0; j < 400 / BLOCK_WIDTH; j++) { - const rect = new paper.Shape.Rectangle( - new paper.Point((i + (j % 2)) * BLOCK_WIDTH, j * BLOCK_WIDTH), - new paper.Point((i + (j % 2) + 1) * BLOCK_WIDTH, (j + 1) * BLOCK_WIDTH) - ); - rect.fillColor = '#E5E5E5'; - rect.guide = true; - rect.locked = true; - } - } + const img = new Image(); + img.src = canvasBg; + img.onload = () => { + const raster = new paper.Raster(img); + raster.parent = guideLayer; + raster.guide = true; + raster.locked = true; + raster.position = paper.view.center; + raster.sendToBack(); + }; const vLine = new paper.Path.Line(new paper.Point(0, -7), new paper.Point(0, 7)); vLine.strokeWidth = 2; diff --git a/webpack.config.js b/webpack.config.js index 6c794946..87abe32b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -50,6 +50,10 @@ const base = { } }] }, + { + test: /\.png$/i, + loader: 'url-loader' + }, { test: /\.svg$/, loader: 'svg-url-loader?noquotes'