1

我设法用 Raphel 创建了一个六边形，给它一个笔触和一个填充图像，然后（在 StackOverFlow 的帮助下）设法在六边形上创建了一个翻转动画。

但我面临一个问题。当六边形翻转时，背景图像不会随之翻转。我怎样才能使六边形翻转，但在翻转时，也显示背景图像翻转。

这是我目前拥有的：

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 hex1 = paper.path(path1.svgString);

    hex1.node.id = "hex1";
    hex1.attr("fill", "url('http://i49.tinypic.com/23ma7pt.jpg')");
    hex1.attr("stroke", "#aceace");

    /* flip animation */
    hex1.click(function() {
            hex1.animate({transform: "S0,1"},500,'easeIn', function()
            {    
                hex1.attr("fill","url('http://i49.tinypic.com/23ma7pt.jpg')");
                hex1.animate({transform: "S-1,1"},500,'easeOut');
            });
    });
});
4

0 回答 0