Raphael绘制圆圈环绕方法

标签：

$scope.toRadians = function (degrees)
{
return degrees * (Math.PI / 180);
}

$scope.toDegrees = function (radians)
{
return radians * 180 / Math.PI;
}

$scope.initCircle = function () {
//alert(document.body.clientHeight);
var w = document.body.clientWidth;
var h = document.body.clientHeight - 50;
var centerOriginx = w / 2 + 5;
var centerOriginy = h / 3 + 20;
var paper = Raphael(‘diagram‘, w, h);
$scope.paper = paper;
paper.text(60, 10, ‘技能信息‘).attr(‘font-size‘, 15);
//var paper = Raphael(10, 50, 320, 200);
// 在坐标（x = 50, y = 40）绘制半径为 10 的圆
var radius = 50;

if (document.body.clientHeight <= 480) {
//radius = 35;
}
var circle = paper.circle(centerOriginx, centerOriginy, radius);
// 给绘制的圆圈填充红色 (#f00)
circle.attr("fill", "#2f51ac");
// 设置画笔（stroke）的颜色为白色
circle.attr("stroke", "#fff").attr(‘stroke-width‘, 0);
//animate2();
var tag0 = ‘‘;
if ($scope.tags.length > 0 && $scope.tags[0])
tag0 = $scope.tags[0];
var textcenter = paper.text(centerOriginx, centerOriginy, tag0).attr({
font: "15px sans-serif"
});
circle_outer = paper.circle(centerOriginx, centerOriginy, radius + 10);
circle_outer.attr("stroke", "#3e58af");

var stcenter = paper.set();
stcenter.push(
circle,
circle_outer,
textcenter
);
animateCenter(stcenter);
//st.attr({fill: "red"});
// angle = self.options.dots ? (index * 360 / $slides.length) : parseInt($(slide).attr("data-degrees"), 10)
// , position =
// {
// top : -Math.cos(toRadians(angle)) * self.options.radius + containerSize.height / 2 - dotSize.height / 2
// , left : Math.sin(toRadians(angle)) * self.options.radius + containerSize.width / 2 - dotSize.width / 2
// }
var i = 1;
//var length = 7;
while (i < $scope.tags.length + 1) {
var color = ‘#67bacb‘;
switch (i) {
case 1:
color = ‘#e3423f‘;
break;
case 2:
color = ‘#f88500‘;
break;
case 3:
color = ‘#d9c93a‘;
break;
case 4:
color = ‘#009da1‘;
break;
case 5:
color = ‘#55c042‘;
break;
case 6:
color = ‘#283388‘;
break;
}
var r = radius;
var angle = i * 360 / $scope.tags.length;
var top = -Math.cos($scope.toRadians(angle)) * 110 + centerOriginy- 10 / 2;
var left = Math.sin($scope.toRadians(angle)) * 110 + centerOriginx - 10 / 2;
var c = paper.circle(left, top, radius - 10);
c.click(function () {
//s.animate({transform: t, stroke: c}, 2000, "bounce");
//this.animate({cx: this.attr(‘cx‘)}, this.attr(‘cx‘) + 20, "elastic");
//this.cx = 400;
}).touchstart(function () {
this.animate({"fill-opacity": .75}, 500);
}).touchend(function () {
this.animate({"fill-opacity": .4}, 500);
});

// 给绘制的圆圈填充红色 (#f00)
c.attr("fill", color).attr(‘stroke-width‘, 0);

//var _anim = Raphael.animation({50:{ "fill-opacity": .1} ,1000:{ "fill-opacity": .8} }, 2000);
//c.animate(_anim.repeat("Infinity"));

var _txt = paper.text(left, top, $scope.tags[i - 1]).attr({
font: "13px sans-serif", fill:‘#ffffff‘
});

var _set = paper.set();
_set.push(
c,
_txt
);
//animateCenter(_set);
++i;
}

var _y = h - 100;
var rect = paper.rect(0, _y, w, 90);
_y += 40;
rect.attr(‘fill‘,‘#2f51ab‘).attr( "stroke", "#3e58af");
var _txt = paper.text(150, _y, ‘个人说明：‘ + $scope.desc).attr({
font: "15px sans-serif", fill:‘#ffffff‘
});

function animateCenter(o) {
var ms = 4000;
var _r = 50;
if (document.body.clientHeight <= 480) {
_r = 35;
}
var anim = Raphael.animation({
50: {
r: _r,
//stroke: ‘#f00‘,
"fill-opacity": .95
},
100: {
r: 40,
//stroke: ‘#fff‘,
"fill-opacity": .4
},350: {
r: _r,
//stroke: ‘#f00‘,
"fill-opacity": 1
}
}, ms);

o.animate(anim.repeat("Infinity")); //Infinity为无限次
}



function animate2() {
var ms = 1000;
var easing = ‘elastic‘;

stcenter.animate({
cx: centerOriginx + Math.random() * 120, //圆心x坐标
cy: centerOriginy + Math.random() * 100, //圆心y坐标
}, ms, easing, function(){
setTimeout(animate2, 1000);
});
}

function animate() {
var ms = 1000;
var easing = [‘elastic‘, ‘‘, ‘bounce‘, ‘ease-in-out‘][Math.round(Math.random() * 3)];

circle.animate({
cx: 50 + Math.random() * 120, //圆心x坐标
cy: 50 + Math.random() * 100, //圆心y坐标
}, ms, easing, function(){
setTimeout(animate, 1000);
});
}

}

Raphael绘制圆圈环绕方法

标签：

原文地址：http://www.cnblogs.com/yuanxiaoping_21cn_com/p/4612606.html