chore: load mask by pix
This commit is contained in:
jialin
@@ -0,0 +1,396 @@
|
||||
import _ from 'lodash';
|
||||
import { useCallback, useMemo, useRef } from 'react';
|
||||
|
||||
type Point = { x: number; y: number; lineWidth: number };
|
||||
type Stroke = Point[];
|
||||
const COLOR = 'rgba(0, 0, 255, 0.3)';
|
||||
|
||||
export default function useDrawing(props: {
|
||||
isDisabled?: boolean;
|
||||
invertMask: boolean;
|
||||
maskUpload?: any[];
|
||||
lineWidth: number;
|
||||
translatePos: { current: { x: number; y: number } };
|
||||
onSave: (imageData: { mask: string | null; img: string }) => void;
|
||||
}) {
|
||||
const {
|
||||
isDisabled,
|
||||
invertMask,
|
||||
maskUpload,
|
||||
lineWidth,
|
||||
translatePos,
|
||||
onSave
|
||||
} = props;
|
||||
const mouseDownState = useRef<boolean>(false);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const currentStroke = useRef<Point[]>([]);
|
||||
const strokesRef = useRef<Stroke[]>([]);
|
||||
const isDrawing = useRef<boolean>(false);
|
||||
const cursorRef = useRef<HTMLDivElement>(null);
|
||||
const autoScale = useRef<number>(1);
|
||||
const baseScale = useRef<number>(1);
|
||||
const contentPos = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
|
||||
|
||||
const disabled = useMemo(() => {
|
||||
return isDisabled || invertMask || !!maskUpload?.length;
|
||||
}, [isDisabled, invertMask, maskUpload]);
|
||||
|
||||
const setStrokes = (strokes: Stroke[]) => {
|
||||
strokesRef.current = strokes;
|
||||
};
|
||||
|
||||
const inpaintArea = useCallback(
|
||||
(data: Uint8ClampedArray<ArrayBufferLike>) => {
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
const alpha = data[i + 3];
|
||||
if (alpha > 0) {
|
||||
data[i] = 255; // Red
|
||||
data[i + 1] = 255; // Green
|
||||
data[i + 2] = 255; // Blue
|
||||
data[i + 3] = 255; // Alpha
|
||||
}
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const generateImage = useCallback(() => {
|
||||
const canvas = canvasRef.current!;
|
||||
return canvas.toDataURL('image/png');
|
||||
}, []);
|
||||
|
||||
const generateMask = useCallback(() => {
|
||||
if (strokesRef.current.length === 0) {
|
||||
return null;
|
||||
}
|
||||
const overlayCanvas = overlayCanvasRef.current!;
|
||||
const maskCanvas = document.createElement('canvas');
|
||||
maskCanvas.width = overlayCanvas.width;
|
||||
maskCanvas.height = overlayCanvas.height;
|
||||
const maskCtx = maskCanvas.getContext('2d')!;
|
||||
const overlayCtx = overlayCanvas.getContext('2d')!;
|
||||
|
||||
const imageData = overlayCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
overlayCanvas.width,
|
||||
overlayCanvas.height
|
||||
);
|
||||
const data = imageData.data;
|
||||
|
||||
inpaintArea(data);
|
||||
|
||||
maskCtx.putImageData(imageData, 0, 0);
|
||||
|
||||
maskCtx.globalCompositeOperation = 'destination-over';
|
||||
maskCtx.fillStyle = 'black';
|
||||
maskCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
|
||||
|
||||
return maskCanvas.toDataURL('image/png');
|
||||
}, []);
|
||||
|
||||
const saveImage = () => {
|
||||
const mask = generateMask();
|
||||
const img = generateImage();
|
||||
onSave({ mask, img });
|
||||
};
|
||||
|
||||
const setTransform = useCallback(() => {
|
||||
const ctx = canvasRef.current?.getContext('2d');
|
||||
const overlayCtx = overlayCanvasRef.current?.getContext('2d');
|
||||
|
||||
if (!ctx || !overlayCtx) return;
|
||||
|
||||
ctx!.resetTransform();
|
||||
overlayCtx!.resetTransform();
|
||||
|
||||
const { current: scale } = autoScale;
|
||||
const { x: translateX, y: translateY } = translatePos.current;
|
||||
ctx!.setTransform(scale, 0, 0, scale, translateX, translateY);
|
||||
|
||||
overlayCtx!.setTransform(scale, 0, 0, scale, translateX, translateY);
|
||||
}, []);
|
||||
|
||||
const getTransformedPoint = useCallback(
|
||||
(offsetX: number, offsetY: number) => {
|
||||
const { current: scale } = autoScale;
|
||||
|
||||
const { x: translateX, y: translateY } = translatePos.current;
|
||||
|
||||
const transformedX = (offsetX - translateX) / scale;
|
||||
const transformedY = (offsetY - translateY) / scale;
|
||||
|
||||
return {
|
||||
x: transformedX,
|
||||
y: transformedY
|
||||
};
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const getTransformLineWidth = useCallback((lineWidth = 1) => {
|
||||
return lineWidth / autoScale.current;
|
||||
}, []);
|
||||
|
||||
const drawLine = useCallback(
|
||||
(
|
||||
ctx: CanvasRenderingContext2D,
|
||||
point: Point,
|
||||
options: {
|
||||
lineWidth: number;
|
||||
color: string;
|
||||
compositeOperation: 'source-over' | 'destination-out';
|
||||
}
|
||||
) => {
|
||||
const { lineWidth, color, compositeOperation } = options;
|
||||
|
||||
ctx.lineWidth = getTransformLineWidth(lineWidth);
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.globalCompositeOperation = compositeOperation;
|
||||
|
||||
const { x, y } = getTransformedPoint(point.x, point.y);
|
||||
|
||||
ctx.lineTo(x, y);
|
||||
if (compositeOperation === 'source-over') {
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
ctx.stroke();
|
||||
},
|
||||
[getTransformLineWidth]
|
||||
);
|
||||
|
||||
const drawStroke = useCallback(
|
||||
(
|
||||
ctx: CanvasRenderingContext2D,
|
||||
stroke: Stroke | Point[],
|
||||
options: {
|
||||
lineWidth?: number;
|
||||
color: string;
|
||||
compositeOperation: 'source-over' | 'destination-out';
|
||||
}
|
||||
) => {
|
||||
const { color, compositeOperation } = options;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.globalCompositeOperation = compositeOperation;
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
stroke.forEach((point, i) => {
|
||||
const { x, y } = getTransformedPoint(point.x, point.y);
|
||||
console.log('Drawing point:');
|
||||
ctx.lineWidth = getTransformLineWidth(point.lineWidth);
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
});
|
||||
if (compositeOperation === 'source-over') {
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
ctx.stroke();
|
||||
},
|
||||
[getTransformLineWidth, getTransformedPoint]
|
||||
);
|
||||
|
||||
const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
console.log(
|
||||
'Drawing:',
|
||||
isDrawing.current,
|
||||
currentStroke.current,
|
||||
strokesRef.current
|
||||
);
|
||||
if (!isDrawing.current || !mouseDownState.current) return;
|
||||
|
||||
const { offsetX, offsetY } = e.nativeEvent;
|
||||
const currentX = offsetX;
|
||||
const currentY = offsetY;
|
||||
console.log('currentStroke:', currentStroke.current);
|
||||
currentStroke.current.push({
|
||||
x: currentX,
|
||||
y: currentY,
|
||||
lineWidth
|
||||
});
|
||||
|
||||
const ctx = overlayCanvasRef.current!.getContext('2d');
|
||||
|
||||
ctx!.save();
|
||||
|
||||
drawLine(
|
||||
ctx!,
|
||||
{ x: currentX, y: currentY, lineWidth },
|
||||
{ lineWidth, color: COLOR, compositeOperation: 'destination-out' }
|
||||
);
|
||||
drawLine(
|
||||
ctx!,
|
||||
{ x: currentX, y: currentY, lineWidth },
|
||||
{ lineWidth, color: COLOR, compositeOperation: 'source-over' }
|
||||
);
|
||||
|
||||
ctx!.restore();
|
||||
};
|
||||
|
||||
const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
isDrawing.current = true;
|
||||
|
||||
currentStroke.current = [];
|
||||
const { offsetX, offsetY } = e.nativeEvent;
|
||||
|
||||
const currentX = offsetX;
|
||||
const currentY = offsetY;
|
||||
|
||||
currentStroke.current.push({
|
||||
x: currentX,
|
||||
y: currentY,
|
||||
lineWidth
|
||||
});
|
||||
|
||||
const ctx = overlayCanvasRef.current!.getContext('2d');
|
||||
setTransform();
|
||||
const { x, y } = getTransformedPoint(currentX, currentY);
|
||||
ctx!.beginPath();
|
||||
ctx!.moveTo(x, y);
|
||||
|
||||
draw(e);
|
||||
};
|
||||
|
||||
const endDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
if (!isDrawing.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('End Drawing:', e);
|
||||
|
||||
isDrawing.current = false;
|
||||
|
||||
strokesRef.current.push(_.cloneDeep(currentStroke.current));
|
||||
|
||||
currentStroke.current = [];
|
||||
|
||||
saveImage();
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
overlayCanvasRef.current!.style.cursor = 'none';
|
||||
cursorRef.current!.style.display = 'block';
|
||||
cursorRef.current!.style.top = `${e.clientY - (lineWidth / 2) * autoScale.current}px`;
|
||||
cursorRef.current!.style.left = `${e.clientX - (lineWidth / 2) * autoScale.current}px`;
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
isDrawing.current = false;
|
||||
overlayCanvasRef.current!.style.cursor = 'default';
|
||||
cursorRef.current!.style.display = 'none';
|
||||
};
|
||||
|
||||
const handleMouseEnter = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
console.log('mouse enter:', mouseDownState.current);
|
||||
if (disabled) {
|
||||
overlayCanvasRef.current!.style.cursor = 'default';
|
||||
return;
|
||||
}
|
||||
// if (mouseDownState.current) {
|
||||
// isDrawing.current = true;
|
||||
// }
|
||||
overlayCanvasRef.current!.style.cursor = 'none';
|
||||
cursorRef.current!.style.display = 'block';
|
||||
cursorRef.current!.style.top = `${e.clientY - (lineWidth / 2) * autoScale.current}px`;
|
||||
cursorRef.current!.style.left = `${e.clientX - (lineWidth / 2) * autoScale.current}px`;
|
||||
};
|
||||
|
||||
const clearOverlayCanvas = useCallback(() => {
|
||||
const ctx = overlayCanvasRef.current!.getContext('2d');
|
||||
ctx!.resetTransform();
|
||||
ctx!.clearRect(
|
||||
0,
|
||||
0,
|
||||
overlayCanvasRef.current!.width,
|
||||
overlayCanvasRef.current!.height
|
||||
);
|
||||
}, []);
|
||||
|
||||
const clearCanvas = useCallback(() => {
|
||||
const canvas = canvasRef.current!;
|
||||
const ctx = canvasRef.current!.getContext('2d');
|
||||
ctx!.resetTransform();
|
||||
ctx!.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}, []);
|
||||
|
||||
const resetCanvas = useCallback(() => {
|
||||
const canvas = canvasRef.current!;
|
||||
const overlayCanvas = overlayCanvasRef.current!;
|
||||
const ctx = canvas.getContext('2d');
|
||||
const overlayCtx = overlayCanvas.getContext('2d');
|
||||
|
||||
autoScale.current = 1;
|
||||
baseScale.current = 1;
|
||||
translatePos.current = { x: 0, y: 0 };
|
||||
contentPos.current = { x: 0, y: 0 };
|
||||
canvas.style.transform = 'scale(1)';
|
||||
overlayCanvas.style.transform = 'scale(1)';
|
||||
|
||||
cursorRef.current!.style.width = `${lineWidth}px`;
|
||||
cursorRef.current!.style.height = `${lineWidth}px`;
|
||||
|
||||
ctx!.resetTransform();
|
||||
overlayCtx!.resetTransform();
|
||||
}, []);
|
||||
|
||||
const fitView = () => {
|
||||
resetCanvas();
|
||||
autoScale.current = baseScale.current;
|
||||
translatePos.current = { x: 0, y: 0 };
|
||||
setTransform();
|
||||
overlayCanvasRef.current!.style.transform = `scale(${autoScale.current})`;
|
||||
canvasRef.current!.style.transform = `scale(${autoScale.current})`;
|
||||
};
|
||||
|
||||
return {
|
||||
canvasRef,
|
||||
overlayCanvasRef,
|
||||
cursorRef,
|
||||
strokesRef,
|
||||
currentStroke,
|
||||
isDrawing,
|
||||
mouseDownState,
|
||||
autoScale,
|
||||
baseScale,
|
||||
fitView,
|
||||
setStrokes,
|
||||
resetCanvas,
|
||||
draw,
|
||||
getTransformLineWidth,
|
||||
getTransformedPoint,
|
||||
drawStroke,
|
||||
startDrawing,
|
||||
endDrawing,
|
||||
handleMouseMove,
|
||||
handleMouseLeave,
|
||||
handleMouseEnter,
|
||||
saveImage,
|
||||
generateMask,
|
||||
generateImage,
|
||||
setTransform,
|
||||
clearOverlayCanvas,
|
||||
clearCanvas
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import _ from 'lodash';
|
||||
import { MutableRefObject, useState } from 'react';
|
||||
|
||||
export default function useZoom(props: {
|
||||
overlayCanvasRef: any;
|
||||
canvasRef: any;
|
||||
cursorRef: any;
|
||||
lineWidth: number;
|
||||
autoScale: MutableRefObject<number>;
|
||||
baseScale: MutableRefObject<number>;
|
||||
translatePos: MutableRefObject<{ x: number; y: number }>;
|
||||
}) {
|
||||
const MIN_SCALE = 0.5;
|
||||
const MAX_SCALE = 8;
|
||||
const ZOOM_SPEED = 0.1;
|
||||
const {
|
||||
overlayCanvasRef,
|
||||
canvasRef,
|
||||
cursorRef,
|
||||
lineWidth,
|
||||
translatePos,
|
||||
autoScale,
|
||||
baseScale
|
||||
} = props;
|
||||
|
||||
const [activeScale, setActiveScale] = useState<number>(1);
|
||||
|
||||
const setCanvasTransformOrigin = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (autoScale.current <= MIN_SCALE) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (autoScale.current >= MAX_SCALE) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Setting transform origin:', autoScale.current);
|
||||
const rect = overlayCanvasRef.current!.getBoundingClientRect();
|
||||
const mouseX = e.clientX - rect.left;
|
||||
const mouseY = e.clientY - rect.top;
|
||||
|
||||
const originX = mouseX / rect.width;
|
||||
const originY = mouseY / rect.height;
|
||||
|
||||
overlayCanvasRef.current!.style.transformOrigin = `${originX * 100}% ${originY * 100}%`;
|
||||
canvasRef.current!.style.transformOrigin = `${originX * 100}% ${originY * 100}%`;
|
||||
};
|
||||
|
||||
const updateZoom = (scaleChange: number, mouseX: number, mouseY: number) => {
|
||||
const newScale = _.round(autoScale.current + scaleChange, 2);
|
||||
|
||||
if (newScale < MIN_SCALE || newScale > MAX_SCALE) return;
|
||||
|
||||
const { current: oldScale } = autoScale;
|
||||
const { x: oldTranslateX, y: oldTranslateY } = translatePos.current;
|
||||
|
||||
const centerX = (mouseX - oldTranslateX) / oldScale;
|
||||
const centerY = (mouseY - oldTranslateY) / oldScale;
|
||||
|
||||
autoScale.current = newScale;
|
||||
|
||||
const newTranslateX = mouseX - centerX * newScale;
|
||||
const newTranslateY = mouseY - centerY * newScale;
|
||||
|
||||
translatePos.current = { x: newTranslateX, y: newTranslateY };
|
||||
};
|
||||
|
||||
const handleZoom = (event: React.WheelEvent<HTMLCanvasElement>) => {
|
||||
const scaleChange = event.deltaY > 0 ? -ZOOM_SPEED : ZOOM_SPEED;
|
||||
|
||||
// current mouse position
|
||||
const canvas = overlayCanvasRef.current!;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
|
||||
const mouseX = event.clientX - rect.left;
|
||||
const mouseY = event.clientY - rect.top;
|
||||
|
||||
overlayCanvasRef.current!.style.transform = `scale(${autoScale.current})`;
|
||||
canvasRef.current!.style.transform = `scale(${autoScale.current})`;
|
||||
setCanvasTransformOrigin(event);
|
||||
updateZoom(scaleChange, mouseX, mouseY);
|
||||
};
|
||||
|
||||
const updateCursorSize = () => {
|
||||
cursorRef.current!.style.width = `${lineWidth * autoScale.current}px`;
|
||||
cursorRef.current!.style.height = `${lineWidth * autoScale.current}px`;
|
||||
};
|
||||
|
||||
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) => {
|
||||
// stop
|
||||
handleZoom(event);
|
||||
updateCursorSize();
|
||||
updateCursorPosOnZoom(event);
|
||||
setActiveScale(autoScale.current);
|
||||
};
|
||||
|
||||
return {
|
||||
handleOnWheel,
|
||||
setActiveScale,
|
||||
activeScale,
|
||||
autoScale,
|
||||
baseScale
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user