我已经用RaphelJS创建了一个Hexagon,但是我找不到关于如何翻转Hexagon的简单易用的教程。
这是当前的六边形创建代码:
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");
});
您希望如何翻转六角形?如果只希望水平或垂直翻转,则可以使用scale功能。该文档将其列出为:
Element.scale(sx, sy, [cx], [cy])
您可以插入一个负数sx
(水平翻转)或sy
(垂直翻转)。由于您希望六边形保持相同的大小,因此请使用-1
值之一:
hex1.scale(1,-1, 0, 0);
Update:显然scale
功能已被弃用,因此您应该改用transform
功能,并记住在比例尺(或围绕六边形中心的比例尺)之后调整平移。因此代码看起来像这样(具有500ms的缓解效果):
hex1.animate({transform: "S-1,1"},500,'easeOut');
或
hex1.transform("S-1,1")
没有动画效果。