Повторяю по 1 видео рисовалку, но тк там пишется на mobx + canvas = Все его инструменты и кисти написаны с помощью классов. Вопрос как мне после рендера компонентов:
return (
<Provider store={store}>
<div className="App">
<ToolBar></ToolBar>
<SettingBar></SettingBar>
<Canvas></Canvas>
</div>
</Provider>
);
А именно Canvas - где я через useEffect диспачу ссылку на canvas, использовать мой хук который требует в виде аргумента ссылку на неё.
const dispatch = useDispatch()
const canvasRef = useSelector((state) => state.canvas.canvasRef)
useEffect(() => {
if(canvasRef){
const {} = useBrush(canvasRef)
}
}, [canvasRef]);
Это внутри Toolbar, но тк хук в хуке нельзя использовать я не понимаю как это можно реализовать. Проблема в том что useBrush в итоге получает все кроме ссылки, и как я понял суть в том что хук юзается раньше чем я получу ссылку, прошу помощи, вот сам хук если нужно:
import { useEffect, useRef } from 'react';
const useBrush = (canvas) => {
const ctxRef = useRef(null);
const mouseDownRef = useRef(false);
useEffect(() => {
const ctx = canvas.getContext('2d');
ctxRef.current = ctx;
const mouseUpHandler = () => {
mouseDownRef.current = false;
};
const mouseDownHandler = (e) => {
mouseDownRef.current = true;
ctx.beginPath();
ctx.moveTo(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
};
const mouseMoveHandler = (e) => {
if (mouseDownRef.current) {
draw(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
}
};
const draw = (x, y) => {
ctx.lineTo(x, y);
ctx.stroke();
};
canvas.addEventListener('mouseup', mouseUpHandler);
canvas.addEventListener('mousedown', mouseDownHandler);
canvas.addEventListener('mousemove', mouseMoveHandler);
return () => {
canvas.removeEventListener('mouseup', mouseUpHandler);
canvas.removeEventListener('mousedown', mouseDownHandler);
canvas.removeEventListener('mousemove', mouseMoveHandler);
};
}, [canvas]);
return {
setFillColor: (color) => {
ctxRef.current.fillStyle = color;
},
setStrokeColor: (color) => {
ctxRef.current.strokeStyle = color;
},
setLineWidth: (width) => {
ctxRef.current.lineWidth = width;
}
};
}
export default useBrush;
Простой