Javascript 拉斐尔纸业有限公司

您好，提前感谢您的帮助。在这件事上，我整天都在用头敲击键盘，需要一些帮助。我对JavaScript和Raphael相当陌生，所以希望这不是什么显而易见的事情——但我花了很多时间在谷歌上搜索、检查文档，并在这个网站上搜索答案，但都没有用

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

以下是相关的代码片段：

CSS:

JavaScript/Raphael：

        //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());

    });

---

我到底错过了什么

既然您说您的

$（#canvas_container）

维度记录正确，那么

setSize

调用应该可以工作

---

你可以和我的工作相比。您将特别注意可能进行的任何

setViewBox

调用，这将意味着视口边界存在一些限制。如果您有这些限制，您必须自己更新您的viewbox，因为Raphael在

setSize

上对viewbox进行的更新并不总是完全一致的。

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

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

---

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

事实证明，问题根本不是Raphael画布，而是我用来处理拖放的插件（Raphael.FreeTransform）。与本机Raphael拖放处理程序不同，FreeTransform设置边界以防止用户将对象拖离画布。默认边界设置为画布的边界。当您通过paper.setSize（）调整画布大小时，插件不会更新边界，除非您通过显式告诉它。这是工作调整大小代码的外观：

        //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() }});

        }


    });

//调整处理程序大小
$（窗口）。调整大小（函数（）{
如果（this.resizeTO）clearTimeout（this.resizeTO）；
this.resizeTO=setTimeout（function（）{$（this）.trigger（'resizeEnd'）；}，300）；
});
$（window.bind（'resizeEnd'，function（））{
//调整画布大小
fiddle.paper.setSize（$（'canvas\u container'）.width（），$（'canvas\u container'）.height（））；
对于（变量i=0；i

---

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

我已经尝试过这个解决方案，但它允许用户将元素从画布上拖到无法检索的区域（在raphaeljs网站上的graffle示例中也可以这样做）我不想与setViewBox混淆。我可能还应该提到，我正在使用raphael.free_transform插件来处理拖放操作。我可以从您的JSFIDLE中看到，当用户重新调整窗口大小时，用户可以看到的内容的边界似乎正在更新。然而，我想知道画布是否真的在那一点被切断，或者你的动画框是否在用户看不见的情况下旋转。动画的延迟让我觉得这可能是真的。我正在制作一个“分叉”提琴来演示-将在tic中发布。我制作了一个提琴，但它没有表现出与我的项目相同的行为，我开始怀疑罪魁祸首是raphael.free_transform插件-我正在使用它来处理拖动。在小提琴中，我使用了Raphael内置的拖动处理程序，它允许用户从画布上拖动元素，使它们无法恢复。在我使用插件的项目中，元素位置受到画布的限制，用户不能将它们拖出边界。paper.setSize不会更新该边界。问题是：要么你想办法告诉插件新的墙，要么你自己使用原生的拖拽和计算墙。它可以非常便宜，因为它可以在dragstart上计算一次。对于平移，您只需计算dx和dy边界，从而计算4个浮点数。如果可能，我希望避免使用本机拖动函数，因为我非常确定它处理路径对象的方式与处理圆和矩形等对象的方式不同。该插件的好处在于，它可以避免将x/y值转换为转换值，反之亦然。明天我要休息一下（现在是凌晨4点），研究一下插件代码。我已经检查了他们的网站，没有看到发布的bug，所以如果我发现它是罪魁祸首，我会发布一个，并确保在这里发布决议。

        //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() }});

        }


    });