javascript - canvas setDimension() 破坏了图形的拖动功能

Question

我正在使用draw2dtouch6.1.66版本(最新版本)。最初 Canvas 的宽度和高度分别为 1000px 和 800px。单击按钮时，我将 Canvas 宽度和高度分别更改为 2170px 和 902px。

现在我无法将矩形图形拖动到宽度方向超过1000px。它卡在 1000px 这是初始宽度。

注意:我检查了我的 html，canvas div 和 svg 都显示 width:2170px 和 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;">

这是我的代码:

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

Answer 1

这可能是旧帖子，但我使用相同版本遇到了同样的问题，我的解决方案可能对其他一些回来的人有用。

似乎在 Canvas 创建时 Canvas.regionDragDropConstraint 被初始化为 Canvas 的原始大小，限制了可以在其中拖动对象的区域。我必须修改 Canvas.setDimension 方法，并添加属性的更新，因此在调整大小时，它会在引用同一对象的所有图形中更新。

    /**
     * @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;
    }