From 0f4ff8fe0619aa5727a919b7f37e90e41386021c Mon Sep 17 00:00:00 2001 From: mjhcc365 <2209011911@qq.com> Date: Mon, 17 Jun 2024 22:14:13 +0800 Subject: [PATCH] feat: toggle rule cliplINE --- src/assets/iconfont/iconfont.js | 2 +- src/pages/EditPage/Content/BottomTools.tsx | 41 +++ src/pages/EditPage/Content/TopTools.less | 2 +- src/pages/EditPage/Content/TopTools.tsx | 8 +- src/pages/EditPage/Content/index.less | 19 ++ src/pages/EditPage/Content/index.tsx | 32 +-- src/pages/EditPage/Header/index.tsx | 34 ++- src/pages/EditPage/index.tsx | 3 + src/pages/EditPage/store/canvas.ts | 307 +++------------------ 9 files changed, 146 insertions(+), 302 deletions(-) create mode 100644 src/pages/EditPage/Content/BottomTools.tsx diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js index 07c2708..c5c1f0d 100644 --- a/src/assets/iconfont/iconfont.js +++ b/src/assets/iconfont/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_4408902='',function(a){var c=(c=document.getElementsByTagName("script"))[c.length-1],h=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var l,t,p,i,v,z=function(c,h){h.parentNode.insertBefore(c,h)};if(h&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}l=function(){var c,h=document.createElement("div");h.innerHTML=a._iconfont_svg_string_4408902,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(c=document.body).firstChild?z(h,c.firstChild):c.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),l()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(p=l,i=a.document,v=!1,o(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,d())})}function d(){v||(v=!0,p())}function o(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(o,50)}d()}}(window); \ No newline at end of file +window._iconfont_svg_string_4408902='',function(a){var c=(c=document.getElementsByTagName("script"))[c.length-1],h=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var l,t,p,i,v,z=function(c,h){h.parentNode.insertBefore(c,h)};if(h&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}l=function(){var c,h=document.createElement("div");h.innerHTML=a._iconfont_svg_string_4408902,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(c=document.body).firstChild?z(h,c.firstChild):c.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),l()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(p=l,i=a.document,v=!1,d(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,o())})}function o(){v||(v=!0,p())}function d(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}o()}}(window); \ No newline at end of file diff --git a/src/pages/EditPage/Content/BottomTools.tsx b/src/pages/EditPage/Content/BottomTools.tsx new file mode 100644 index 0000000..2b91ace --- /dev/null +++ b/src/pages/EditPage/Content/BottomTools.tsx @@ -0,0 +1,41 @@ +import { observer } from "mobx-react-lite"; +// import { MainTools } from "@/pages/EditPage/components/Tools/Tools"; +import { stores as store } from "@/pages/EditPage/store/main"; +import Icon from "@/HbsUI/Icon"; + +import "./index.less"; + +const BottomTools = () => { + /** 尺子 */ + const toggleRuler = () => { + store.canvasStore.toggleRuler(); + }; + + /** 隐藏|显示 安全线 */ + const toggleClipLine = () => { + store.canvasStore.toggleClipLine(); + }; + + /** 出血线 */ + const toggleSafeLine = () => { + store.canvasStore.toggleSafeLine(); + }; + + return ( + <> +
+
+ +
+
+ +
+
+ +
+
+ + ); +}; + +export default observer(BottomTools); diff --git a/src/pages/EditPage/Content/TopTools.less b/src/pages/EditPage/Content/TopTools.less index 51a6de3..d62bc0b 100644 --- a/src/pages/EditPage/Content/TopTools.less +++ b/src/pages/EditPage/Content/TopTools.less @@ -1,7 +1,7 @@ .section-top-tool { position: absolute; justify-content: flex-end; - top: 0; + bottom: 0; right: 0; background: #fff; width: 100%; diff --git a/src/pages/EditPage/Content/TopTools.tsx b/src/pages/EditPage/Content/TopTools.tsx index ebe424d..042278b 100644 --- a/src/pages/EditPage/Content/TopTools.tsx +++ b/src/pages/EditPage/Content/TopTools.tsx @@ -7,13 +7,13 @@ import "./TopTools.less"; const TopTools = () => { return ( <> - {store?.canvasStore?.activeType ? ( + {/* {store?.canvasStore?.activeType ? (
- ) : ( -
{store?.canvasStore?.activeType}
- )} + ) : ( */} +
{store?.canvasStore?.activeType}
+ {/* )} */} ); }; diff --git a/src/pages/EditPage/Content/index.less b/src/pages/EditPage/Content/index.less index e69de29..76ee2a6 100644 --- a/src/pages/EditPage/Content/index.less +++ b/src/pages/EditPage/Content/index.less @@ -0,0 +1,19 @@ +.section-bottom-tool{ + position: absolute; + bottom: 0; + right: 0; + width: 100%; + height: 48px; + border: 1px solid #f5f5f5; + border-top: none; + display: flex; + gap: 24px; + align-items: center; + padding: 0 24px; + color: black; + justify-content: center; + .icon{ + cursor: pointer; + color: pink; + } +} \ No newline at end of file diff --git a/src/pages/EditPage/Content/index.tsx b/src/pages/EditPage/Content/index.tsx index acd0c20..d15c730 100644 --- a/src/pages/EditPage/Content/index.tsx +++ b/src/pages/EditPage/Content/index.tsx @@ -1,6 +1,7 @@ import { useRef, useEffect } from "react"; import * as fabric from "fabric"; import TopTools from "./TopTools"; +import BottomTools from "./BottomTools"; import { observer } from "mobx-react-lite"; import { stores as store } from "@/pages/EditPage/store/main"; // import { FabricCanvas } from "@/extension/fabricCanvas"; @@ -9,29 +10,25 @@ const MainContent = () => { const canvasBoxRef = useRef(null); const canvasEl = useRef(null); - const handleEnter = () => { - console.log("-->回车"); - }; + // const handleEnter = () => { + // console.log("-->回车"); + // }; - const onKeyDown = (e: { code: any }) => { - const code = e.code; - switch (code) { - case "Enter": - handleEnter(); - break; - default: - break; - } - }; + // const onKeyDown = (e: { code: any }) => { + // const code = e.code; + // switch (code) { + // case "Enter": + // handleEnter(); + // break; + // default: + // break; + // } + // }; useEffect(() => { const wrapperWidth = canvasBoxRef.current?.getBoundingClientRect().width; const wrapperHeight = canvasBoxRef.current?.getBoundingClientRect().height; - - console.log("===>", canvasBoxRef.current, wrapperHeight, wrapperWidth); - const options = { - backgroundColor: "pink", absolutePositioned: true, selectable: false, width: wrapperWidth, @@ -66,6 +63,7 @@ const MainContent = () => { > + ); }; diff --git a/src/pages/EditPage/Header/index.tsx b/src/pages/EditPage/Header/index.tsx index 66e0de9..4527bd5 100644 --- a/src/pages/EditPage/Header/index.tsx +++ b/src/pages/EditPage/Header/index.tsx @@ -63,7 +63,7 @@ const MJHeader = () => { }; const handleRule = () => { - new FabricRuler(store.canvasStore.canvas); + // new FabricRuler(store.canvasStore.canvas); store.canvasStore.canvas?.renderAll(); }; @@ -82,10 +82,33 @@ const MJHeader = () => {
- - - - + + + + + + {/* */} + {/* */} + {/* */} + {/* */} {/* */} @@ -100,7 +123,6 @@ const MJHeader = () => { }} onChange={handleFontChange} /> -
); diff --git a/src/pages/EditPage/index.tsx b/src/pages/EditPage/index.tsx index d81ad7e..8e0730c 100644 --- a/src/pages/EditPage/index.tsx +++ b/src/pages/EditPage/index.tsx @@ -36,6 +36,9 @@ const HomePage = () => { + + 工具库 + diff --git a/src/pages/EditPage/store/canvas.ts b/src/pages/EditPage/store/canvas.ts index 368f81b..47be557 100644 --- a/src/pages/EditPage/store/canvas.ts +++ b/src/pages/EditPage/store/canvas.ts @@ -88,14 +88,21 @@ class FabricCanvas { elementCoords: Point[] = []; elementHover: string = ""; - canvas: Canvas = null; + canvas: Canvas | null = null; activeObj: FabricObject | null = null; + showSafeLine: boolean = true; + showClipLine: boolean = true; + ruler: any = null; + constructor() { makeAutoObservable(this, { canvas: observable, activeObj: observable, zoom: observable, + showSafeLine: observable, + showClipLine: observable, + ruler: observable, }); } @@ -138,7 +145,7 @@ class FabricCanvas { originY: "top", left: 0, top: 0, - width: this.canvas.width - 220, + width: this.canvas.width - 100, height: this.canvas.height - 40, }); @@ -383,277 +390,31 @@ class FabricCanvas { }); }; - // initHammer = () => { - // let pausePanning = false; - - // let lastX: number = 0; - // let lastY: number = 0; - - // let adjustDeltaX = 0; - // let adjustDeltaY = 0; - // let adjustScale = 1; - // let adjustScaleX = 1; - // let adjustScaleY = 1; - // let adjustRotation = 0; - - // let currentDeltaX = 0; - // let currentDeltaY = 0; - // let currentScale = 0; - // let currentScaleX = 0; - // let currentScaleY = 0; - // let currentRotation = 0; - - // // const [canvas] = useCanvas(); - // // const fabricStore = useFabricStore(); - // // const { zoom } = storeToRefs(fabricStore); - // const hammer = new Hammer.Manager(this.canvas.lowerCanvasEl); - // const pan = new Hammer.Pan(); - // const rotate = new Hammer.Rotate(); - // const pinch = new Hammer.Pinch(); - // hammer.add([pan, pinch, rotate]); - // hammer.get("pan").set({ enable: true, direction: Hammer.DIRECTION_ALL }); - // hammer.get("rotate").set({ enable: true }); - // hammer.get("pinch").set({ enable: true }); - - // hammer.on("panstart pinchstart rotatestart", (e) => { - // adjustRotation -= e.rotation; - // lastX = e.center.x; - // lastY = e.center.y; - // if (canvas.getActiveObject()) { - // const object = canvas.getActiveObject(); - // if (!object) return; - // adjustScaleX = object.scaleX; - // adjustScaleY = object.scaleY; - // } - // }); - - // hammer.on("panmove", (e) => { - // if ( - // canvas.getActiveObject() == undefined && - // pausePanning == false && - // !canvas.isDrawingMode && - // e.maxPointers == 1 - // ) { - // currentDeltaX = -(lastX - e.center.x); - // currentDeltaY = -(lastY - e.center.y); - // let delta = new Point(currentDeltaX, currentDeltaY); - - // canvas.relativePan(delta); - // canvas.renderAll(); - - // lastX = e.center.x; - // lastY = e.center.y; - // } - // }); - - // const drawRotateGuidelines = (object: FabricObject, angle: number) => { - // const ctx = canvas.getSelectionContext(); - // ctx.clearRect(0, 0, canvas.width, canvas.height); - - // if (rotateSnaps.includes(Math.abs(Math.ceil(object.angle)))) { - // const scale = object.scaleX; - // let XYstart = util.transformPoint( - // new Point(object.left - (object.width * scale) / 2, object.top), - // canvas.viewportTransform - // ); - // const centerPoint = object.getCenterPoint(); - // var XYmid = util.transformPoint( - // new Point(centerPoint.x, centerPoint.y), - // canvas.viewportTransform - // ); - // var XYend = util.transformPoint( - // new Point(object.left + (object.width * scale) / 2, object.top), - // canvas.viewportTransform - // ); - // ctx.save(); - // let middlePoint = { x: XYmid.x, y: XYmid.y }; - // ctx.translate(middlePoint.x, middlePoint.y); - // ctx.rotate((Math.PI / 180) * object.angle); - // ctx.translate(-middlePoint.x, -middlePoint.y); - // // ctx.strokeStyle = centerLineColor - // // ctx.lineWidth = centerLineWidth - // ctx.strokeStyle = "#3988ad"; - // ctx.lineWidth = 1; - // ctx.beginPath(); - // ctx.moveTo(XYstart.x, XYstart.y); - // ctx.lineTo(XYend.x, XYend.y); - // ctx.stroke(); - // ctx.restore(); - - // XYstart = util.transformPoint( - // new Point(object.left - (object.height * scale) / 2, object.top), - // canvas.viewportTransform - // ); - // XYend = util.transformPoint( - // new Point(object.left + (object.height * scale) / 2, object.top), - // canvas.viewportTransform - // ); - // ctx.save(); - - // middlePoint = { x: XYmid.x, y: XYmid.y }; - // ctx.translate(middlePoint.x, middlePoint.y); - // ctx.rotate((Math.PI / 180) * (object.angle + 90)); - // ctx.translate(-middlePoint.x, -middlePoint.y); - // ctx.strokeStyle = "#3988ad"; - // ctx.lineWidth = 1; - // ctx.beginPath(); - // ctx.moveTo(XYstart.x, XYstart.y); - // ctx.lineTo(XYend.x, XYend.y); - // ctx.stroke(); - // ctx.restore(); - - // canvas.renderAll(); - // } - // }; - - // const between = (value: number, first: number, last: number) => { - // let lower = Math.min(first, last), - // upper = Math.max(first, last); - // return value >= lower && value <= upper; - // }; - - // /** - // const checkRotateSnap = (degree: number, object: FabricObject) => { - // var inDegree = degree + adjustRotation - // var newDegree = null - // if (object.lockRotation == true) { - // if (between(Math.abs(Math.ceil(inDegree)), Math.abs(object.lockedDegree) - 10, Math.abs(object.lockedDegree) + 10)) { - // object.lockRotation = true - // newDegree = object.lockedDegree - // } - // else { - // object.lockRotation = false - // object.lockedDegree = null - // newDegree = degree + adjustRotation - // contextLines.clearRect(0, 0, canvas.width, canvas.height); - // } - // } - // else { - - // if (rotateSnaps.includes(Math.abs(Math.ceil(inDegree)))) { - // object.lockRotation = true - - // newDegree = Math.ceil(degree + adjustRotation) - - // object.lockedDegree = newDegree - // } else { - - // object.lockRotation = false - // object.lockedDegree = null - // newDegree = degree + adjustRotation - // contextLines.clearRect(0, 0, canvas.width, canvas.height); - // } - // } - // // update_info() - // return newDegree - - // } - // **/ - - // hammer.on("pinchmove rotatemove", (e) => { - // console.log(e.scale); - // canvas.zoomToPoint({ x: e.deltaX, y: e.deltaY }, e.scale); - // return; - // // if(canvas.getActiveObject() && e.maxPointers == 2) { - - // // this.pausePanning = true - // // var object = canvas.getActiveObject() - - // // this.currentRotation = checkRotateSnap(e.rotation, object) - - // // //console.log("this.currentRotation: " + this.currentRotation) - - // // if (this.currentRotation != null) { - // // object.rotate(this.currentRotation) - // // } - - // // // ----------------------------------- - // // // SCALING - // // // ----------------------------------- - - // // currentScale = adjustScale * e.scale - // // currentScaleX = adjustScaleX * e.scale * 1 - // // currentScaleY = adjustScaleY * e.scale * 1 - - // // // Blocks object from being resized too small (and maintains aspect ratio) - // // if (currentScaleX > object.minScaleLimit && currentScaleY > object.minScaleLimit) { - - // // } else { - // // // console.log("object has reached a limit") - // // currentScaleX = object.scaleX //Math.max(currentScaleX, object.minScaleLimit) - // // currentScaleY = object.scaleY //Math.max(currentScaleY, object.minScaleLimit) - // // } - - // // this.pausePanning = true - - // // let deltaScaleX = currentScaleX - // // let deltaScaleY = currentScaleY - - // // // Temporarily locking regular object dragging during the gesture, just to smooth out jitteryness - // // object.set({ lockMovementX: true, lockMovementY: true }) - - // // object.set('scaleX', deltaScaleX) - // // object.set('scaleY', deltaScaleY) - // // object.setCoords() - - // // canvas.renderAll() - - // // if(object.lockRotation == true) { - - // // drawRotateGuidelines(object) - - // // } - - // // object.setCoords() - - // // canvas.renderAll() - - // // } - // }); - - // hammer.on("panend pinchend rotateend", (e) => { - // pausePanning = false; - // // contextLines.clearRect(0, 0, canvas.width, canvas.height); - // const object = canvas.getActiveObject(); - // if (object) { - // adjustScale = currentScale; - // adjustRotation = currentRotation; - // adjustDeltaX = currentDeltaX; - // adjustDeltaY = currentDeltaY; - // adjustScaleX = currentScaleX; - // adjustScaleY = currentScaleY; - - // setTimeout(function () { - // object.set({ - // lockRotation: false, - // lockMovementX: false, - // lockMovementY: false, - // }); - // }, 300); - // } - // canvas.renderAll(); - // }); - - // canvas.on("object:rotating", function (e) { - // if (rotateSnaps.includes(Math.abs(Math.ceil(e.target.angle)))) { - // e.target.lockedDegree = Math.ceil(e.target.angle); - // } else { - // e.target.lockedDegree = null; - // } - // adjustRotation = e.target.angle; - // const object = canvas.getActiveObject(); - // if (!object) return; - // drawRotateGuidelines(object, e.target.angle); - // }); - // }; - - // loadCanvasFormObj = (snapshot: any) => { - // if (!snapshot) return; - // this.canvas?.loadFromJSON(snapshot.templates[0], () => { - // console.log("==>loadFromJSON", snapshot.templates[0]); - // }); - // this.canvas?.renderAll(); - // }; + /** 隐藏|显示 出血线 */ + toggleSafeLine = () => { + const obj = this.canvas + .getObjects() + .filter((ele) => ele?.id === "WorkSpaceSafeType"); + console.log("===>obj", obj); + obj.map((item) => item.set({ visible: !this.showSafeLine })); + this.showSafeLine = !this.showSafeLine; + this.canvas?.renderAll(); + }; + + /** 隐藏|显示 安全线 */ + toggleClipLine = () => { + const obj = this.canvas + .getObjects() + .filter((ele) => ele?.id === "WorkSpaceClipType"); + obj.map((item) => item.set({ visible: !this.showClipLine })); + this.showClipLine = !this.showClipLine; + this.canvas?.renderAll(); + }; + + /** 隐藏|显示 标尺 */ + toggleRuler = () => { + this.canvas.ruler.enabled = !this.canvas?.ruler?.enabled; + }; } export default FabricCanvas;