diff --git a/package.json b/package.json index 4fadbf4..53fb75f 100644 --- 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 index de0ce6e..18954df 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ importers: fetch-jsonp: specifier: ^1.3.0 version: 1.3.0 + localeData: + specifier: link:dayjs/plugin/localeData + version: link:dayjs/plugin/localeData lodash-es: specifier: ^4.17.21 version: 4.17.21 @@ -65,6 +68,9 @@ importers: weekOfYear: specifier: link:dayjs/plugin/weekOfYear version: link:dayjs/plugin/weekOfYear + weekday: + specifier: link:dayjs/plugin/weekday + version: link:dayjs/plugin/weekday devDependencies: '@tsconfig/node14': specifier: ^14.1.0 diff --git a/src/pages/EditPage/Header/index.tsx b/src/pages/EditPage/Header/index.tsx index 39d4636..d7b47d3 100644 --- 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 index 0005c98..e442ade 100644 --- a/src/pages/EditPage/components/TimeSection/Day.tsx +++ b/src/pages/EditPage/components/TimeSection/Day.tsx @@ -39,7 +39,7 @@ const Day = () => {
{}} 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 index 0be695b..0d4577d 100644 --- a/src/pages/EditPage/components/TimeSection/Month.tsx +++ b/src/pages/EditPage/components/TimeSection/Month.tsx @@ -1,5 +1,5 @@ -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"; @@ -7,11 +7,16 @@ 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 (
{ + setData(v); + }} picker="month" />
@@ -58,7 +107,13 @@ const Month = () => { > 7等分线 - +
); diff --git a/src/pages/EditPage/components/TimeSection/WeekTool.tsx b/src/pages/EditPage/components/TimeSection/WeekTool.tsx index 7b8425a..81b46cd 100644 --- 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,15 +64,15 @@ const Week = () => { store.addObject(textGroup); }; - const onChangeTime = () => {}; - return (
{ + setData(v); + }} picker="week" />
@@ -85,7 +80,7 @@ const Week = () => { + >{`WEEK-${date.week()}`}
); diff --git a/src/pages/EditPage/components/TimeSection/index.tsx b/src/pages/EditPage/components/TimeSection/index.tsx index 469f831..1a575f4 100644 --- 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: , - // }, { key: "2", label: "月计划", diff --git a/src/utils/daygird.ts b/src/utils/daygird.ts index 99100a7..7c043e9 100644 --- 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);