Question

我刚刚开始使用拉斐尔，但我不能在ScaleRaphael制作多幅画布（我使用这个来响应＆gt;后制作网站有替代方法吗？

Multiple ScaleRaphael Canvases：http://jsfiddle.net/karo/gMyP5/13/
或全视图：http://jsfiddle.net/karo/gMyP5/13/embedded/result/
这里发生了一件奇怪的事情红色圆圈应该在第二个div中但是如果你用例如查看代码。在全视图中的firebug然后你看到两个svgs都在里面a为什么？

你对我有什么想法吗？谢谢Kaor

我的代码： HTML

<div id="wrapper">
<div id="paper"></div>
<br>
<div id="paper2"></div>
</div>

JavaScript的：

var paper = new ScaleRaphael("paper",200,200);
var circle = paper.circle(100, 100, 60).attr({fill:'red'});


var paper2 = new ScaleRaphael("paper2",200,200);
var circle2 = paper2.circle(50, 50, 30).attr({fill:'black'});


function resizePaper(){
  var win = $(this);
  paper.changeSize(win.width(), win.height(), true, false);
  paper2.changeSize(win.width(), win.height(), true, false);

}
resizePaper();
$(window).resize(resizePaper);

CSS

#wrapper
{
    position:relative;
}
#paper {
    background-color: lightgray;
    width:100%;
    height:200px;
    position:relative!important;
}
#paper2
{
    background-color: orange;
    width:100%;
    height:100px;
    position:relative!important;
}
svg
{
    position:absolute!important;
    top:0;
    left:0;
}

Answer 1

ScaleRaphael仅支持一个画布。在代码中，您可以看到它重新引用了第一个现有的svggroup或vmlgroup元素。

你不需要ScaleRaphael去做你正在做的事情。由于版本2拉斐尔已包含Paper.setViewBox并且它始终包括Paper.setSize，它们已经共同执行此操作。

Answer 2

我发现了一个问题并解决了它是如何工作的.... 看看这里：http://jsfiddle.net/karo/r4qvt/12/

我首先是纸质div然后是红色div

       <div id="paper"></div>
       <div id="red"></div>

   </div>
</div>

如果我在制作纸张格雷和“与第一个div”交谈之前，我将红色的红色纸和“红色”的红皮书放在其中。然后它工作

var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});

var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});

如果我这样做，那么其他方式就行了

var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});    

var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});

......很奇怪，但我找到了一个解决方案;）

ScaleRaphael中的多个画布 - 第二个画布中的圆圈出现在第一个画布中

2 个答案: