CODEWITHSUNDEEP
javascriptjquerysvgraphael
Vikneshwar
Vikneshwar

Reputation: 1033

How to place one element inside another in raphael js?

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

Upvotes: 0

Views: 366

Answers (1)

bver
bver

Reputation: 76

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.

Upvotes: 5

Related Questions