Question

I have created a Hexagon with RaphelJS, but I could not find a nice, easy tutorial on how I can flip the Hexagon.

Here is the current hexagon creation code:

function polygon(x, y, size, sides, rotate) {
var self = this;

self.centrePoint = [x,y];
self.size = size;
self.sides = sides;
self.rotated = rotate;
self.sizeMultiplier = 50;

self.points = [];

for (i = 0; i < sides; i++) {
    self.points.push([(x + (self.size * self.sizeMultiplier) * (rotate ? Math.sin(2 * 3.14159265 * i / sides) : Math.cos(2 * 3.14159265 * i / sides))), (y + (self.size * self.sizeMultiplier) * (rotate ? Math.cos(2 * 3.14159265 * i / sides) : Math.sin(2 * 3.14159265 * i / sides)))]);
}

self.svgString = 'M' + self.points.join(' ') + ' L Z';
}

$(document).ready(function() {
var paper = Raphael(0, 0, 450, 450);

var path1 = new polygon(100, 100, 2, 6, false);
var path2 = new polygon(205, 187, 1, 6, false);
var path3 = new polygon(100, 277, 2, 6, false);

var hex1 = paper.path(path1.svgString);
var hex2 = paper.path(path2.svgString);
var hex3 = paper.path(path3.svgString);

hex1.node.id = "hex1";
hex1.attr("fill", "#ccc");
hex1.attr("stroke", "#aceace");
});

Answer 1

How do you wish to flip the hexagon? If you only wish to flip horizontally or vertically, you can use the scale function. The documentation lists it like this:

Element.scale(sx, sy, [cx], [cy])

and you can insert a negative sx (flip horizontally) or sy (flip vertically). Since you want your hexagon to stay the same size, use the value -1 for either:

hex1.scale(1,-1, 0, 0);

Update: Apparently the scale function has been deprecated, so you should use the transform function instead, and remember to adjust for translation after the scale (or scale around the center of the hexagon). So the code would look like this (with a 500ms ease out effect) :

hex1.animate({transform: "S-1,1"},500,'easeOut'); 

Or

hex1.transform("S-1,1")

without the animation effect.