如何在Raphael JS中将一个元素放置在另一个元素中？

Question

我试图创建一个类似Seats.io的交互式座位布局。但是，我不需要确切的功能，而只需要几件事，例如：

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

在对Jquery以及raphaeljs进行了大量研究之后，我决定开始使用raphaeljs。我对矢量图形完全陌生。所以很明显，我可能会缺少一些东西。我按照这个小提琴画了一条直线。我还创建了另一个脚本以在窗口上的任意位置绘制圆圈（圆圈将表示座位），以下是脚本

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的 Ben 。

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

1. 计算起点和终点之间的辅助路径。您已经拥有了。
2. 计算座位之间的距离（基于座位大小）： helperPath.getTotalLength() / (numberOfSeats - 1);
3. 对于每个座位，呼叫getPointAtLength并在该点周围画一个圆：helperPath.getPointAtLength(distanceBetweenSeatsOnHelperPath * i++)

显然，如果要对齐网格以对齐行，曲线行等，它会变得更加有趣，但是您应该可以从上面开始。