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

}

时间: 2024-11-08 22:58:47

Raphael绘制圆圈环绕方法的相关文章

Python解析Wav文件并绘制波形的方法

资源下载 #本文PDF版下载 Python解析Wav文件并绘制波形的方法 #本文代码下载 Wav波形绘图代码 #本文实例音频文件night.wav下载 音频文件下载 (石进-夜的钢琴曲) 前言 在现在繁忙的生活中,我们经常会听些歌来放松一下自己,我们经常会从各种播放软件中听自己喜欢的歌,并且往往我们会下载一部分歌曲,而现在音频的种类也相当繁多,像是Wav,Mp3,FLAC,AAC等等很多格式,最近由于需要做一个能够分析Wav格式音频的波形来取得一些数据比如获取人录音时是否说完等等用途.本周先对解

几何画板怎样绘制圆柱的方法

立体几何绘图在几何图形中非常普遍,将立体图形用几何绘图工具制件出来可以使图形更直观形象,易于人们的空间想象.本文向大家介绍怎样用几何画板绘制圆柱体的方法. 构造椭圆和点.打开几何画板,单击侧边栏“自定义工具”——“圆锥曲线A”——“椭圆”绘制出椭圆,用“点工具”,在椭圆上面绘制一个点A. 平移圆心和点A.选择圆心和点A,如图所示,单击菜单栏“变换”——平移.在弹出的对话框填上平移的距离,并单击“平移”按钮. 构造第二个椭圆.选择O点和A点,在“变换”菜单中选择“迭代”,在迭代窗口中分别点击A’点

绘制圆锥体的方法是什么?如何在CAD中绘制圆锥体?

绘制圆锥体的方法是什么?如何在CAD中绘制圆锥体?不知道大家是不是和小编有一样的疑问,就是对于刚刚接触CAD的小伙伴们要怎么来进行绘制CAD图纸了,那可不是一天就能绘制完成的,是需要借助CAD编辑器来进行绘制的,但是在CAD编辑器中绘制圆锥体的方法是什么?如何在CAD中绘制圆锥体?大家都知道怎么来进行绘制吗?那下面我们就一起来看看具体操作吧! 使用步骤一:打开电脑,在电脑桌面中任意的打开一个浏览器,在浏览器的搜索框中搜索迅捷CAD编辑器专业版,然后鼠标点击进入官网,点击下载安装最新版本的CAD编

什么是流程图?流程图的作用是什么?如何在线绘制流程图的方法

昨天给大家讲述了在线绘制思维导图的操作方法,今天我将给大家讲述如何在线绘制流程图的方法.大家有没有发现无论是在我们的日常办公中还是生活中,流程图都是高频率出现的,不管如何变化,流程图的作用都不会变?那么,什么是流程图?流程图的作用是什么?怎样才能在线绘制好看的流程图方法介绍.什么是流程图?流程图是流经一个系统的信息流.观点流或部件流的图形代表.在企业中,流程图主要用来说明,某一过程.这种过程可以是生产线上的工艺流程,也可以是完成一项任务必需的管理过程.流程图的作用?流程图是对过程.算法.流程的一

绘制流程图精细方法分享

流程图的日渐流行,代表着使用的人数增多,说明流程图带来的帮助还是很大的,那在创建流程图时阻挡我们绘制流程图的因素以及困难有哪些呢?位居首位的应该是绘制流程图的软件以及绘制流程图的方法,那为了解决大家的难题,推荐大家使用迅捷画图在线网站进行编辑使用,该在线网站绘制方法简化了流程图的搭建过程,推荐大家使用. 绘制工具: 迅捷画图 操作方法介绍: 第一步:选择从模板搭建或者是新建空白页面进行绘制 方法一:创建空白页面进行使用 进入在线编辑流程图的网站,这里讲述的是流程图所以选择流程图进行新建使用就可以

什么是VENN,绘制VENN流程图方法介绍

VENN译文氏图.温氏图.范氏图,是在所谓的集合论,数学分支中,在不太严格的意义下用以表示集合的一种草图,用于表示不同事物的群组之间的数字或逻辑联系,适合用来表示集合或类之间的"大致关系",也常常被用来帮助推导关于集合运算的一些规律,下面是分享的绘制VENN流程图方法介绍,一起学习吧! 绘制工具选择:询价诶画图是一款可以直接在线绘制各种思维导图.流程图等多种图形的网站,里面有很多的模板,可以直接在线套用模板进行绘制,拖曳式操作,很适合新手使用的哦! 绘制流程图方法介绍: 1.打开迅捷画

Android中View的绘制过程 onMeasure方法简述

Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android framework将会处理绘制过程,Activity只需提供它的布局的根节点. 绘制过程从布局的根节点开始,从根节点开始测量和绘制整个layout tree. 每一个ViewGroup 负责要求它的每一个孩子被绘制,每一个View负责绘制自己. 因为整个树是按顺序遍历的,所以父节点会先被绘制,而兄弟节点会按照它们在树中出现的顺序被绘制. 绘制是一个两遍(two pass)的过程:一个mea

【转】Android中View的绘制过程 onMeasure方法简述 附有自定义View例子

Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android framework将会处理绘制过程,Activity只需提供它的布局的根节点. 绘制过程从布局的根节点开始,从根节点开始测量和绘制整个layout tree. 每一个ViewGroup 负责要求它的每一个孩子被绘制,每一个View负责绘制自己. 因为整个树是按顺序遍历的,所以父节点会先被绘制,而兄弟节点会按照它们在树中出现的顺序被绘制. 绘制是一个两遍(two pass)的过程:一个mea

1.40-手工绘制板框方法

1 设置栅格0.05显示栅格为0.05,单位设置毫米(umm)设置完成后保存. 2 绘制板框. 为板框设置原点. 设置原点快捷键的方法为先选中板框,然后键盘输入SO确定. 设置板框的时候如果都是直角板框有时候需要倒角那么首先需要选择板框右键添加倒角. 弹出对话框中设置半径 如果需要到某个角则只选择某一个角. 如果需要到圆角.则需要进行如下设置. 弹出的对话框中选择设计---倒角