Question

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

在屏幕上的任意位置绘制座位
从一个点到另一个点绘制座位列表
当从一个鼠标点击指向另一个

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

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

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

显然，如果要捕捉到网格以对齐行，曲线行等，它会变得更有趣，但您应该能够开始使用上述内容。

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

1 个答案: