相对定位 Raphael 对象答案

【问题标题】：Relatively Position Raphael Objects相对定位 Raphael 对象
【发布时间】：2023-04-08 05:40:01
【问题描述】：

我最近一直在搞乱 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 坐标，但这似乎不是最好的解决方案。

感谢您的帮助！

edit：这是一个 jsfiddle，可以帮助我准确地阐明我的意思。 http://jsfiddle.net/xpNBr/

【问题讨论】：

标签： javascript html css svg raphael

【解决方案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"
}]);

【讨论】：

迟到总比不到好！自从问了这个问题后我就没有碰过拉斐尔，但我相信这对某人会有帮助。谢谢！
在 jsfiddle 中运行它表明文本对象与 rect 对象的坐标无关。它们都是相对于画布的。我如何绘制一个具有相对于父矩形坐标的矩形。都在同一个画布上？

【解决方案2】：

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

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

请注意，画布块之间的间距及其大小是在 CSS 中定义的。

【讨论】：