Question

我最近一直在搞乱Raphael.js而且我遇到了关于每个Raphael对象位置的问题。

我想创建一个任意数量的'画布'，但是将它们排列在已经位于页面上的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/

Answer 1

嗯，这已经晚了两年，但我在这里找不到答案。对于后代和未来的寻求者：我将使用raphael提供的元素或元素Id工厂方法，如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"
}]);

Answer 2

您可以为每个新创建的画布使用不同的容器这是一个工作示例，使用 addCanvas 函数创建每个新元素：

http://jsfiddle.net/creaweb/KtNPS/5/

请注意，canvas块之间的间距是在CSS中定义的，以及它们的大小。

相对位置拉斐尔对象

2 个答案: