Question

您好，并提前感谢您的协助。我整天都在对着键盘敲击我的头，需要一些帮助。我对JavaScript和Raphael相当陌生，所以希望它不是显而易见的 - 但是我花了很多时间用Google搜索，查看文档，搜索这个网站找不到答案。

我正在开发一个项目，要求元素可以在画布上拖动，其方式与发布到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());

    });

我错过了什么？

Answer 1

由于您说正确记录了$(#canvas_container)维度，因此setSize调用应该有效。

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

Answer 2

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

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

Answer 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对象数组）

Raphael Paper.setSize问题

3 个答案: