From 4643dbce1730d159176b5e5e227c7ff7a065fa85 Mon Sep 17 00:00:00 2001 From: jialin Date: Sat, 18 Jan 2025 23:58:35 +0800 Subject: [PATCH] fix(style): brush can not fully paint the image --- src/components/image-editor/index.tsx | 28 +++++++--- .../playground/components/image-edit.tsx | 53 +++++++++++-------- 2 files changed, 50 insertions(+), 31 deletions(-) diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx index 570e9fe5..39601261 100644 --- a/src/components/image-editor/index.tsx +++ b/src/components/image-editor/index.tsx @@ -20,6 +20,7 @@ type CanvasImageEditorProps = { disabled?: boolean; imguid: string | number; onSave: (imageData: { mask: string | null; img: string }) => void; + onScaleImageSize?: (data: { width: number; height: number }) => void; uploadButton: React.ReactNode; imageStatus: { isOriginal: boolean; @@ -34,6 +35,7 @@ const CanvasImageEditor: React.FC = ({ disabled, imageStatus, onSave, + onScaleImageSize, imguid, uploadButton }) => { @@ -110,8 +112,8 @@ const CanvasImageEditor: React.FC = ({ } overlayCanvasRef.current!.style.cursor = 'none'; cursorRef.current!.style.display = 'block'; - cursorRef.current!.style.top = `${e.clientY}px`; - cursorRef.current!.style.left = `${e.clientX}px`; + cursorRef.current!.style.top = `${e.clientY - (lineWidth / 2) * autoScale.current}px`; + cursorRef.current!.style.left = `${e.clientX - (lineWidth / 2) * autoScale.current}px`; }; const handleMouseMove = (e: React.MouseEvent) => { @@ -120,8 +122,8 @@ const CanvasImageEditor: React.FC = ({ } overlayCanvasRef.current!.style.cursor = 'none'; cursorRef.current!.style.display = 'block'; - cursorRef.current!.style.top = `${e.clientY}px`; - cursorRef.current!.style.left = `${e.clientX}px`; + cursorRef.current!.style.top = `${e.clientY - (lineWidth / 2) * autoScale.current}px`; + cursorRef.current!.style.left = `${e.clientX - (lineWidth / 2) * autoScale.current}px`; }; const handleMouseLeave = () => { @@ -300,8 +302,8 @@ const CanvasImageEditor: React.FC = ({ if (!isDrawing.current) return; const { offsetX, offsetY } = e.nativeEvent; - const currentX = offsetX + lineWidth / 2; - const currentY = offsetY + lineWidth / 2; + const currentX = offsetX; + const currentY = offsetY; currentStroke.current.push({ x: currentX, @@ -336,8 +338,8 @@ const CanvasImageEditor: React.FC = ({ currentStroke.current = []; const { offsetX, offsetY } = e.nativeEvent; - const currentX = offsetX + lineWidth / 2; - const currentY = offsetY + lineWidth / 2; + const currentX = offsetX; + const currentY = offsetY; currentStroke.current.push({ x: currentX, @@ -530,6 +532,10 @@ const CanvasImageEditor: React.FC = ({ setImgLoaded(false); await drawImage(); + onScaleImageSize?.({ + width: canvasRef.current!.width, + height: canvasRef.current!.height + }); setImgLoaded(true); if (strokeCache.current[imguid]) { @@ -586,9 +592,15 @@ const CanvasImageEditor: React.FC = ({ canvasRef.current!.style.transform = `scale(${autoScale.current})`; }; + const updateCursorPosOnZoom = (e: any) => { + cursorRef.current!.style.top = `${e.clientY - (lineWidth / 2) * autoScale.current}px`; + cursorRef.current!.style.left = `${e.clientX - (lineWidth / 2) * autoScale.current}px`; + }; + const handleOnWheel = (event: any) => { handleZoom(event); updateCursorSize(); + updateCursorPosOnZoom(event); setActiveScale(autoScale.current); }; diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index 4d9e7d28..26d05dc9 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/src/pages/playground/components/image-edit.tsx @@ -370,7 +370,10 @@ const GroundImages: React.FC = forwardRef((props, ref) => { setTokenResult({ error: true, errorMessage: - result?.data?.error?.message || result?.data?.error || '' + result?.data?.data?.detail || + result?.data?.error?.message || + result?.data?.error || + '' }); setImageList([]); return; @@ -627,6 +630,31 @@ const GroundImages: React.FC = forwardRef((props, ref) => { [modelList, isOpenaiCompatible] ); + const handleOnScaleImageSize = useCallback( + (data: { width: number; height: number }) => { + const { width, height } = data; + form.current?.form?.setFieldsValue({ + size: 'custom', + width: width || 512, + height: height || 512 + }); + setParams((pre: object) => { + return { + ...pre, + size: 'custom', + width: width || 512, + height: height || 512 + }; + }); + updateCacheFormData({ + size: 'custom', + width: width || 512, + height: height || 512 + }); + }, + [] + ); + const handleUpdateImageList = useCallback((base64List: any) => { console.log('updateimagelist=========', base64List); const currentImg = _.get(base64List, '[0]', {}); @@ -639,24 +667,6 @@ const GroundImages: React.FC = forwardRef((props, ref) => { isResetNeeded: true }); setImageList([]); - form.current?.form?.setFieldsValue({ - size: 'custom', - width: currentImg.rawWidth || 512, - height: currentImg.rawHeight || 512 - }); - setParams((pre: object) => { - return { - ...pre, - size: 'custom', - width: currentImg.rawWidth || 512, - height: currentImg.rawHeight || 512 - }; - }); - updateCacheFormData({ - size: 'custom', - width: currentImg.rawWidth || 512, - height: currentImg.rawHeight || 512 - }); }, []); const handleOnSave = useCallback( @@ -859,9 +869,7 @@ const GroundImages: React.FC = forwardRef((props, ref) => {
@@ -869,7 +877,6 @@ const GroundImages: React.FC = forwardRef((props, ref) => { {...item} height={125} maxHeight={125} - maxWidth={125} preview={item.preview} loading={item.loading} autoSize={false}