2

我刚开始使用 Raphael，但我不知道在 ScaleRaphael 中制作多个画布是正确的
（我在响应后使用它来制作网站 > 是否有替代方案？

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

你对我有什么想法吗？谢谢考尔

我的代码：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;
}
4

2 回答 2

0

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

你不需要 ScaleRaphael 来做你正在做的事情。由于版本 2 Raphael 已经包含Paper.setViewBox并且它总是包含Paper.setSize，它们已经一起做到了。

于 2013-04-04T13:13:45.800 回答
0

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

我首先有纸 div，然后是红色 div 

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

   </div>
</div>

如果我在制作paperGrey之前为div“red”和其中的矩形制作redpaper并“与”第一个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'});

...奇怪，但我找到了解决方案；）

于 2013-04-05T12:10:25.867 回答