CODEWITHSUNDEEP
javascriptjquerycsssvgraphael
Thomas Sebastian
Thomas Sebastian

Reputation: 1612

Apply different colors for different path where each path is inside a raphael.js set

Here I have a JS Fiddle which explains what I am doing using raphael.js. I am new to raphael with 1 week experience.I really love it's power. But, I always tend to do things in a simple manner at early stages to avoid confusions later. Now, to the problem. As you can see there are cubes with black stroke and red stroke. The cube (hexagon or whatever you call it)has three visible sides. When I hover over them, I want them to fill up with some color. I want all the three sides to have different colors. I will also be adding a tooltip to it on hover. Now all this is very simple using CSS or jQuery for that matter. I prefer CSS if that is possible. Now, Is there a possible way I can leave the raphael stuff here and integrate it to CSS/jQuery to continue further modifications using them so that I can make my life easier throughout the project? I used raphael as browser support should be IE9+ (Yes! IE ruins it again). If that way is not recommended, I highly appreciate if some of you could explain the possible way I can do this using raphael itself (without much complications). The problem here is each path is inside the set.

JS (Raphael) 

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

I have also added hover, But I am not happy with the unresponsiveness sometimes when I mouseover.

Upvotes: 0

Views: 309

Answers (1)

crockz
crockz

Reputation: 231

Not sure what you can actually already do and what you still need to discover, but you need to put everything inside a loop so every element is drawn unique. I mass assigned classes but you can set an id to the an individual face that you might want. Hope it helps.

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/

UPDATE:

different cubes different colors:

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

Upvotes: 1

Related Questions