我最近一直在和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"
}]);

07-28 01:19
查看更多