Reputation: 1612
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
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