如何解决我想在视频中绘制使用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>
);
}
解决方法
有可能。
首先,您需要将某些样式应用于画布,如下所示:
position: absolute;z-index: 999;
。
然后您可以将其他样式应用于视频,如下所示:
z-index: 11;
如果是这样,则画布和视频将重叠,并且画布将被放置在视频顶部,如下所示:
在这里,您将遇到一个问题……例如,在某些情况下,您可能希望控制视频。意思是,您想随时pause/play/stop
观看视频。
为此,您还需要为视频设置自定义的暂停,播放和停止按钮。但是这些按钮的z索引应该高于999,因为画布的z索引是999。
谢谢
,使用绝对位置和相对位置的容器
https://codesandbox.io/s/elated-sun-36eno?file=/src/styles.css
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。