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

Question

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

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

经过大量研究 Jquery 并同时在 raphaeljs, I have decided to start working with raphaeljs. Im totally new to the vector graphics. So obviously there might be something that I may be missing. I have followed this fiddle 上画一条直线。我还创建了另一个脚本来在 window 上的任何位置绘制圆圈（圆圈表示座位）以下是脚本

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 示例线是使用 'path' 绘制的，因此是否可以在每条路径上加载圆并将它们绘制为一个接一个的连续圆线，或者我是否必须采取任何不同的方法。

另外在旁注中是否有 Seats.io

的任何开源项目或代码

任何帮助将不胜感激

Answer 1

Ben 来自 seats.io 这里。

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

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

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

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

How to place one element inside another in raphael js?

javascript

jquery

svg

raphael