用RaphaelJS翻转一个形状

我已经用RaphelJS创建了一个Hexagon，但是我在Google上搜索了好几个小时，并且无法找到一个关于如何翻转Hexagon的很好的简单教程。用RaphaelJS翻转一个形状

这是当前六边形创建代码：

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

我将不胜感激任何帮助。

谢谢。

来源

2012-07-04 Ciwan

你想如何翻转六角？如果您只希望水平或垂直翻转，您可以使用scale功能。该文档列出这样的：

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

，你可以插入一个负sx（水平翻转）或sy（垂直翻转）。因为你希望你的六边形保持相同的大小，使用值-1为两种：

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

更新：显然，scale功能已被弃用，因此，你应该使用transform函数来代替，记得调整用于在比例（或六边形中心周围的比例）之后进行平移。因此，代码看起来像这样（用500ms的缓出效果）：

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

或者

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

没有动画效果。

来源

2012-07-04 07:34:29

感谢Herman的回复。我得到的JS错误[self.centrePoint]是未定义的，这是有道理的，因为只存在于函数[多边形]的范围内。！ – Ciwan

哦，是的，这是我的一个错误 - 但你可以通过获取或计算六边形的实际中心点来修复它。你的问题的答案仍然是'-1'比例尺部分。 –

谢谢赫尔曼。计算Hexagon中心点的最佳方法是什么（最简单的方法）？ – Ciwan

用RaphaelJS翻转一个形状

回答

相关问题