javascript - 如何在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);
    });
});

}

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

另外，还有关于 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++)

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