canvas setDimension（）打破了图形的拖动功能

Question

I am using draw2dtouch 6.1.66 version (latest version). Initially width and height of canvas was 1000px and 800px respectively. On button click, I am changing the canvas width and height to 2170px and 902px respectively.

Now I cannot drag rectangle figure beyond 1000px width-wise. It gets stuck to 1000px which was initial width.

Note: I check my html, both canvas div and svg shows width:2170px and height:902px .

<div _ngcontent-awi-17="" draw2d-canvas="" id="canvas" style="height: 902px; cursor: default; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 2170px;">

<svg height="902" version="1.1" width="2170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: absolute; left: -0.828125px;">

Here is my code:

$("#canvas").css("height",902);
$("#canvas").css("width", 2170);
canvas.setDimension(new draw2d.geo.Rectangle(0, 0, 2170, 902));

Answer 1

Setting the width and height of a canvas using css, will result in scale like effect, because the underlying imageData array is not updated to the new dimensions.

So if you need to scale your canvas, use the attributes of the canvas, like so:

$('#canvas').attr({width: <width>, height: <height>});

Keep in mind that changing those values will clear the canvas and you need to redraw everything.

Answer 2

It may be and old post, but I had the same issue using same version, and my solution might be useful for some other people coming back.

It seems when the canvas is created Canvas.regionDragDropConstraint is initialized with the original size of the canvas, restrincting the area in which objects can be dragged inside. I had to modify the method Canvas.setDimension, and added the update of the attribute, so when resized, it's updated in all the figures referencing the same object.

    /**
     * @method
     * Tells the canvas to resize. If you do not specific any parameters 
     * the canvas will attempt to determine the height and width by the enclosing bounding box 
     * of all elements and set the dimension accordingly. If you would like to set the dimension 
     * explicitly pass in an draw2d.geo.Rectangle or an object with <b>height</b> and <b>width</b> properties.
     * 
     * @since 4.4.0
     * @param {draw2d.geo.Rectangle} [dim] the dimension to set or null for autodetect
     */
    setDimension: function(dim, height)
    {
        if (typeof dim === "undefined"){
            var widths  = this.getFigures().clone().map(function(f){ return f.getAbsoluteX()+f.getWidth();});
            var heights = this.getFigures().clone().map(function(f){ return f.getAbsoluteY()+f.getHeight();});
            this.initialHeight = Math.max.apply(Math,heights.asArray());
            this.initialWidth  = Math.max.apply(Math,widths.asArray());
        }
        else if(dim instanceof draw2d.geo.Rectangle){
            this.initialWidth  = dim.w;
            this.initialHeight = dim.h;
        }
        else if(typeof dim.width ==="number" && typeof dim.height ==="number"){
            this.initialWidth  = dim.width;
            this.initialHeight = dim.height;
        }
        else if(typeof dim ==="number" && typeof height ==="number"){
            this.initialWidth  = dim;
            this.initialHeight = height;
        }
        this.html.css({"width":this.initialWidth+"px", "height":this.initialHeight+"px"});
        this.paper.setSize(this.initialWidth, this.initialHeight);
        this.setZoom(this.zoomFactor, false);

        // MODIFICATION START TO CORRECT DRAG AND DROP PROBLEM
        // Add modification to the Region Drap and Drop Policy, so it does not restricts objects movements on resize.
        this.regionDragDropConstraint.constRect.w = this.getWidth();
        this.regionDragDropConstraint.constRect.h = this.getHeight();
        // MODIFICATION END

        return this;
    }