canvas setDimension() 破坏了图形的拖动功能答案

【问题标题】：canvas setDimension() breaks drag functionality of figurecanvas setDimension() 破坏了图形的拖动功能
【发布时间】：2017-02-22 09:46:19
【问题描述】：

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

【问题讨论】：

标签： javascript jquery draw2d-js

【解决方案1】：

使用 css 设置画布的 width 和 height 会产生类似缩放的效果，因为底层的 imageData 数组没有更新到新的维度。

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

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

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

【讨论】：

以上代码无效。此问题特定于 draw2dtouch。可能您的解决方案是针对基本的 html 画布，而不是针对在 html 上生成画布的第三方库。
无论是哪个库生成的，结果都将始终是“基本的 html 画布”。但是如果库不能处理大小调整，它可能不是最好的

【解决方案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;
    }

【讨论】：