在 css 网格中反应 canvas 不是全尺寸
React canvas in css grid not full size
我正在用 React 构建一个线绘图仪。这个“线条绘图仪”应该在项目的 css 网格内。
为了绘制线条,我尝试使用 <canvas>
元素。首先是聪明还是有更好的方法?
但其次也是最重要的是,我的 canvas 未设置为网格项内的完整大小。有没有办法做到这一点,然后将 canvas 的原点设置到 canvas 的中间?
到目前为止我的代码:
const Canvas = props => {
const { draw, settings, ...rest } = props
const canvasRef = useRef(null)
useEffect(() => {
const canvas = canvasRef.current
const context = canvas.getContext('2d')
draw(context, settings)
}, [draw])
return (
<div className={"fractal_tree_canvas"}>
<canvas ref={canvasRef}/>
</div>
)
}
和css
.fractal_tree_canvas {
height: 100%;
width: 100%;
grid-row: 2;
grid-column: 2;
}
最后是腰带:
.fractal_tree_screen {
background-color: #e7e7e7;
display: inline-grid;
position: relative;
width: 100vw;
height: calc(100vh - 65px);
grid-template-columns: 5% 50% auto 5%;
grid-template-rows: 6% 1fr 6%;
}
但不知何故,我的 canvas 最终尺寸为 300x150,我可以做些什么来使其成为项目的完整尺寸吗?
我正在用 React 构建一个线绘图仪。这个“线条绘图仪”应该在项目的 css 网格内。
为了绘制线条,我尝试使用 <canvas>
元素。首先是聪明还是有更好的方法?
但其次也是最重要的是,我的 canvas 未设置为网格项内的完整大小。有没有办法做到这一点,然后将 canvas 的原点设置到 canvas 的中间?
到目前为止我的代码:
const Canvas = props => {
const { draw, settings, ...rest } = props
const canvasRef = useRef(null)
useEffect(() => {
const canvas = canvasRef.current
const context = canvas.getContext('2d')
draw(context, settings)
}, [draw])
return (
<div className={"fractal_tree_canvas"}>
<canvas ref={canvasRef}/>
</div>
)
}
和css
.fractal_tree_canvas {
height: 100%;
width: 100%;
grid-row: 2;
grid-column: 2;
}
最后是腰带:
.fractal_tree_screen {
background-color: #e7e7e7;
display: inline-grid;
position: relative;
width: 100vw;
height: calc(100vh - 65px);
grid-template-columns: 5% 50% auto 5%;
grid-template-rows: 6% 1fr 6%;
}
但不知何故,我的 canvas 最终尺寸为 300x150,我可以做些什么来使其成为项目的完整尺寸吗?