From df8c2f01b143047329cf427fe00131d7d0d9f11e Mon Sep 17 00:00:00 2001 From: qq_41923622 Date: Thu, 6 Feb 2025 11:54:00 +0800 Subject: [PATCH] Thu Feb 6 11:54:00 CST 2025 inscode --- .../src/components/Upload.tsx | 336 +++++++++--------- 1 file changed, 168 insertions(+), 168 deletions(-) diff --git a/src/tiny-image-editor/src/components/Upload.tsx b/src/tiny-image-editor/src/components/Upload.tsx index d03bf5c..730366f 100644 --- a/src/tiny-image-editor/src/components/Upload.tsx +++ b/src/tiny-image-editor/src/components/Upload.tsx @@ -1,168 +1,168 @@ -// import { Popover } from '@casstime/bricks'; -import React, { forwardRef, useContext, useImperativeHandle } from 'react'; -import { ACTION, LANG, MENU_TYPE_ENUM, MENU_TYPE_TEXT } from '../constants'; -import { EditorContext } from '../util'; -import Popover from './setting/Popover'; -import {fabric} from 'fabric'; - - - -function annotationsInit(annotations,canvas,historyRef){ - - // 遍历标注信息，重新创建元素并添加到画布上 - annotations.forEach((annotation) => { - let newObject; - - switch (annotation.type) { - case 'rect': - newObject = new fabric.Rect({ - left: annotation.left, - top: annotation.top, - originX: 'left', - originY: 'top', - width: annotation.width, - height: annotation.height, - angle: annotation.angle, - fill: annotation.fill, - stroke: annotation.stroke, - scaleX: annotation.scaleX, - scaleY: annotation.scaleY, - strokeWidth: annotation.size, - transparentCorners: false, - opacity: annotation.opacity || 1 - }); - break; - case 'textbox': - case 'text': - newObject = new fabric.Textbox(annotation.text, { - left: annotation.left, - top: annotation.top, - width: annotation.width, - angle: annotation.angle, - fill: annotation.fill, - stroke: annotation.stroke, - scaleX: annotation.scaleX, - scaleY: annotation.scaleY, - opacity: annotation.opacity || 1 - }); - break; - case 'circle': - newObject = new fabric.Circle({ - left: annotation.left, - top: annotation.top, - radius: annotation.width / 2, - angle: annotation.angle||0, - fill: annotation.fill||'', - originX: 'left', - originY: 'top', - stroke: annotation.stroke, - scaleX: annotation.scaleX, - scaleY: annotation.scaleY, - strokeWidth: annotation.size, - opacity: annotation.opacity || 1 - }); - break; - - // 可以根据需要添加更多元素类型的处理 - } - - if (newObject) { - - console.log(`annotation`,newObject,annotation,canvas) - canvas.add(newObject) - canvas.setActiveObject(newObject); - historyRef.current.updateCanvasState(ACTION.add, true, true); - // canvas.setActiveObject(newObject); - } - }); -} -export const useUpload = () => { - const { - canvasInstanceRef, - canvasEl, - currentMenuRef, - historyRef, - setCurrentMenu, - initBackGroundImage, - } = useContext(EditorContext); - - const handleUpload = (e: any,imgData?:any) => { - console.log(`e`,e,imgData) - const canvas = canvasInstanceRef.current; - if(canvasEl?.current&&typeof e === 'string'){ - let imgObj = new Image(); - imgObj.src = e as string; - initBackGroundImage(e as string, true, () => { - historyRef.current.updateCanvasState(ACTION.add); - setTimeout(()=>{ - if(imgData){ - - annotationsInit(imgData.annotations,canvas,historyRef); - } - }) - - },5000); - - return; - } - if ( - !canvas || - !canvasEl.current || - !e.target.files.length || - !e.target.files[0]?.type?.includes('image') - ) { - return; - } - - if (currentMenuRef.current !== MENU_TYPE_ENUM.upload) { - setCurrentMenu(MENU_TYPE_ENUM.upload); - } - - const reader = new FileReader(); - reader.onload = function (event) { - if (!event || !event.target) { - return; - } - - let imgObj = new Image(); - imgObj.src = event.target.result as string; - initBackGroundImage(event.target.result as string, true, () => { - historyRef.current.updateCanvasState(ACTION.add); - }); - }; - reader.readAsDataURL(e.target.files[0]); - }; - - return { handleUpload }; -}; - -/** 上传 */ -export const Upload = forwardRef((props, ref) => { - const { - lang = LANG.en - } = useContext(EditorContext); - const { handleUpload } = useUpload(); - useImperativeHandle( - ref, - () => ({ - handleUpload: handleUpload, - }), - [handleUpload], - ); - return ( - <> - {/*
*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/*
*/} - - ); -}) +// import { Popover } from '@casstime/bricks'; +import React, { forwardRef, useContext, useImperativeHandle } from 'react'; +import { ACTION, LANG, MENU_TYPE_ENUM, MENU_TYPE_TEXT } from '../constants'; +import { EditorContext } from '../util'; +import Popover from './setting/Popover'; +import {fabric} from 'fabric'; + + + +function annotationsInit(annotations,canvas,historyRef){ + + // 遍历标注信息，重新创建元素并添加到画布上 + annotations.forEach((annotation) => { + let newObject; + + switch (annotation.type) { + case 'rect': + newObject = new fabric.Rect({ + left: annotation.left, + top: annotation.top, + originX: 'left', + originY: 'top', + width: annotation.width, + height: annotation.height, + angle: annotation.angle, + fill: annotation.fill, + stroke: annotation.stroke, + scaleX: annotation.scaleX, + scaleY: annotation.scaleY, + strokeWidth: annotation.size, + transparentCorners: false, + opacity: annotation.opacity || 1 + }); + break; + case 'textbox': + case 'text': + newObject = new fabric.Textbox(annotation.text, { + left: annotation.left, + top: annotation.top, + width: annotation.width, + angle: annotation.angle, + fill: annotation.fill, + stroke: annotation.stroke, + scaleX: annotation.scaleX, + scaleY: annotation.scaleY, + opacity: annotation.opacity || 1 + }); + break; + case 'circle': + newObject = new fabric.Circle({ + left: annotation.left, + top: annotation.top, + radius: annotation.width / 2, + angle: annotation.angle||0, + fill: annotation.fill||'', + originX: 'left', + originY: 'top', + stroke: annotation.stroke, + scaleX: annotation.scaleX, + scaleY: annotation.scaleY, + strokeWidth: annotation.size, + opacity: annotation.opacity || 1 + }); + break; + + // 可以根据需要添加更多元素类型的处理 + } + + if (newObject) { + + console.log(`annotation`,newObject,annotation,canvas) + canvas.add(newObject) + canvas.setActiveObject(newObject); + historyRef.current.updateCanvasState(ACTION.add, true, true); + // canvas.setActiveObject(newObject); + } + }); +} +export const useUpload = () => { + const { + canvasInstanceRef, + canvasEl, + currentMenuRef, + historyRef, + setCurrentMenu, + initBackGroundImage, + } = useContext(EditorContext); + + const handleUpload = (e: any,imgData?:any) => { + console.log(`e`,e,imgData) + const canvas = canvasInstanceRef.current; + if(canvasEl?.current&&typeof e === 'string'){ + let imgObj = new Image(); + imgObj.src = e as string; + initBackGroundImage(e as string, true, () => { + historyRef.current.updateCanvasState(ACTION.add); + setTimeout(()=>{ + if(imgData){ + + annotationsInit(imgData.annotations,canvas,historyRef); + } + }) + + },5000); + + return; + } + if ( + !canvas || + !canvasEl.current || + !e.target.files.length || + !e.target.files[0]?.type?.includes('image') + ) { + return; + } + + if (currentMenuRef.current !== MENU_TYPE_ENUM.upload) { + setCurrentMenu(MENU_TYPE_ENUM.upload); + } + + const reader = new FileReader(); + reader.onload = function (event) { + if (!event || !event.target) { + return; + } + + let imgObj = new Image(); + imgObj.src = event.target.result as string; + initBackGroundImage(event.target.result as string, true, () => { + historyRef.current.updateCanvasState(ACTION.add); + }); + }; + reader.readAsDataURL(e.target.files[0]); + }; + + return { handleUpload }; +}; + +/** 上传 */ +export const Upload = forwardRef((props, ref) => { + const { + lang = LANG.en + } = useContext(EditorContext); + const { handleUpload } = useUpload(); + useImperativeHandle( + ref, + () => ({ + handleUpload: handleUpload, + }), + [handleUpload], + ); + return ( + <> + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/*
*/} + + ); +}) -- GitLab