2

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

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

以下是相关的代码片段：

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

    });

我到底错过了什么？？

4

3 回答 3

1

由于您说您的$(#canvas_container)尺寸已正确记录，因此该setSize调用应该可以工作。

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

于 2013-04-21T09:22:34.890 回答
0

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

fiddle.paper = new Raphael("canvas_container", '100%','100%');
于 2013-04-21T09:29:18.473 回答
0

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

事实证明，问题根本不是 Raphael Canvas，而是我用来处理拖放的插件 (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() }});

        }


    });

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

于 2013-04-21T21:28:39.473 回答