cbvirtua 1.0.48 → 1.0.49

package/canvas-example-main/canvas-example-main/src/pages/minesweeper/utils.ts

@@ -0,0 +1,24 @@
+export function create2dimensionArr(x: number, y: number, defaultValue?: any) {
+  const arr = new Array(x);
+  for (let i = 0; i < y; i++) arr[i] = new Array(y).fill(defaultValue);
+  return arr;
+}
+
+export function getTextColor(num: number) {
+  const colors = [
+    '#0000FF',
+    '#008000',
+    '#FF0000',
+    '#00008B',
+    '#8B0000',
+    '#FFA500',
+    '#000000',
+    ' #808080',
+  ];
+  return colors[num - 1];
+}
+
+export function getDelayTime(step: number) {
+  return Math.log(step) * 0.08;
+}
+

package/canvas-example-main/canvas-example-main/src/pages/pageflip/index.tsx

@@ -0,0 +1,200 @@
+import { useEffect, useRef } from 'react';
+import page1 from './page1.jpg';
+
+export default function Page() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    const ctx = canvasRef.current?.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+    const page1Img = new Image();
+    page1Img.src = page1;
+
+    const W = 500,
+      H = 500;
+
+    page1Img.onload = start;
+
+    function start() {
+      if (!canvasRef.current) return;
+      const ctx = canvasRef.current?.getContext(
+        '2d'
+      ) as CanvasRenderingContext2D;
+      if (!ctx) {
+        return;
+      }
+      ctx.drawImage(page1Img, 0, 0, W, H);
+
+      /*
+        data: Uint8ClampedArray
+        图片像素数据,每个像素占4个值
+        [R,G,B,A,R,G,B,A...]
+       */
+      const imgData = ctx.getImageData(0, 0, W, H);
+      const newImgData = ctx.createImageData(W, H);
+
+      canvasRef.current.addEventListener('mousemove', onMouseMove);
+
+      function onMouseMove(e) {
+        const offsetX = clamp(e.offsetX, 0, W - 1);
+        const offsetY = clamp(e.offsetY, 0, H - 1);
+
+        ctx?.clearRect(0, 0, W, H);
+
+        // 两点连线的角度
+        const beta = Math.atan2(H - offsetY, W - offsetX);
+
+        const tanBeta = Math.tan(beta);
+        const sinBeta = Math.sin(beta);
+
+        // 两点连线m的长度
+        const len = (H - offsetY) / sinBeta;
+
+        // 过点[offsetX, offsetY]作连线的垂线，交下边于点[bottomX, bottomY]，bottomX >=0，过点[bottomX,bottomY]作直线m的垂线n，交上边或右边于点[topX,topY]。
+        // 点[bottomX, bottomY]与点[topX,topY]是模拟翻页时的折线
+        const bottomY = H;
+        let bottomX = offsetX - (bottomY - offsetY) * tanBeta;
+        if (bottomX < 0) {
+          bottomX = 0;
+        }
+
+        let topY = 0;
+        let topX = bottomX + H * tanBeta;
+        if (topX > W) {
+          topX = W;
+          topY = bottomY - (W - bottomX) / tanBeta;
+        }
+
+        // [topX,topY]和[bottomX,bottomY]两点连线l与水平线的夹角
+        const theta = Math.atan2(bottomY - topY, bottomX - topX) - Math.PI / 2;
+        const sinTheta = Math.sin(theta);
+        const cosTheta = Math.cos(theta);
+        // 直线l的斜率
+        const slope = (bottomX - topX) / (bottomY - topY);
+
+        drawCurlPage();
+        // 画辅助线
+        drawHelperLines();
+
+        function drawCurlPage() {
+          for (let y = 0; y < H; y++) {
+            // 与直线l的x交点，l左边是没有卷曲的部分，右边是卷曲的部分，分开处理。
+            const crossX = bottomX - (bottomY - y) * slope;
+            const endX = crossX >> 0;
+
+            // 直线l左边
+            for (let x = 0; x < endX; x++) {
+              const pos = (y * W + x) * 4;
+              newImgData.data[pos] = imgData.data[pos];
+              newImgData.data[pos + 1] = imgData.data[pos + 1];
+              newImgData.data[pos + 2] = imgData.data[pos + 2];
+              newImgData.data[pos + 3] = imgData.data[pos + 3];
+            }
+            // 直线l右边
+            for (let x = endX; x <= W; x++) {
+              const pos = (y * W + x) * 4;
+
+              const dx = x - crossX;
+              const d = dx * cosTheta;
+              // 当rate>0.5时，说明当前像素点映射在背面。
+              const rate = d / len;
+
+              // 页面下的阴影
+              const opacity = ((len - d) / len) * 255;
+              newImgData.data[pos] = 0;
+              newImgData.data[pos + 1] = 0;
+              newImgData.data[pos + 2] = 0;
+              newImgData.data[pos + 3] = opacity;
+
+              // 算出点在半圆映射中的位移，其中半圆的周长为len
+              // y=x 与 y=len/π·sin(πx/len) 相减得到offset。即点映射的位移
+              const offset =
+                d - Math.sin((Math.PI * d) / len) * (len / Math.PI);
+              const targetX = (x - offset * cosTheta + 0.5) >> 0;
+              const targetY = (y - offset * sinTheta + 0.5) >> 0;
+
+              const targetPos = (targetY * W + targetX) * 4;
+
+              // 页面加上简易的阴影，加强立体效果
+              const gray = rate <= 0.5 ? -127 * rate : 127 * (rate - 0.5);
+
+              newImgData.data[targetPos] = imgData.data[pos] + gray;
+              newImgData.data[targetPos + 1] = imgData.data[pos + 1] + gray;
+              newImgData.data[targetPos + 2] = imgData.data[pos + 2] + gray;
+              newImgData.data[targetPos + 3] = imgData.data[pos + 3];
+
+              // 在像素点旋转映射的时候会有漏点，做个强行插值
+              newImgData.data[targetPos + 4] = imgData.data[pos] + gray;
+              newImgData.data[targetPos + 5] = imgData.data[pos + 1] + gray;
+              newImgData.data[targetPos + 6] = imgData.data[pos + 2] + gray;
+              newImgData.data[targetPos + 7] = imgData.data[pos + 3];
+            }
+          }
+
+          ctx.putImageData(newImgData, 0, 0);
+        }
+
+        function drawHelperLines() {
+          ctx.beginPath();
+          ctx.font = `8px sans-serif`;
+          ctx.strokeStyle = 'white';
+          ctx.moveTo(W, H);
+          ctx.lineTo(offsetX, offsetY);
+          ctx.stroke();
+
+          ctx.beginPath();
+          ctx.save();
+          ctx.fillStyle = 'white';
+          ctx.arc(offsetX, offsetY, 2, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.fillText('[offsetX,offsetY]', offsetX, offsetY);
+          ctx.restore();
+
+          ctx.beginPath();
+          ctx.save();
+          ctx.fillStyle = 'white';
+          ctx.arc(bottomX, bottomY, 2, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.fillText('[bottomX,bottomY]', bottomX, bottomY);
+          ctx.restore();
+
+          ctx.beginPath();
+          ctx.save();
+          ctx.fillStyle = 'white';
+          ctx.arc(topX, topY, 2, 0, Math.PI * 2);
+          ctx.fill();
+          const textMetrics = ctx.measureText('[topX,topY]');
+          ctx.fillText(
+            '[topX,topY]',
+            topX - textMetrics.width,
+            topY +
+              textMetrics.actualBoundingBoxAscent +
+              textMetrics.actualBoundingBoxDescent
+          );
+          ctx.restore();
+
+          ctx.beginPath();
+          ctx.save();
+          ctx.strokeStyle = 'white';
+          ctx.moveTo(topX, topY);
+          ctx.lineTo(bottomX, bottomY);
+          ctx.stroke();
+          ctx.restore();
+        }
+      }
+    }
+
+    function clamp(num: number, min = num, max = num) {
+      return Math.min(max, Math.max(min, num));
+    }
+  }, []);
+
+  return (
+    <div className="w-[100vw] h-[100vh] flex items-center justify-center">
+      <canvas ref={canvasRef} width={300} height={500}></canvas>
+    </div>
+  );
+}

