extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-02-03 12:09:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

drawing basics

Browse Source
This commit is contained in:
caranicas 2022-09-16 18:32:48 -04:00
parent b15ac8b13e
commit 94a208bd91
2 changed files with 51 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts
View File

@ -11,6 +11,7 @@ globalStyle(`${DrawImageMain} > canvas`, {
position: "absolute",
top: "0",
left: "0",
opacity: "0.5",
});
globalStyle(`${DrawImageMain} > img`, {

106
ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
View File

@ -1,5 +1,5 @@
// @ts-nocheck
import React, { useRef, useEffect } from "react";
import React, { useRef, useState } from "react";
// https://github.com/embiem/react-canvas-draw
@ -15,77 +15,70 @@ import {
export default function DrawImage({ imageData }: DrawImageProps) {
const canvasRef = useRef<HTMLCanvasElement>(null);
const draw = (ctx: CanvasRenderingContext2D) => {
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
};
// useEffect(() => {
// const canvas = canvasRef.current;
// if (canvas) {
// if (imageData) {
// const ctx = canvas.getContext("2d");
// if (ctx) {
// const img = new Image();
// img.onload = () => {
// ctx.drawImage(img, 0, 0);
// };
// img.src = imageData;
// }
// } else {
// const ctx = canvas.getContext("2d");
// if (ctx) {
// draw(ctx);
// }
// }
// } else {
// console.log("canvas is null");
// }
// }, [imageData, draw]);
const [isDrawing, setIsDrawing] = useState(false);
const _handleMouseDown = (
e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
) => {
console.log("mouse down", e);
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "#red";
const {
nativeEvent: { offsetX, offsetY },
} = e;
// console.log("x: " + x + " y: " + y);
ctx.beginPath();
ctx.moveTo(offsetX, offsetY);
// ctx.lineTo(x + 1, y + 1);
// ctx.stroke();
}
const {
nativeEvent: { offsetX, offsetY },
} = e;
setIsDrawing(true);
};
const _handleMouseUp = (
e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
) => {
console.log("mouse up");
setIsDrawing(false);
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
if (ctx) {
// draw(ctx);
}
const {
nativeEvent: { offsetX, offsetY },
} = e;
// console.log("x: " + x + " y: " + y);
// ctx.moveTo(x, y);
ctx?.lineTo(offsetX, offsetY);
ctx.stroke();
ctx.closePath();
const data = canvas.toDataURL();
console.log("data", data);
}
};
const _handleMouseMove = (
e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
) => {
if (isDrawing) {
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
const {
nativeEvent: { offsetX, offsetY },
} = e;
ctx.beginPath();
ctx.lineWidth = 20;
// Sets the end of the lines drawn
// to a round shape.
ctx.lineCap = 'round';
ctx.strokeStyle = 'white';
// The cursor to start drawing
// moves to this coordinate
ctx.moveTo(offsetX, offsetY);
// A line is traced from start
// coordinate to this coordinate
ctx.lineTo(offsetX, offsetY);
// Draws the line.
ctx.stroke();
}
}
};
return (
<div className={DrawImageMain}>
<img src={imageData} />
@ -94,6 +87,7 @@ export default function DrawImage({ imageData }: DrawImageProps) {
width={512}
height={512}
onMouseDown={_handleMouseDown}
onMouseMove={_handleMouseMove}
onMouseUp={_handleMouseUp}
></canvas>
</div>