From 67562c87990be110288c1213e265654ae23f0d23 Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Wed, 25 Oct 2017 14:47:24 -0400
Subject: [PATCH] Use a raster for the guid layer background

---
 package.json              |   1 +
 src/helper/background.png | Bin 0 -> 47450 bytes
 src/helper/layer.js       |  23 +++++++++++------------
 webpack.config.js         |   4 ++++
 4 files changed, 16 insertions(+), 12 deletions(-)
 create mode 100644 src/helper/background.png

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 0000000000000000000000000000000000000000..74902b2ada12ee23b52c754523af3d42c4cebca5
GIT binary patch
literal 47450
zcmeI5&r4KM6vyvmLR!`)TSyY*s;Gr6BCxRW2aZr8V$duKrKC1tC8<!W2qaO<vOgf0
zg|rZ)jjJ{pmWv`cG0-A#5k(YO5P^uV1VMOrcs|eV=)0fAFh3YL<9+9x&-tEnz3+Z&
zOH)~CMX52StU1%rW=!f=@OZdmTky$;_r;^ZQ>v$}sm@Hi-Tx(cv;9i?Y}%N~2Rj!#
zi-Y$i*E883V|Ks%`$)}nk6$)s>PK@!y1oD6w|sS(sWwHE3!nd-cro{;K0Q63dj06<
zsilFvhuU(P(SwbH>MxFe*Z3ViSsmGTbhBLSTqZwNrQmd4S$(Pz)Lru<3aP{^s{@A>
z!gy@B2CGgvIac`$0=i9EI<)T{cj`Bmbn6xBbczW8>lg`2SO>6<L8Men09e-`0<dli
z7|(PwfCaE(0i^^TpL8>T1+a4C1Qe`T?z8m>04#tNb20!cm;1s;vb2c9*Ts_F;(Qqe
zE0zx|SH&x=16Tkn7Ek~dz*>^()<GSB70U+}UjVSKH#I8FC4Jgj#SE4itXvrDK*uMm
zY;sB{)={u1STWZ|!J=R-ss#mGcwqpnSQfG@w32QHumD!fwE--EwWK!yTX<mrtXLMZ
zEHr?X>u80iIj<Viw1{aD%LSBA&03wm6~F@6I7KL^Q^NYD0PM~D^Gg-M0Y~>bmo7X$
z@+AGP<Wt&p9Ibfifxd9hb9-)$j@8<BxyX#ZK6gH1)uNSz7G|+E`qhxDCKqlr{httB
z(>e6YYJIs}=^HuC&CXO}RVXsUqiuH2xyV;TFvN7A<C9eY>l#El#RPzLTfk&Sm9P$A
z9fL@zm;kU&3z(oN(ZM=^1+d{Yb(}g`2|7OMW&jId<!VPA==fw6zyeqRyM>Ag01IFN
zY@C#(gLME4VB>h}njz@w0hB0Mx!h-2VE_wY<(y0hIzCwiumBdoqF@UTz?9~aK5eaH
z23yz#<AmsH;s5W24%PuIfCaE|qE|_+qhL|6DA+hD3&185b?hRR%LkUWDVv;<2^|z{
zGF6=p>U6B4V3Ub;{!J&LSVzGovzVYooXlbZzyjDf{T8$&E#hz=SUdRI$ajP%zuDWp
zXNt_O>C;2CU%PJ|8|pu4vJro*(lNf=zdPdfiCs){@?M<j*m|yt(jl``Rj#=nLd`s9
z$8RLxM{q@-Pu^Qk)WsJoN~jyIaqKx^>45up$M=(n$OW(wvRasLMqJ-q2Ee*L15XJ$
z++H-K#F9){UZD=ax~`veP^V*+v*Qzrbrh^)9imiBY>KnvU1#8x(W_Tjr$y}AsQ_$3
zQAdk7nW)pz%>Xu;Y8}7=Sh+2IUNvh0EPxeD9$f$yz{*W}bX1*3R_FSDn^#xMvxDb5
St_8OXG|i1I4HI=8cb5S;XkpF(

literal 0
HcmV?d00001

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'