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

// 给绘制的圆圈填充红色 (#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'
});

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绘制圆圈环绕方法

最新文章

热门文章