package/canvas-example-main/canvas-example-main/src/pages/practice/draw/index.ts

@@ -0,0 +1,367 @@
+function line(ctx: CanvasRenderingContext2D) {
+  // 画个头
+  ctx.moveTo(220, 50);
+  ctx.lineTo(280, 50);
+  ctx.lineTo(280, 100);
+  ctx.lineTo(220, 100);
+  ctx.lineTo(220, 50);
+  ctx.stroke();
+
+  // 脖子跟左手
+  ctx.moveTo(250, 100);
+  ctx.lineTo(250, 120);
+  ctx.lineTo(200, 150);
+  ctx.stroke();
+
+  // 右手
+  ctx.moveTo(250, 120);
+  ctx.lineTo(300, 150);
+  ctx.stroke();
+
+  // 身子跟左腿
+  ctx.moveTo(250, 120);
+  ctx.lineTo(250, 180);
+  ctx.lineTo(250, 180);
+  ctx.lineTo(200, 230);
+  ctx.stroke();
+
+  // 右腿
+  ctx.moveTo(250, 180);
+  ctx.lineTo(300, 230);
+  ctx.stroke();
+
+  // 左眼
+  ctx.moveTo(235, 70);
+  ctx.lineTo(242, 70);
+  ctx.stroke();
+
+  // 右眼
+  ctx.moveTo(260, 70);
+  ctx.lineTo(267, 70);
+  ctx.stroke();
+
+  // 嘴
+  ctx.moveTo(246, 90);
+  ctx.lineTo(254, 90);
+  ctx.stroke();
+}
+
+function arc(ctx: CanvasRenderingContext2D) {
+  // 脸
+  ctx.beginPath();
+  ctx.arc(200, 200, 50, 0, Math.PI * 2);
+  ctx.stroke();
+
+  // 左眼
+  ctx.beginPath();
+  ctx.arc(185, 185, 5, Math.PI, Math.PI * 2);
+  ctx.stroke();
+
+  // 右眼
+  ctx.beginPath();
+  ctx.arc(216, 185, 5, Math.PI, Math.PI * 2);
+  ctx.stroke();
+
+  // 嘴
+  ctx.beginPath();
+  ctx.arc(200, 215, 10, Math.PI / 8, (Math.PI * 7) / 8);
+  ctx.stroke();
+}
+
+function rect(ctx: CanvasRenderingContext2D) {
+  // 绘制顶部 tab
+  for (let i = 0; i < 7; i++) {
+    ctx.strokeRect(i * 80 + (i + 1) * 8, 10, 80, 30);
+  }
+
+  // 绘制四个空心方块
+  for (let i = 0; i < 4; i++) {
+    ctx.fillRect(i * 30 + (i + 1) * 8, 58, 16, 16);
+    ctx.clearRect(i * 30 + (i + 1) * 8 + 4, 62, 8, 8);
+  }
+
+  // 绘制搜索栏
+  ctx.strokeRect(160, 50, 400, 30);
+}
+
+function wavy(ctx: CanvasRenderingContext2D) {
+  ctx.fillStyle = '#4096ff';
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.bezierCurveTo(80, 90, 180, -30, 220, 30);
+  ctx.lineTo(220, 90);
+  ctx.lineTo(30, 90);
+  ctx.closePath();
+  ctx.fill();
+  ctx.lineWidth = 4;
+  ctx.strokeStyle = '#a0d911';
+  ctx.stroke();
+}
+
+function histogram(ctx: CanvasRenderingContext2D) {
+  ctx.fillStyle = 'white';
+  ctx.fillRect(0, 0, 500, 500);
+
+  ctx.fillStyle = 'blue';
+
+  ctx.fillStyle = 'black';
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(30, 10);
+  ctx.lineTo(30, 460);
+  ctx.lineTo(490, 460);
+  ctx.stroke();
+
+  ctx.fillStyle = 'black';
+  for (let i = 0; i < 6; i++) {
+    ctx.fillText(String((5 - i) * 20), 4, i * 80 + 62);
+    ctx.beginPath();
+    ctx.moveTo(25, i * 80 + 60);
+    ctx.lineTo(30, i * 80 + 60);
+    ctx.stroke();
+  }
+
+  const labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
+  for (let i = 0; i < 5; i++) {
+    ctx.fillText(labels[i], 50 + i * 100, 475);
+  }
+
+  ctx.fillStyle = 'blue';
+  const data = [16, 68, 20, 30, 54];
+  for (let i = 0; i < data.length; i++) {
+    ctx.fillRect(40 + i * 100, 460 - data[i] * 5, 45, data[i] * 5);
+  }
+}
+
+function pieChart(ctx: CanvasRenderingContext2D) {
+  ctx.fillStyle = 'white';
+  ctx.fillRect(0, 0, 500, 500);
+
+  const colors = ['orange', 'green', 'blue', 'yellow', 'teal'];
+  let total = 0;
+  const data = [100, 68, 20, 30, 100];
+  for (let i = 0; i < data.length; i++) {
+    total += data[i];
+  }
+
+  let preAngle = 0;
+  for (let i = 0; i < data.length; i++) {
+    const fraction = data[i] / total;
+    const angle = preAngle + fraction * Math.PI * 2;
+
+    // ctx.fillStyle = colors[i];
+    const grad = ctx.createRadialGradient(250, 250, 5, 250, 250, 100);
+    grad.addColorStop(0, 'white');
+    grad.addColorStop(1, colors[i]);
+    ctx.fillStyle = grad;
+
+    ctx.beginPath();
+    ctx.moveTo(250, 250);
+    ctx.arc(250, 250, 100, preAngle, angle, false);
+    ctx.closePath();
+    ctx.fill();
+    ctx.strokeStyle = 'black';
+    ctx.stroke();
+
+    preAngle = angle;
+  }
+
+  ctx.fillStyle = 'black';
+  ctx.font = '24pt sans-serif';
+
+  const text = 'Sales Data from 2025';
+  const metrics = ctx.measureText(text);
+
+  ctx.fillText(text, 250 - metrics.width / 2, 400);
+}
+
+function ticTac(ctx: CanvasRenderingContext2D) {
+  // 绘制网格
+  ctx.lineWidth = 1;
+  ctx.rect(50, 50, 300, 300);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(50, 150);
+  ctx.lineTo(350, 150);
+
+  ctx.moveTo(50, 250);
+  ctx.lineTo(350, 250);
+
+  ctx.moveTo(150, 50);
+  ctx.lineTo(150, 350);
+
+  ctx.moveTo(250, 50);
+  ctx.lineTo(250, 350);
+
+  ctx.stroke();
+
+  // 绘制 ❌
+  const drawX = (x: number, y: number) => {
+    ctx.beginPath();
+    ctx.moveTo(x, x);
+    ctx.lineTo(y, y);
+    ctx.moveTo(y, x);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  };
+
+  // 绘制圆
+  const drawArc = (x: number, y: number) => {
+    ctx.beginPath();
+    ctx.arc(x, y, 30, 0, Math.PI * 2);
+    ctx.stroke();
+  };
+
+  const steps = [
+    {
+      type: 'arc',
+      x: 100,
+      y: 200,
+    },
+    {
+      type: 'arc',
+      x: 300,
+      y: 100,
+    },
+    {
+      type: 'x',
+      x: 175,
+      y: 225,
+    },
+    {
+      type: 'x',
+      x: 75,
+      y: 125,
+    },
+    {
+      type: 'arc',
+      x: 300,
+      y: 300,
+    },
+  ];
+  steps.forEach((step) => {
+    const { type, x, y } = step;
+    if (type === 'arc') {
+      drawArc(x, y);
+    } else if (type == 'x') {
+      drawX(x, y);
+    }
+  });
+}
+
+function brick(ctx: CanvasRenderingContext2D) {
+  const createRgbVal = (r: number, g: number, b: number) => {
+    return `rgb(${r},${g},${b})`;
+  };
+
+  const w = 15;
+
+  const drawRect = (x: number, y: number) => {
+    ctx.beginPath();
+    ctx.rect(x * w, y * w, w, w);
+    const colorW = w + 5;
+
+    if (
+      (x % 3 === 0 && x !== 0 && (y === 0 || y === n - 1)) ||
+      (y % 3 === 0 && y !== 0 && (x === 0 || x === n - 1))
+    ) {
+      ctx.fillStyle = 'white';
+    } else if (x % 3 === (y + 2) % 3) {
+      ctx.fillStyle = createRgbVal(
+        170,
+        0 + (x * colorW) / 2 - 8,
+        0 + (y * colorW) / 2 - 8
+      );
+    } else {
+      ctx.fillStyle = createRgbVal(
+        170,
+        0 + (x * colorW) / 2,
+        0 + (y * colorW) / 2
+      );
+    }
+
+    ctx.fill();
+  };
+
+  const n = 25;
+  for (let i = 0; i < n; i++) {
+    for (let j = 0; j < n; j++) {
+      drawRect(i, j);
+    }
+  }
+}
+
+function test(ctx: CanvasRenderingContext2D) {
+  const gradient = ctx.createRadialGradient(200, 300, 10, 200, 0, 100);
+
+  gradient.addColorStop(0, 'blue');
+  gradient.addColorStop(0.25, 'white');
+  gradient.addColorStop(0.5, 'purple');
+  gradient.addColorStop(0.75, 'red');
+  gradient.addColorStop(1, 'yellow');
+
+  ctx.fillStyle = gradient;
+  ctx.rect(0, 0, 400, 300);
+  ctx.fill();
+}
+
+function love(ctx: CanvasRenderingContext2D) {
+  const drawLeft = () => {
+    ctx.beginPath();
+
+    const p0 = [200, 200];
+    const p1 = [110, 170];
+    const p2 = [143, 260];
+    const p3 = [200, 295];
+    ctx.moveTo(p0[0], p0[1]);
+    ctx.bezierCurveTo(p1[0], p1[1], p2[0], p2[1], p3[0], p3[1]);
+    ctx.fillStyle = 'red';
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.moveTo(p0[0], p0[1]);
+    ctx.lineWidth = 1;
+    [p1, p2, p3].forEach((p) => {
+      ctx.lineTo(p[0], p[1]);
+    });
+    ctx.strokeStyle = 'blue';
+    ctx.stroke();
+  };
+
+  const drawRight = () => {
+    ctx.beginPath();
+    const p0 = [200, 200];
+    const p1 = [290, 165];
+    const p2 = [257, 260];
+    const p3 = [200, 295];
+    ctx.moveTo(p0[0], p0[1]);
+    ctx.bezierCurveTo(p1[0], p1[1], p2[0], p2[1], p3[0], p3[1]);
+    ctx.fillStyle = 'red';
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.moveTo(p0[0], p0[1]);
+    ctx.lineWidth = 1;
+    [p1, p2, p3].forEach((p) => {
+      ctx.lineTo(p[0], p[1]);
+    });
+    ctx.strokeStyle = 'blue';
+    ctx.stroke();
+  };
+  drawLeft();
+  drawRight();
+}
+
+export const drawFns = {
+  love,
+  brick,
+  'pie-chart': pieChart,
+  histogram,
+  wavy,
+  line,
+  arc,
+  rect,
+  ticTac,
+  test,
+};

