Raphael Paper.setSize 问题答案

【问题标题】：Raphael Paper.setSize issueRaphael Paper.setSize 问题
【发布时间】：2013-04-22 05:28:39
【问题描述】：

您好，提前感谢您的帮助。我整天都在用这个键盘敲打我的头，需要一些帮助。我对 JavaScript 和 Raphael 还很陌生，所以希望这不是很明显 - 但我花了很多时间谷歌搜索，检查文档，并在这个网站上搜索答案，但无济于事。

我正在开展一个项目，该项目要求元素可在画布上拖动，其方式与发布到 Raphael 主页的示例大致相同：http://raphaeljs.com/graffle.html 除了一个例外，我已经让一切工作正常——当用户重新调整浏览器窗口的大小时，画布大小并没有相应地更新。相反，尽管画布正确报告了新尺寸（通过输出到控制台），但我无法将任何元素拖过画布的原始 x/y 边界。

以下是相关的sn-ps代码：

CSS：

#canvas_container {  
background-color: #696969;
    color: #FFFFFF;
    padding: 15px 25px;
    shadow: 1px 1px #FFFFFF;
    margin-right: 310px;
    margin-top: 75px;
    min-width: 640px;
    min-height: 640px;
    border-radius: 20px;
}

JavaScript/拉斐尔：

        //initialize canvas 
    fiddle.paper = new Raphael(document.getElementById("canvas_container"), $('#canvas_container').width(), $('#canvas_container').height()); 

    //resize handler
    $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {$(this).trigger('resizeEnd');}, 300);            
    });

    $(window).bind('resizeEnd', function() {
    //resize canvas
    fiddle.paper.setSize($('#canvas_container').width(), $('#canvas_container').height());

    });

我到底错过了什么？

【问题讨论】：

标签： javascript raphael

【解决方案1】：

既然你说你的$(#canvas_container) 维度被正确记录，setSize 调用应该可以工作。

您可以与我的工作jsfiddle 进行比较。您将特别注意您可能进行的任何setViewBox 调用，这意味着对视口边界的一些限制。如果您有这些限制，您将不得不自己更新您的视图框，因为 Raphael 在 setSize 被调用时所做的视图框更新并不总是完全一致的。

【讨论】：

我不是在搞乱 setViewBox。我也可能应该提到我正在使用 raphael.free_transform 插件来处理拖放内容。我可以从您的 jsfiddle 中看到，当用户重新调整窗口大小时，用户可见的边界似乎正在更新。但是，我想知道此时画布是否真的被切断了，或者您的动画框是否在用户看不到的地方旋转。动画的延迟让我觉得可能是这样。我正在制作一个“分叉”小提琴来演示 - 将在 tic 中发布。
我做了一个小提琴，但它没有表现出与我的项目相同的行为，我开始怀疑罪魁祸首是 raphael.free_transform 插件 - 我用它来处理拖动。在小提琴中，我使用了 Raphael 的内置拖动处理程序，它允许用户将元素拖出画布 - 使它们无法恢复。在我使用插件的项目中，元素位置受画布限制，用户无法将它们拖出边界。 paper.setSize 没有更新这个边界。这是小提琴：jsfiddle.net/gHJJ6/24
要么找到一种方法告诉插件新墙，要么你自己使用原生拖动和计算墙。它可能非常便宜，因为它可以在 dragstart 上计算一次。对于翻译，您只需计算 dx 和 dy 边界，从而计算 4 个浮点数。
如果可能的话，我想避免使用本机拖动功能，因为我很确定它不会像处理圆形和矩形那样处理路径对象。该插件的好处是让我避免将 x/y 值转换为转换值，反之亦然。我要抓紧时间（这里是凌晨 4 点）并明天调查插件代码。我已经检查了他们的网站，没有看到发布的错误，所以如果我发现这是罪魁祸首，我会发布一个并确保在这里也发布解决方案。

【解决方案2】：

如果您不需要支持 IE7-8，那么自动调整大小可以非常简单：

fiddle.paper = new Raphael("canvas_container", '100%','100%');

【讨论】：

我已经尝试过这个解决方案，但是它允许用户将元素拖离画布并将它们放到无法检索的区域（这在 raphaeljs 上的 graffle 示例中也是可能的网站）

【解决方案3】：

首先 - 感谢那些做出回应的人！与你们互动帮助我弄清楚发生了什么。

事实证明，问题根本不是 Raphael Canvas，而是我用来处理拖放的插件 (Raphael.FreeTransform)。与原生 Raphael 拖放处理程序不同，FreeTransform 设置边界以防止用户将对象拖出画布。默认边界设置为画布的边界。当您通过 paper.setSize() 调整画布大小时，插件不会更新边界，除非您通过 the boundary option 明确告诉您。这是工作调整大小代码的样子：

        //resize handler
    $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {$(this).trigger('resizeEnd');}, 300);


    });

    $(window).bind('resizeEnd', function() {
    //resize canvas
        fiddle.paper.setSize($('#canvas_container').width(), $('#canvas_container').height());

        for (var i = 0; i < fiddle.ftArray.length; i ++) {
            fiddle.ftArray[i].setOpts({boundary: {x: 0, y: 0, width: $('#canvas_container').width(), height: $('#canvas_container').height() }});

        }


    });

（ftArray 是在窗口加载时创建的 FreeTransform 对象数组）

【讨论】：