Search code examples
javascriptjquery-uidraw2d-js

Is there any Draw2d.js canvas destroy method?

I have a question about Draw2D.js. I'm resizing the Canvas by using JQuery-ui, but when I resize the canvas I have to destroy it and create a new one ... Otherwise I'll have many canvases overlapping. If I call canvas.destroy() nothing works (as mentioned in the documentation).

There is any way to do a soft destroy of the canvas? Is any resize fuunctionaility in JQuery-ui?

Thank you @MacGyver, i find solution in the second propostion. We have to edit the SVG DOM :)

i share my solution here jsfiddle! it may helps!

Solution

  • You should be able to dynamically change your DOM node of your canvas, by setting the width and height manually. Here, we have a width of 2500px and a height of 2500px.

    <div onselectstart="javascript:/*IE8 hack*/return false" id="draw2d" style="width:2500px; height:2500px;-webkit-tap-highlight-color: rgba(0,0,0,0);"></div>

canvas.setScrollArea("draw2d");

    Or change the width and height of the DIV tag dynamically using JavaScript.

    Another alternative is to set the zoom dynamically:

    canvas.setZoom(1);  // default 1x (1:1 zoom)
canvas.setZoom(.5);  // .5x (1:2 zoom)
canvas.setZoom(2);  // 2x (2:1 zoom)

    Then call the app.layout() function

    Reference:

    http://draw2d.org/draw2d_touch/jsdoc/#!/api/draw2d.Canvas