Question

我正在使用draw2dtouch 6.1.66 version（最新版本）。最初画布的宽度和高度分别为1000px和800px。点击按钮，我将画布宽度和高度分别更改为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

使用css设置画布的width和height将导致效果缩放，因为基础imageData数组未更新为新尺寸。

因此，如果您需要缩放画布，请使用画布的属性，如下所示：

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

请记住，更改这些值将清除画布，您需要重绘所有内容。

Answer 2

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

似乎在创建画布时，Canvas.regionDragDropConstraint被初始化为画布的原始大小，重新绘制了可以在其中拖动对象的区域。我必须修改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;
    }

canvas setDimension（）打破了图

2 个答案: