0

I found a simple application with React and draw2D.

The dashbox is the div and the 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

thanks.

dterencio
  • 71
  • 1
  • 7
  • It seems draw2d sets the SVG element to be absolutely positioned. You can override this but it may break other library functions that assume absolute positioning. Perhaps using a different library (or no library at all) would work better for your use case. – Robert Longson Feb 06 '22 at 13:11
  • the mouse detection work well .. the drawing work well .. I need set a viewbox, transform="translate( X, Y )" and a clipPath. – dterencio Feb 06 '22 at 17:47
  • I need found the position of the div in React .. after set the transform, the clipath .. Maybe a will change or improve the Canvas object or the SVG , i don't know now. – dterencio Feb 06 '22 at 17:49
  • Sometime it's easy .. – dterencio Feb 06 '22 at 20:29

1 Answers1

1

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.

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 ..

dterencio
  • 71
  • 1
  • 7