javascript - 我想在视频中绘制(使用html5画布)反应
问题描述
我的简单 React 应用程序中有两个功能,一个播放视频源的视频标签,以及一个使用 html5 画布制作的钢笔工具。我希望能够使用该钢笔工具在我的视频中绘图。我一直在谷歌搜索以寻找答案,但还没有找到明确的方法。
看看我的代码
function App(props) {
const canvasRef = useRef(null);
const contextRef = useRef(null);
const [isDrawing, setIsDrawing] = useState(false);
useEffect(() => {
const canvas = canvasRef.current;
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
canvas.style.width = `${window.innerWidth}px`;
canvas.style.height = `${window.innerHeight}px`;
const context = canvas.getContext('2d');
context.scale(2, 2);
context.lineCap = 'round';
context.strokeStyle = 'black';
context.lineWidth = 5;
contextRef.current = context;
}, []);
const startDrawing = ({ nativeEvent }) => {
const { offsetX, offsetY } = nativeEvent;
contextRef.current.beginPath();
contextRef.current.moveTo(offsetX, offsetY);
setIsDrawing(true);
};
const finishDrawing = () => {
contextRef.current.closePath();
setIsDrawing(false);
};
const draw = ({ nativeEvent }) => {
if (!isDrawing) {
return;
}
const { offsetX, offsetY } = nativeEvent;
contextRef.current.lineTo(offsetX, offsetY);
contextRef.current.stroke();
};
// return <canvas onMouseDown={startDrawing} onMouseUp={finishDrawing} onMouseMove={draw} ref={canvasRef} />;
return (
<div>
<canvas onMouseDown={startDrawing} onMouseUp={finishDrawing} onMouseMove={draw} ref={canvasRef} />
<video id="v" controls loop width="500">
<source src={video} type="video/mp4" />
</video>
</div>
);
}
解决方案
推荐阅读
- regex - 将包含 Unicode 换行符的行与 Notepad++ 正则表达式中的点模式匹配
- reactjs - 为了响应 API,React.js,向数组中的对象添加属性的更好方法是什么?
- python - 如何将此字典列表转换为 csv 文件
- eclipse - 每次我需要在 Mac 上清理和构建我的需求软件项目时
- c++ - 声明 `using namespace C;` 对于证明 [namespace.udir]/3 中的示例中显示的结果是必不可少的
- c# - .NET 应用程序在上传大文件时崩溃
- sql - 主查询未读取子查询结果集
- java - 需要了解创建对象和更新引用的 java 8 行为
- shopify - Shopify dev 中未加载嵌套资产
- javascript - 无法从 Redux 获取值到 props