package/canvas-example-main/canvas-example-main/src/pages/practice/index.module.less

@@ -0,0 +1,26 @@
+.container {
+  height: 100vh;
+  padding: 30px;
+  background-color: #f4f5f5;
+
+  .card {
+    width: 700px;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+
+      .tab {
+        height: 40px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 5px;
+
+        .tag {
+          border: 1px solid rgb(217, 217, 217);
+        }
+      }
+    }
+  }
+}

package/canvas-example-main/canvas-example-main/src/pages/practice/index.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+import { Card, Tag } from 'antd';
+import { drawFns } from './draw';
+import S from './index.module.less';
+
+const list = Object.keys(drawFns) as (keyof typeof drawFns)[];
+
+export default function Page() {
+  const [active, setActive] = useState(list[0]);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    const ctx = canvasRef.current?.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+
+    ctx.reset();
+
+    const fn = drawFns[active];
+    fn(ctx);
+  }, [active]);
+
+  return (
+    <div className={S.container}>
+      <Card title="示例" className={S.card}>
+        <div className={S.content}>
+          <div className={S.tab}>
+            {list.map((label) => (
+              <Tag.CheckableTag
+                key={label}
+                checked={active === label}
+                onClick={() => {
+                  setActive(label);
+                }}
+                className={S.tag}
+              >
+                {label}
+              </Tag.CheckableTag>
+            ))}
+          </div>
+
+          <canvas
+            ref={canvasRef}
+            width="500"
+            height="500"
+            style={{ border: '1px solid #000000' }}
+          ></canvas>
+        </div>
+      </Card>
+    </div>
+  );
+}