增加绘图队列

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "fastclick": "^1.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

src/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import FastClick from 'fastclick';
 import './style/reset.scss';
 import './style/common.scss';
 import './style/main.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+FastClick.attach(document.body);
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

src/views/RedPacket/index.js

@@ -6,31 +6,39 @@ import pkg3 from '../../assets/3.png'
 import pkg4 from '../../assets/4.png'
 import pkg5 from '../../assets/5.png'
 
+const pkgWidth = 64;
+const pkgHeight = 64;
+
 const imgSourceList = [{
   img: pkg1,
   x: 0,
   y: 0,
-  speed: 0.1,
+  speed: 1,
+  id: 0
 }, {
   img: pkg2,
   x: 60,
   y: 0,
-  speed: 0.4,
+  speed: 1.8,
+  id: 1
 }, {
   img: pkg3,
   x: 120,
   y: 0,
-  speed: 0.2,
+  speed: 0.8,
+  id: 2
 }, {
   img: pkg4,
   x: 180,
   y: 0,
-  speed: 0.3,
+  speed: 2.4,
+  id: 3
 }, {
   img: pkg5,
   x: 240,
   y: 0,
-  speed: 0.1,
+  speed: 0.15,
+  id: 4
 }]
 
 
@@ -49,98 +57,124 @@ const getImage = (imageSource) => {
 
 
 export default function RedPacket(props) {
+  // 绘图任务队列
+  const taskList = [];
+  // 注：如果要向requestAnimateFrame插入新的canvas绘制，可能要用taskList来存储绘制方法
   const container = useRef(null);
   const canvas = useRef(null);
   // 挂载requestAnimateFrameID
   const timeId = useRef(null);
   // 挂载pkgList
   const pkgList = useRef(null);
-
-
+  // 挂在canvasConext
+  const ctx = useRef(null)
   const [canvasWidth, setCanvasWidth] = useState(0)
   const [canvasHeight, setCanvasHeight] = useState(0)
 
+  // 清除&暂停动画
+  const clearAnimate = () => {
+    if (timeId.current) {
+      window.cancelAnimationFrame(timeId.current)
+    }
+  }
+
+  const drawText = (canvasContext, text, x, y) => {
+    canvasContext.font = "46px Georgia";
+    canvasContext.fillText(text, x, y);
+  }
+
+  const hitTest = (mouseX, mouseY, callBack = () => { }) => {
+    for (let i = 0; i < pkgList.current.length; i++) {
+      // X 轴命中
+      const hitX = ((mouseX - pkgList.current[i].x) <= pkgWidth) && ((mouseX - pkgList.current[i].x) > 0);
+      // Y 轴命中
+      const hitY = ((mouseY - pkgList.current[i].y) <= pkgHeight) && ((mouseY - pkgList.current[i].y) > 0);
+      if (hitX && hitY) {
+        callBack(pkgList.current[i]);
+        break;
+      }
+    }
+
+  }
+
+  const movePkg = useCallback(() => {
+    // 步进
+    const step = 4;
+    pkgList.current = pkgList.current.map(item => {
+      // 计算当前的y轴位置
+      let y = 0;
+      if (item.y <= canvasHeight) {
+        y = item.y + step * item.speed
+      }
+      return {
+        ...item,
+        y,
+      }
+    })
+    pkgList.current.forEach(item => {
+      ctx.current.drawImage(item.img, item.x, item.y)
+    })
+  }, [canvasHeight]);
+
+  const testTask = useCallback(() => {
+    drawText(ctx.current, '牛逼', canvasWidth / 2-50, canvasHeight / 2);
+  }, [canvasWidth, canvasHeight])
+
+  taskList.push(movePkg)
+
+  const drawing = useCallback((canvasContext) => {
+    canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);
+    taskList.forEach(task => {
+      task();
+    })
+    clearAnimate()
+    timeId.current = window.requestAnimationFrame(() => { drawing(canvasContext) })
+  }, [canvasWidth, canvasHeight, taskList])
 
-  useEffect(() => {
 
+  useEffect(() => {
     const { width, height } = container.current.getBoundingClientRect();
+    ctx.current = canvas.current.getContext('2d');
     setCanvasWidth(width);
     setCanvasHeight(height);
-    const ctx = canvas.current.getContext('2d');
+
 
     Promise.all(imgSourceList.map(item => {
       return getImage(item.img).catch(error => console.error(error))
     })).then(res => {
-
       pkgList.current = res.map((item, index) => {
         return {
+          ...imgSourceList[index],
           img: item,
-          x: imgSourceList[index].x,
-          y: imgSourceList[index].y,
-          speed: imgSourceList[index].speed
         }
       })
-
-
       pkgList.current.forEach(item => {
-        ctx.drawImage(item.img, item.x, item.y)
+        ctx.current.drawImage(item.img, item.x, item.y)
       })
-
-      // console.log('pkgList', pkgList.current);
-      console.log('canvasHeight0000', canvasHeight)
-
-
-      // 加了这句就行了------------------------------
-      if (timeId.current) {
-        cancelAnimationFrame(timeId.current)
-      }
-      //这个move方法是否被覆盖了 
-      const move = () => {
-        console.log('canvasHeight1111', canvasHeight)
-        // 步进
-        const step = 10;
-        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-        if (true) {
-          pkgList.current = pkgList.current.map(item => {
-            // 计算当前的y轴位置
-            let y;
-            if (item.y > canvasHeight) {
-              y = 0;
-            } else {
-              y = item.y + step * item.speed
-            }
-            return {
-              ...item,
-              y,
-            }
-          })
-          pkgList.current.forEach(item => {
-            ctx.drawImage(item.img, item.x, item.y)
-          })
-          if (timeId.current) {
-            cancelAnimationFrame(timeId.current)
-          }
-          timeId.current = window.requestAnimationFrame(move)
-        }
-      }
-
-      timeId.current = window.requestAnimationFrame(move)
-      // timeId.current = setTimeout(move, 4000)
+      clearAnimate()
+      // 进入绘制循环
+      timeId.current = window.requestAnimationFrame(() => { drawing(ctx.current) })
     })
-  }, [canvasWidth, canvasHeight])
-
-
+    // 清除副作用
+    return () => {
+      clearAnimate()
+    }
+  }, [canvasWidth, canvasHeight, drawing])
 
 
   const handleClick = useCallback(
     (event) => {
-      console.log(event)
-    }, [])
+      const { nativeEvent: { offsetX, offsetY } } = event;
+      hitTest(offsetX, offsetY, (pkgItem) => {
+        console.log('击中', pkgItem);
+        taskList.push(testTask)
+      });
+    }, [taskList, testTask])
 
 
   return (
     <div className='container' ref={container}>
       <canvas width={canvasWidth} height={canvasHeight} ref={canvas} onClick={handleClick}></canvas>
     </div>
   )
-}
+}

yarn.lock

@@ -3715,16 +3715,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-createjs-cmd@^0.1.0:
-  version "0.1.0"
-  resolved "http://npm.fxwork.kugou.net:80/createjs-cmd/-/createjs-cmd-0.1.0.tgz#2f6199f7b421ed84f92aef331872d9c73ffd9789"
-  integrity sha1-L2GZ97Qh7YT5Ku8zGHLZxz/9l4k=
-
-createjs-npm@^0.2.0:
-  version "0.2.0"
-  resolved "http://npm.fxwork.kugou.net:80/createjs-npm/-/createjs-npm-0.2.0.tgz#982b3068974b22f569beb567441eb7bbb6559113"
-  integrity sha1-mCswaJdLIvVpvrVnRB63u7ZVkRM=
-
 cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "http://npm.fxwork.kugou.net:80/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -5063,6 +5053,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "http://npm.fxwork.kugou.net:80/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fastclick@^1.0.6:
+  version "1.0.6"
+  resolved "http://npm.fxwork.kugou.net:80/fastclick/-/fastclick-1.0.6.tgz#161625b27b1a5806405936bda9a2c1926d06be6a"
+  integrity sha1-FhYlsnsaWAZAWTa9qaLBkm0Gvmo=
+
 fastq@^1.6.0:
   version "1.11.0"
   resolved "http://npm.fxwork.kugou.net:80/fastq/-/fastq-1.11.0.tgz#bb9fb955a07130a918eb63c1f5161cc32a5d0858"