[英]Draw2D alignement in react, or Draw2D boxing
I found a simple application with React and draw2D.我找到了一个带有 React 和 draw2D 的简单应用程序。
The dashbox is the div and the canvas.仪表盘是 div 和 canvas。
The circle is a圆圈是一个
draw2d.shape.basic.Circle({
x: 40,
y: 10,
stroke: 3
})
How to change the code to draw the circle inside the box dashed (the canvas)?如何更改代码以在虚线框(画布)内绘制圆圈?
https://codesandbox.io/s/exciting-cray-97g6r?file=/src/App.js https://codesandbox.io/s/exciting-cray-97g6r?file=/src/App.js
thanks.谢谢。
The first solution第一个解决方案
<span>
<p>Avec canvas2</p>
<div ref={inputRef} id="canvas"
style={{ height: 200, width: 300, border: "dashed brown",position:"relative" }}/>
</span>
Only add position:"relative", to the div.仅将 position:"relative" 添加到 div。
I improve this solution again.我再次改进了这个解决方案。
componentDidMount() {
this.canvas = new draw2d.Canvas("canvas", 9000, 9000));
this.canvas.add(
new draw2d.shape.basic.Circle({
x: 40,
y: 10,
stroke: 3
})
);
}
render() {
return (
<span>
<p>Avec canvas2</p>
<div
id="canvas"
style={{ height: 600, width: 600, border: "dashed brown" }}
/>
</span>
);
}
Now, we have a big picture inside a window..现在,我们在 window 中有了一张大图......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.