拉斐尔Paper.setSize问题

您好，感谢你在为你的援助。我一整天都对着键盘敲着脑袋，需要一些帮助。我是相当新的JavaScript和拉斐尔所以希望它是不是显而易见的 - 但我已经花了很多时间好对付谷歌搜索，检查文档，并搜索这个网站的答案无济于事。拉斐尔Paper.setSize问题

我的工作，需要的元素可拖动防空火炮在几乎相同的方式在画布作为例子发布到拉斐尔主页的项目：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()); 

    });

到底什么我错过？

来源

2013-04-21 David Holiday

第一关 - 感谢那些谁回答！与你们互动帮助我弄清楚发生了什么事。

原来，问题不是拉斐尔画布可言，但该插件我使用来处理拖/放（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对象的数组）

来源

2013-04-21 21:28:39

既然你说你的$(#canvas_container)尺寸正确登录时，setSize调用应该工作。

你可以用我的工作jsfiddle比较。你会特别关心你可能做出的任何呼叫，这意味着对视口边界有一些限制。如果你有这些约束上，你将不得不更新您的视框中自己造成拉斐尔在setSize做出被称为视框中的更新并不总是完全一致。

来源

2013-04-21 09:22:34 lib3d

我不是摆弄setViewBox。我也可能应该提到我使用raphael.free_transform插件来处理拖放的东西。我可以从你的jsfiddle中看到，当用户重新调整窗口的大小时，用户可见的边界似乎正在更新。但是，我想知道在这一点上画布是否真的被切掉了，或者如果你的动画盒子旋转着关于用户看不见的东西。动画的延迟让我觉得这可能是如此。我正在制作一个“分叉”小提琴来演示 - 将在tic中发布。 – 2013-04-21 09:59:07

我做了一个小提琴，但它没有表现出与我的项目相同的行为，我开始怀疑罪魁祸首是raphael。free_transform插件 - 我正在使用它来处理拖动。在小提琴中，我使用了Raphael内置的拖拽处理程序，该处理程序允许用户将元素从画布上拖出 - 使其无法恢复。在我使用插件的项目中，元素位置受画布限制，用户无法将其拖出界限。这是没有被paper.setSize更新的边界。这里是小提琴： http://jsfiddle.net/gHJJ6/24/ – 2013-04-21 10:34:11

要么你找到一种方式来告诉插件新的墙壁，或者你自己使用本地拖动和计算墙。它可能是非常无代价的，因为它可以在dragstart上计算一次。对于翻译，您只需计算dx和dy边界，从而计算4个浮点数。 – lib3d 2013-04-21 10:45:18

如果您不需要为IE7-8支持，然后自动调整大小可以很简单：

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

来源

2013-04-21 09:29:18 oyatek

我已经尝试过这种解决方案，但它允许用户将元素从画布上拖下来，并将它们拖放到无法检索到的区域（在raphaeljs网站上的草图示例中也可以） – 2013-04-21 09:56:18

拉斐尔Paper.setSize问题

回答

相关问题