0

我是 Raphael 的新手，正在尝试做一些非常简单的事情，但失败得很惨。有谁知道如何创建拉斐尔画布并设置背景颜色（例如：绿色）？这是我到目前为止所拥有的，但是当我在浏览器中打开它时，它什么也没有显示......

<html>
<head><title></title>
<script src="raphael-min.js"></script>
</head>

<body>

<script type="text/javascript">
//all your javascript goes here

var paper = Raphael(15,40,320,300);

</script>

</body>
</html>

当我将此代码放入 js 脚本中时，它会正确显示一个圆圈...

var circle = paper.circle(50,10,10);
circle.attr("fill","#0f0");

但同样，我的问题是尝试设置背景颜色。任何帮助，将不胜感激。

谢谢

4

2 回答 2

3

RaphaelJS 不提供默认的背景样式，因为它的事件系统依赖于对象驱动。但是，您可以指定一个特定的 DIV 并相应地对其进行样式设置：

<div 
    id="my_paper_div" 
    style="background-color:limegreen;width:400px;height:400px"
></div>

确保您没有调用 DIV 或变量文件。给它们起不同的名字，否则你会遇到一些 IE 不兼容的问题。

像这样重新声明你的纸质javascript：

// declare outside the startup scope, so you can do fancy things later
var my_paper;

// raphaeljs' version of onload
Raphael( function() {
    my_paper = Raphael("my_paper_div", 400, 400);
});

Since RaphaelJS rendering doesn't interfere with the background, you can technically mix and match HTML and SVG/VML. For example, see this jsfiddle: http://jsfiddle.net/NQtU5/

于 2012-06-25T14:10:51.563 回答
1

You could also draw a rectangle the size of the canvas:

var paper = Raphael("my_paper_div", 600, 400),
    placemat = paper.rect(0,0,paper.width,paper.height).attr({"fill" : "#99FF99" });

I usually start this way with Raphael projects because I find it useful to have an object in the background to which to attach events, like a click event that closes all open tooltips.

See example.

于 2012-11-10T00:48:28.310 回答