forked from DmitryBaranovskiy/raphaeljs.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
image-rotation.html
53 lines (53 loc) · 3.19 KB
/
image-rotation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphaël · Image Rotation</title>
<link rel="stylesheet" href="demo.css" media="screen">
<link rel="stylesheet" href="demo-print.css"media="print">
<script src="raphael.js"></script>
<script>
window.onload = function () {
var src = document.getElementById("bee").src,
angle = 0;
document.getElementById("holder").innerHTML = "";
var R = Raphael("holder", 640, 480);
R.circle(320, 240, 200).attr({fill: "#000", "fill-opacity": .5, "stroke-width": 5});
var img = R.image(src, 160, 120, 320, 240);
var butt1 = R.set(),
butt2 = R.set();
butt1.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}),
R.path("M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z").attr({stroke: "none", fill: "#000"}),
R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}));
butt2.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}),
R.path("M37.566,9.551c9.331,6.686,11.661,19.471,5.502,29.014l2.36,1.689l-4.893,2.262l-4.893,2.262l0.568-5.36l0.567-5.359l2.365,1.694c4.657-7.375,2.83-17.185-4.352-22.33c-7.451-5.338-17.817-3.625-23.156,3.824C6.3,24.695,8.012,35.06,15.458,40.398l-2.857,3.988C2.983,37.494,0.773,24.109,7.666,14.49C14.558,4.87,27.944,2.658,37.566,9.551z").attr({stroke: "none", fill: "#000"}),
R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}));
butt1.translate(10, 181);
butt2.translate(10, 245);
butt1[2].click(function () {
angle -= 90;
img.stop().animate({transform: "r" + angle}, 1000, "<>");
}).mouseover(function () {
butt1[1].animate({fill: "#fc0"}, 300);
}).mouseout(function () {
butt1[1].stop().attr({fill: "#000"});
});
butt2[2].click(function () {
angle += 90;
img.animate({transform: "r" + angle}, 1000, "<>");
}).mouseover(function () {
butt2[1].animate({fill: "#fc0"}, 300);
}).mouseout(function () {
butt2[1].stop().attr({fill: "#000"});
});
// setTimeout(function () {R.safari();});
};
</script>
</head>
<body>
<div id="holder">
<img id="bee" src="bd.jpg" width="320" height="240" alt="Bee">
</div>
<p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
</body>
</html>