如何在 raphael js 中将一个元素放在另一个元素中？

Question

我正在尝试创建像 Seats.io 这样的交互式座位布局。但是我不需要确切的功能，只需要一些东西，例如：

1. 在屏幕上的任意位置绘制座位
2. 从一个点到另一个点绘制座位列表
3. 从一个鼠标单击点绘制到另一个鼠标单击点时，座椅悬停为圆形

在对 Jquery 和raphaeljs 进行了大量研究之后，我决定开始使用 raphaeljs。我对矢量图形完全陌生。所以很明显，我可能会遗漏一些东西。我已经按照fiddle 画了一条直线。我还创建了另一个脚本来在窗口的任何位置绘制圆圈（圆圈表示座位）以下是脚本

window.onload = function () {

var height = $(document).outerHeight(true);
var width = $(document).width();

var radius = 10;
var paper = Raphael(0, 0, width, height);
var i = 0;
$(document).click(function (e) {

    i = i + 1;
    var x = e.pageX;
    var y = e.pageY;
    var seat = paper.circle(x, y, radius)
            .attr({stroke: "none", fill: "#f00", opacity: .4})
            .data("i", i);

    seat.mouseover(function () {
        this.attr("opacity", 1);
    });
    seat.mouseout(function () {
        this.attr("opacity", .4);
    });
});

}

使用上面的脚本，我可以在我的屏幕上绘制圆圈（座位）。现在基于小提琴示例线是使用“路径”绘制的，因此是否可以在每条路径上加载圆圈并将它们一个接一个地绘制为连续的圆圈线，还是我必须采取任何不同的方法。

另外补充一点，Seats.io 是否有任何开源项目或代码

任何帮助将不胜感激

Answer 1

来自seats.io 的本。

http://raphaeljs.com/reference.html#Element.getPointAtLength 确实是我们使用的。你基本上需要

1. 计算起点和终点之间的辅助路径。你已经有了。
2. 计算座位间距（根据座位大小）：helperPath.getTotalLength() / (numberOfSeats - 1);
3. 对于每个座位，请致电getPointAtLength 并在其周围画一个圆圈 点：helperPath.getPointAtLength(distanceBetweenSeatsOnHelperPath * i++)

显然，如果您想捕捉到网格以对齐行、曲线行等，它会变得更有趣，但您应该能够从上面开始。