Question

这里我有一个JS Fiddle，用raphael.js解释了我在做什么。我是raphael的新手，有一周的经验。我真的很喜欢它的力量。但是，我总是倾向于在早期阶段以简单的方式做事情以避免以后的混淆。现在，问题。如你所见，有黑色笔划和红色笔划的立方体。立方体（六角形或任何你称之为的）有三个可见边。当我将鼠标悬停在它们上面时，我希望它们能够填充一些颜色。我希望三面都有不同的颜色。我还将在悬停时添加工具提示。现在所有这一切都非常简单，使用CSS或jQuery。如果可能，我更喜欢CSS。现在，有没有可能的方法我可以把raphael的东西留在这里并将它集成到CSS / jQuery中继续使用它们进行进一步的修改，以便我可以在整个项目中让我的生活更轻松？我使用raphael作为浏览器支持应该是IE9 +（是的！IE再次破坏它）。如果不推荐这种方式，我非常感谢你们中的一些人可以用raphael本身解释我可以做到这一点的可能方式（没有太多的复杂情况）。这里的问题是每个路径都在集合内。

JS （拉斐尔）

(function() {
    var paper = Raphael("paper", "100%", "100%");
    var cube1 = paper.set();
    var cube2 = paper.set();
    var cube3 = paper.set();
    var cube4 = paper.set();
    var cube5 = paper.set();
    var cube6 = paper.set();
    var cube7 = paper.set();
    // animate the set
    var anim = Raphael.animation({
        opacity: 1
    }, 500);

    // middle cube
    cube1.push(
        paper.path("M190 200 L260 160 330 200 260 240 190 200"),
        paper.path("M260 240 L330 200 330 280 260 320 260 240"),
        paper.path("M260 240 L260 320 190 280 190 200 260 240")
    )
    cube1.attr({
        stroke: "#ffffff",
        'stroke-width': 2,
        opacity: 0
    }).animate(anim);
    // second cube
    cube2.push(
        paper.path("M190 200 L260 160 330 200 260 240 190 200"),
        paper.path("M260 240 L330 200 330 280 260 320 260 240"),
        paper.path("M260 240 L260 320 190 280 190 200 260 240")
    )

    cube2.transform("t0 -80").attr({
        stroke: "#000000",
        opacity: 0
    }).animate(anim.delay(500));
    // third cube
    cube3.push(
        paper.path("M190 200 L260 160 330 200 260 240 190 200"),
        paper.path("M260 240 L330 200 330 280 260 320 260 240"),
        paper.path("M260 240 L260 320 190 280 190 200 260 240")
    )
    cube3.transform("t70 -40").attr({
        stroke: "red",
        opacity: 0
    }).animate(anim.delay(1000));
    // fourth cube
    cube4.push(
        paper.path("M190 200 L260 160 330 200 260 240 190 200"),
        paper.path("M260 240 L330 200 330 280 260 320 260 240"),
        paper.path("M260 240 L260 320 190 280 190 200 260 240")
    )
    cube4.transform("t70 40").attr({
            opacity: 0
        }).animate(anim.delay(1500))
        // fifth cube
    cube5.push(
        paper.path("M190 200 L260 160 330 200 260 240 190 200"),
        paper.path("M260 240 L330 200 330 280 260 320 260 240"),
        paper.path("M260 240 L260 320 190 280 190 200 260 240")
    )
    cube5.transform("t0 80").attr({
            stroke: "red",
            opacity: 0
        }).animate(anim.delay(2000))
        // sixth cube
    cube6.push(
        paper.path("M190 200 L260 160 330 200 260 240 190 200"),
        paper.path("M260 240 L330 200 330 280 260 320 260 240"),
        paper.path("M260 240 L260 320 190 280 190 200 260 240")
    )
    cube6.transform("t-70 40").attr({
            opacity: 0
        }).animate(anim.delay(2500))
        // seventh cube
    cube7.push(
        paper.path("M190 200 L260 160 330 200 260 240 190 200"),
        paper.path("M260 240 L330 200 330 280 260 320 260 240"),
        paper.path("M260 240 L260 320 190 280 190 200 260 240")
    )
    cube7.transform("t-70 -40").attr({
            stroke: "red",
            opacity: 0
        }).animate(anim.delay(3000))
        //use of settimeout for second animation
    setTimeout(function() {
        // Do something after 5 seconds
        cube2.animate({
            transform: "t0 -160"
        }, 300)
        cube3.animate({
            transform: "t140 -80"
        }, 300)
        cube4.animate({
            transform: "t140 80"
        }, 300)
        cube5.animate({
            transform: "t0 160"
        }, 300)
        cube6.animate({
            transform: "t-140 80"
        }, 300)
        cube7.animate({
            transform: "t-140 -80"
        }, 300)
    }, 4000);
    // hover for set
    function getHoverHandler(setName, fillColor) {
        return function() {
            setName.attr({
                fill: fillColor,
                cursor: "pointer"
            });
        };
    }
    cube2.hover(getHoverHandler(cube2, "rgba(0, 0, 0, 1)"), getHoverHandler(cube2, "rgba(0,0,0,0)"));
    cube3.hover(getHoverHandler(cube3, "rgba(255, 0, 0, 1)"), getHoverHandler(cube3, "rgba(0,0,0,0)"));
})();

我还添加了悬停，但是当我鼠标悬停时，我对不响应时感到不满。

Answer 1

不确定您实际上已经做了什么以及您仍然需要发现什么，但是您需要将所有内容放在循环中，以便每个元素都是唯一的。我批量分配了课程，但您可以为您可能想要的个人面部设置ID。希望它有所帮助。

JS：

var R = Raphael(0,0,440,510);
var coor = [[80,170],[220,90],[360,170],[360,330],[220,410],[80,330]];
cube =[];
f = [];
ed = [];
for(i=0;i<coor.length;i++){
R.setStart();
f[i[0]] = R.path("M0,0l-70,-40 70,-40 70,40 -70,40");
f[i[0]].node.setAttribute("class","red");
f[i[1]] = R.path("M0,0l70,-40 0,80-70,40 0,-80");
f[i[1]].node.setAttribute("class","green");
f[i[2]] = R.path("M0,0l0,80 -70,-40 0,-80 70,40");
f[i[2]].node.setAttribute("class","blue");
ed[i] = R.path("M0,0l0,80 M0,0l70,-40 M0,0l-70,-40 0,80 70,40 70,-40 0,-80-70,-40-70,40");
ed[i].node.setAttribute("class","edges");
cube[i] = R.setFinish();
cube[i].transform("t" + coor[i][0] + "," + coor[i][1]);
}

CSS：

body {
    background: #e3e3e3;
}
.edges {
    fill:none;
    stroke:black;
    stroke-width:1;
}
.red {
    fill:rgba(0,0,0,0);
    stroke:none;
}
.red:hover {
    fill:red;
}
.green {
    fill:rgba(0,0,0,0);
    stroke:none;
}
.green:hover {
    fill:green;
}
.blue {
    fill:rgba(0,0,0,0);
    stroke:none;
}
.blue:hover {
    fill:blue;
}

http://jsfiddle.net/crockz/77nfejnz/

更新：

不同的立方体不同的颜色：

http://jsfiddle.net/crockz/77nfejnz/1/

为不同的路径应用不同的颜色，其中每个路径都在raphael.js集内

1 个答案: