1

我正在使用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));
4

2 回答 2

0

使用 css设置画布的widthandheight会产生类似比例的效果，因为底层imageData数组不会更新到新的维度。

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

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

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

于 2017-02-22T10:35:51.253 回答
0

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

似乎在创建画布时 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;
    }
于 2019-02-27T22:44:39.163 回答