我最近一直在和Raphael.js打交道,我遇到了一个关于每个Raphael对象位置的问题。
我想创建任意数量的“画布”,但要将它们安排在一个div中,该div已经位于页面上。我一直在想办法让它们表现得像块元素,但还没有找到答案。每个新的raphael对象都放在任何div之外。
这是html:
...
#content{height:100%; width:980px; margin:0 auto;}
</style>
</head>
<body>
<div id="content"></div>
...
以及javascript:
var previews = [];
var prevSize = 25;
var spacing = 10;
//get container
var container = document.getElementById('content');
//get container width
var containerWidth = parseInt(getComputedStyle(container,"").getPropertyValue('width'));
var prevsPerRow =containerWidth/(prevSize+spacing);
var rowsPerPage = 20;
for(var y=0; y<rowsPerPage-1; y++){
for(var x=0; x<prevsPerRow; x++){
var preview = Raphael((x*prevSize)+(x*spacing), (y*prevSize)+(y*spacing),prevSize, prevSize);
previews.push(preview);
}
}
for(var x=0; x<previews.length-1; x++){
var temp = previews[x];
var rectangle =temp.rect(0,0,prevSize,prevSize);
rectangle.attr('fill','black');
}
我正在考虑的一个解决方案是简单地将所需div的偏移量添加到对象的x和y坐标,但这似乎不是最好的解决方案。
谢谢你的帮助!
编辑:这里有一个jsfiddle来帮助阐明我的目的。
http://jsfiddle.net/xpNBr/
最佳答案
好吧,现在已经晚了两年,但我还没看到答案。所以对于后代和未来的搜索者:我将使用raphael提供的element或element I d factory方法,如here所述。
从那一页:
// Each of the following examples create a canvas
// that is 320px wide by 200px high.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);