1、椭圆曲线简介
前面的学习笔记:Raphael学习笔记(3)--绘图(路径【直线】)简单的描述了绘制椭圆曲线的参数,但没有详细的介绍各个参数的含义,这次,我们就详细的学习一下椭圆曲线的绘制。
A(a) elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y) ;
参数含义:
rx:横轴的长度;
ry:纵轴的长度;
x-axis-rotation:椭圆的横轴与x轴的角度;
large-arc-flag:区分弧度的大小(0表示小角度弧度,1表示大角度弧度);
sweep-flag:绘制弧度围绕椭圆中心的方向(0表示逆时针方向,1表示顺时针方向);
x y:椭圆曲线终点坐标;
2、椭圆曲线实例
为了更好的理解上面的参数描述,请看下面的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<style type="text/css">
.wraper {
position: relative;
float: left;
width: 400px;
height: 400px;
margin-left: 10px;
margin-top: 10px;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
/*
绘制椭圆曲线
*/
var raphael_4 = new Raphael('raphael_4',400,400);
//绘制左上的椭圆
raphael_4.ellipse(130,40,60,30);
raphael_4.ellipse(70,70,60,30);
raphael_4.path('M70,40 A60,30 0 0,0 130,70').attr('stroke','red');
raphael_4.text(40,30,'start(70,40)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(160,80,'end(130,70)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(70,120,'large-arc-flag=0\nsweep-flag=0')
.attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'start'
});
//绘制右上的椭圆
raphael_4.ellipse(330,40,60,30);
raphael_4.ellipse(270,70,60,30);
raphael_4.path('M270,40 A60,30 0 0,1 330,70').attr('stroke','red');
raphael_4.text(240,30,'start(270,40)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(360,80,'end(330,70)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(270,120,'large-arc-flag=0\nsweep-flag=1')
.attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'start'
});
//绘制左下的椭圆
raphael_4.ellipse(130,240,60,30);
raphael_4.ellipse(70,270,60,30);
raphael_4.path('M70,240 A60,30 0 1,0 130,270').attr('stroke','red');
raphael_4.text(40,230,'start(70,240)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(160,280,'end(130,270)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(70,320,'large-arc-flag=1\nsweep-flag=0')
.attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'start'
});
//绘制右下的椭圆
raphael_4.ellipse(330,240,60,30);
raphael_4.ellipse(270,270,60,30);
raphael_4.path('M270,240 A60,30 0 1,1 330,270').attr('stroke','red');
raphael_4.text(240,230,'start(270,240)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(360,280,'end(330,270)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(270,320,'large-arc-flag=1\nsweep-flag=1')
.attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'start'
});
});
</script>
</head>
<body>
<div id="raphael_4" class="wraper"></div>
</body>
</html>
代码实现的效果:
- 大小: 16.9 KB
分享到:
相关推荐
raphael-min.js
刚刚开始学习这个,以后会有资料陆续传上来
资源 https://github.com/Empact/Raphael-Radar
raphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.js
Raphael矢量库的扩展。 它使Raphael能够导入原始SVG数据。前叉音符这是的分支。 当原始raphael-svg-import达到0.0.3时,引入了一个重大的向后不兼容更改。 它没有解析SVG文档,而是使用正则表达式。 由于以下几个...
0001-Raphael-Shopping-Cart-Vanilla-Challenge:Carrinho de Compras em Vanilla Javascript
Raphael-Scala-js Raphael.js的Scala.js绑定 要将Raphael-Scala-js添加到您的Scala.js项目中,请将其包含在build.sbt中 resolvers + = " Sonatype snapshots " at " ...
raphae图形绘制JS
用raphael js 制作图表,里面包含饼图、柱状图、曲线图的实例
web 绘图 工具,raphael.可以在网页上绘图,功能非常强大!
react-raphael-webpack-es6 与React,Raphael.js,Webpak和ES6一起整理了项目设置。 目的是将Raphael.js与React结合使用,看看它是好还是完全怪异。
raphael中文帮助文档(API)chm文档,因为在网上没有找到好的离线版的,都是在线的,所以自己根据在线的生成了一个chm帮助文档,下载了,绝对不会让你失望。
利用raphael.js进行流程图的绘制,js已封装好,可直接传入数据进行使用
Raphael.JSON Raphael.Export Raphael.FreeTransform raphael.serialize
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you ...
前端项目-raphael,JavaScript Vector Library
#raphael-socket.io-express-mongoose 展示 [Node.js]( ), [Raphael.js]( ), [Socket .io]( ), [Express.js]( ), [Mongoose.js]( ) 和 [MongoDB]( ) 集成 需要 MongoDB 要正确运行 Web 应用程序,您需要在系统中...
raphael
Raphaël:跨浏览器矢量... 您可以使用: raphael.min.js (包括eve和它的最小化) raphael.js (包含eve且未缩小) raphael.no-deps.js (不包括eve它没有缩小) raphael.no-deps.min.js (不包括eve )从哪儿开始检查
Raphael.js PDF文档,说明Raphael.js的优点与D3的区别,以及由浅入深的范例