react中的Draw2D对齐，或Draw2D装箱

Question

我找到了一个使用React和draw2D的简单应用程序。

仪表盘是div和画布。

圆圈是一个

draw2d.shape.basic.Circle({
        x: 40,
        y: 10,
        stroke: 3
      })

如何更改代码来绘制框内的圆圈(画布)？

https://codesandbox.io/s/exciting-cray-97g6r?file=/src/App.js

谢谢。

Answer 1

第一解

<span>
<p>Avec canvas2</p>   
<div ref={inputRef} id="canvas" 
style={{ height: 200, width: 300, border: "dashed brown",position:"relative" }}/>   
</span>

只添加位置：“相对”，到div。

我再一次改进这个解决方案。

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>
    );
}

现在，我们有一张大图在窗户里..。