0

Im trying to create an interactive seating layout like this Seats.io. However I dont need the exact features but just few things such as:

  1. Plotting seats anywhere on the screen
  2. Plotting list of seats from one point to another
  3. Seats hover as circle when plotting from one mouse click point to another

After much research in Jquery and simultaneously on 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 to draw a straight line. I have also created another script to plot circles anywhere on the window(the circles will mean seats) following is the script

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);
    });
});

}

using the above script I'm able to plot circles(seats) on my screen. Now based on the fiddle example lines are drawn using 'path', so is it possible to load circles on every path and draw them as sequential line of circles one after the other, or do I have to take any different approach.

Also on a side note is there any opensource project or code for the Seats.io

Any help would be really appreciated

1

1 Answer 1

5

Ben from seats.io here.

http://raphaeljs.com/reference.html#Element.getPointAtLength is indeed what we use. You'll basically need to

  1. calculate a helper path between start and end point. You already have that.
  2. calculate the distance between seats (based on seat size): helperPath.getTotalLength() / (numberOfSeats - 1);
  3. for each seat, call getPointAtLength and draw a circle around that point: helperPath.getPointAtLength(distanceBetweenSeatsOnHelperPath * i++)

Obviously, it gets more interesting if you want to snap to a grid to align rows, curve rows, etc, but you should be able to get started with the above.

1
  • magic, pure magic. Plus keeping a bit of state on the side, of course ;)
    – bver
    Jan 20, 2015 at 9:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.