文档章节

Raphael学习笔记(5)--绘图(路径【椭圆曲线】)

i33
 i33
发布于 2013/01/16 14:44
字数 577
阅读 642
收藏 2

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>

代码实现的效果:


本文转载自:http://lblovesnow-163-com.iteye.com/blog/1485388

i33

i33

粉丝 46
博文 241
码字总数 7442
作品 0
东城
私信 提问
使用javascript实现跨浏览器绘图相关..

HTML里DOM的canvas对象可以画出各式各样的2D 3D图象,甚至游戏.但IE不支持这个对象,微软不想让javascript太强大. 可以通过SVG/VML+JS模拟canvas来实现跨浏览器的矢量图形实现方案. 这其实和网...

喔喔兒
2011/04/10
343
0
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
2.1K
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
483
0
矢量图SVG

前端绘图用的最多的就是svg和canvas,现在有许多基于这两种技术的图形框架,比如基于svg的D3 和基于canvas的echarts 。今天要讲的是基于svg的Raphael Javascript ,它是一个 Javascript的矢量...

雨未浓
2017/11/10
0
0
《WebGL编程指南》学习笔记——3.在Canvas中使用WebGL

《WebGL编程指南》学习笔记——2.在Canvas中使用WebGL 上一节学习了使用< canvas >元素绘制二维图形,这一节里面我们在< canvas >中使用WebGL 下小节我们正式开始学习如何在< canvas >中使用...

hushhw
2017/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

带你了解 Java内存模型

Java内存模型的规定: 1、所有变量存储在主内存中; 2、每个线程都有自己的工作内存,且对变量的操作都是在工作内存中进行; 3、不同线程之间无法直接访问彼此工作内存中的变量,要想访问只能...

linux-tao
21分钟前
4
0
.net c# datetime转string 时间转字符串

.net c# datetime转string 时间转字符串 .net c# datetime转string 时间转字符串 刚开始接触net 时间转换字符串 一搜索出来的全是 字符串转时间,要么就是系统当前时间转字符串 就没有一个指...

青峰Jun19er
23分钟前
4
0
hbase demo

HbaseDao public class HbaseDao {@Testpublic void insertTest() throws Exception {Configuration conf = HBaseConfiguration.create();conf.set("hbase.zookeeper.qu......

Garphy
32分钟前
3
0
IT兄弟连 HTML5教程 HTML5表单 多样的输入类型2

4 range range类型用于包含一定范围内数字值的输入域,跟number一样,我们还可以对数值设置限定,range类型显示为滑动条用法如下: 上述代码使用了range类型输入框,为该类型设置了数值范围为...

老码农的一亩三分地
33分钟前
3
0
对比不同的数据库连接的异同

博主在学习和使用数据库连接时,遇到的问题, 这个几个数据库连接究竟有什么不同? 到底什么时候该使用哪个会更好一点? 带着这个问题我们先去了解常见的数据库连接 1. 常见的数据库连接有哪些?...

理性思考
35分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部