1

RachelJS を使用して 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");
});
4

1 に答える 1

4

六角形をどのように反転しますか? 水平方向または垂直方向にのみ反転したい場合は、スケール機能を使用できます。ドキュメントには、次のようにリストされています。

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

sxネガ(水平方向に反転) または(垂直方向に反転)を挿入できますsy。六角形を同じサイズのままにしたいので、次-1のいずれかの値を使用します。

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

更新:どうやらscale関数は非推奨になっているため、transform代わりに関数を使用する必要があり、スケール (または六角形の中心の周りのスケール) の後に変換を調整することを忘れないでください。したがって、コードは次のようになります (500 ミリ秒のイーズアウト効果があります)。

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

または

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

アニメーション効果なし。

于 2012-07-04T07:34:29.653 に答える