feat: 添加月历功能

mjhcc365 · Aug 19, 2024 · 6e55b7b · 6e55b7b
1 parent e23ff1f
commit 6e55b7b
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -24,10 +24,12 @@
     "clipper-lib": "^6.4.2",
     "fabric": "6.0.0",
     "fetch-jsonp": "^1.3.0",
+    "localeData": "link:dayjs/plugin/localeData",
     "lodash-es": "^4.17.21",
     "number-precision": "^1.6.0",
     "raphael": "^2.3.0",
-    "weekOfYear": "link:dayjs/plugin/weekOfYear"
+    "weekOfYear": "link:dayjs/plugin/weekOfYear",
+    "weekday": "link:dayjs/plugin/weekday"
   },
   "devDependencies": {
     "@tsconfig/node14": "^14.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/EditPage/Header/index.tsx b/src/pages/EditPage/Header/index.tsx
@@ -15,7 +15,7 @@ const MJHeader = () => {
   const handleClickPic = () => {
     var dataURL = store.canvas?.toDataURL({
       format: "png", // 指定导出格式，可以是 'png', 'jpeg', 'webp' 等
-      quality: 0.8,
+      quality: 100,
     });
     download(dataURL, "fabric_image.png");
   };

diff --git a/src/pages/EditPage/components/TimeSection/Day.tsx b/src/pages/EditPage/components/TimeSection/Day.tsx
@@ -39,7 +39,7 @@ const Day = () => {
       <div className="time-section-tool">
         <DatePicker
           value={date}
-          onChange={onChangeTime}
+          onChange={() => {}}
           style={{ width: "50%" }}
           allowClear={false}
           picker="date"

diff --git a/src/pages/EditPage/components/TimeSection/Month.tsx b/src/pages/EditPage/components/TimeSection/Month.tsx
@@ -1,17 +1,22 @@
-import { useContext } from "react";
-import { FabricObject } from "fabric";
+import { useContext, useState } from "react";
+import { FabricObject, Textbox } from "fabric";
 import { DatePicker, Button } from "antd";
 import dayjs from "dayjs";
 
 import { Group, Line } from "fabric";
 import { nanoid } from "nanoid";
 import { CanvasStoreContext } from "@/store/canvas";
 
+import { getDaysInMonth, getFirstDayOfMonth } from "@/utils/daygird";
+import { WEEK_STRING_ARR } from "./WeekTool";
+
 import "./Image.less";
 
 const Month = () => {
   const store = useContext(CanvasStoreContext);
 
+  const [date, setData] = useState(dayjs());
+
   const drawMonth = () => {
     const { width, height, top, left } =
       store.getWorkSpaceDraw() as FabricObject;
@@ -40,13 +45,57 @@ const Month = () => {
     store.addObject(group);
   };
 
+  const handleMonth = () => {
+    const textArr = [];
+    let daysInMonth = getDaysInMonth(date);
+    let firstDayOfMonth = getFirstDayOfMonth(date);
+
+    const { x, y } = store.getCenterPoint();
+    for (let i = 0; i < daysInMonth; i++) {
+      let left = ((i + firstDayOfMonth) % 7) * 7 * store.zoom + x;
+      let top = Math.floor((i + firstDayOfMonth) / 7) * 7 * store.zoom + y;
+
+      let text = new Textbox(String(i + 1), {
+        left: left,
+        top: top,
+        fontSize: 14,
+        width: 15,
+        height: 15,
+        fontFamily: store.defaultFont,
+        fill: store.defaultColor,
+        textAlign: "center",
+      });
+      textArr.push(text);
+    }
+
+    for (let i = 1; i <= 7; i++) {
+      const rect = new Textbox(WEEK_STRING_ARR[i - 1], {
+        top: y - 5 * store.zoom, // 距离画布顶部距离
+        left: 7 * store.zoom * (i - 1) + x, // 距离画布左侧距离
+        width: 15,
+        height: 15,
+        fontSize: 14,
+        fill: store.defaultColor,
+        fontFamily: store.defaultFont,
+        fontWeight: "bold",
+        textAlign: "center", // 水平居中
+      });
+      textArr.push(rect);
+    }
+    const group = new Group(textArr);
+    store.addObject(group);
+  };
+
   return (
     <div className="time-section-class">
       <div className="time-section-tool">
         <DatePicker
           style={{ width: "50%" }}
           allowClear={false}
-          defaultValue={dayjs()}
+          value={date}
+          onChange={(v) => {
+            setData(v);
+          }}
           picker="month"
         />
       </div>
@@ -58,7 +107,13 @@ const Month = () => {
         >
           7等分线
         </Button>
-        <Button onClick={() => {}}>月历</Button>
+        <Button
+          onClick={() => {
+            handleMonth();
+          }}
+        >
+          月历
+        </Button>
       </div>
     </div>
   );

diff --git a/src/pages/EditPage/components/TimeSection/WeekTool.tsx b/src/pages/EditPage/components/TimeSection/WeekTool.tsx
@@ -3,30 +3,25 @@ import { DatePicker, Button } from "antd";
 import dayjs from "dayjs";
 
 import { Group, Rect, Textbox } from "fabric";
-import { useDraw } from "./tools";
 import { observer } from "mobx-react-lite";
 import { CanvasStoreContext } from "@/store/canvas";
 import PenImg from "@/assets/pen.jpg";
 import LogoImg from "@/assets/logo.png";
+import weekday from "dayjs/plugin/weekday";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+import localeData from "dayjs/plugin/localeData";
 
 import "./Image.less";
 
-const weekOfYear = require("dayjs/plugin/weekOfYear");
 dayjs.extend(weekOfYear);
+dayjs.extend(weekday);
+dayjs.extend(localeData);
 
-const YearsTemp = [
-  {
-    src: PenImg,
-  },
-  {
-    src: LogoImg,
-  },
-];
-
-const WEEK_STRING_ARR = ["M", "T", "W", "T", "F", "S", "S"];
+export const WEEK_STRING_ARR = ["S", "M", "T", "W", "T", "F", "S"];
 
 const Week = () => {
   const store = useContext(CanvasStoreContext);
+  const [date, setData] = useState(dayjs());
 
   const onDrawWeek = () => {
     // 画方框
@@ -69,23 +64,23 @@ const Week = () => {
     store.addObject(textGroup);
   };
 
-  const onChangeTime = () => {};
-
   return (
     <div className="time-section-class">
       <div className="time-section-tool">
         <DatePicker
-          onChange={onChangeTime}
           style={{ width: "50%" }}
-          allowClear={false}
+          value={date}
+          onChange={(v) => {
+            setData(v);
+          }}
           picker="week"
         />
       </div>
       <div className="time-section-images">
         <Button onClick={onDrawWeek}>画一组打卡</Button>
         <Button
           onClick={() => {
-            const text = new Textbox(`WEEK-${dayjs().week()}`, {
+            const text = new Textbox(`WEEK-${date.week()}`, {
               top: 80, // 距离画布顶部距离
               left: 100, // 距离画布左侧距离
               fill: store.defaultColor,
@@ -94,7 +89,7 @@ const Week = () => {
             });
             store.addObject(text);
           }}
-        >{`WEEK-${dayjs().week()}`}</Button>
+        >{`WEEK-${date.week()}`}</Button>
       </div>
     </div>
   );

diff --git a/src/pages/EditPage/components/TimeSection/index.tsx b/src/pages/EditPage/components/TimeSection/index.tsx
@@ -4,14 +4,8 @@ import type { TabsProps } from "antd";
 import Week from "./WeekTool";
 import Month from "./Month";
 import Day from "./Day";
-// import Weather from "./Weather";
 
 const items: TabsProps["items"] = [
-  // {
-  //   key: "1",
-  //   label: "天气",
-  //   children: <Weather />,
-  // },
   {
     key: "2",
     label: "月计划",

diff --git a/src/utils/daygird.ts b/src/utils/daygird.ts
@@ -3,3 +3,36 @@
 // export const
 
 // https://fullcalendar.io/docs#toc
+
+import dayjs from "dayjs";
+
+import { Textbox } from "fabric";
+
+export function getDaysInMonth(date: any) {
+  return date.daysInMonth();
+}
+
+export function getFirstDayOfMonth(date: any) {
+  return date.startOf("month").day();
+}
+
+function drawCalendar(date: any) {
+  let daysInMonth = getDaysInMonth(date);
+  let firstDayOfMonth = getFirstDayOfMonth(date);
+
+  for (let i = 0; i < daysInMonth; i++) {
+    let x = ((i + firstDayOfMonth) % 7) * 70 + 35;
+    let y = Math.floor((i + firstDayOfMonth) / 7) * 70 + 35;
+
+    let text = new Textbox(String(i + 1), {
+      left: x,
+      top: y,
+      fontSize: 20,
+      originX: "center",
+      originY: "center",
+    });
+  }
+}
+
+let date = dayjs();
+drawCalendar(date);