使用Raphael 画图(一) 基本图形 (javascript)

Raphael是什么?

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。

Raphaël 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。

Raphael的使用方法:

在页面中引入 raphael.js 文件,然后就可以绘制任意的矢量图形了:

开始要创建视图区域:

var paper = Raphael("myDiv", 580, 600);//创建视图区域  
<div id="myDiv"></div>

接下来就可以画图形了。

1,画圆:

var c = paper.circle(50, 89, 40);//画圆(x,y,r),r代表圆的半径  

2,画矩形:

var r = paper.rect(100, 19, 80, 50,10);//画矩形(x,y,width,height,r),r代表矩形圆角,默认为0

3,画椭圆:

var e = paper.ellipse(50, 159, 40, 20);//画椭圆(x,y,rx,ry); 

4,图片

var i = paper.image("heffalump.png", 200, 19, 80, 80);//图片(src,x,y,width,height); 

5,text:

var t = paper.text(150, 250, "where\n amazing\n happens!");//text  

6,路径:

var p = paper.path("M10 10L 110 100");//路径 

7,set:几个图形合并在一起,方便统一管理,我是这样理解的。

var st = paper.set();//set
     st.push(
         paper.circle(330, 30, 15),
         paper.circle(310, 30, 15)
);  

Raphael下载

http://files.cnblogs.com/kt520/DmitryBaranovskiy-raphael-v2.0.1-2-g2b0c5a2.zip

时间: 2024-10-12 00:48:37

使用Raphael 画图(一) 基本图形 (javascript)的相关文章

使用Raphael 画图(四) 路径(一) (javascript)

这章介绍路径,本人觉得这是比较难和精髓的一部分. 先介绍基本知识: 可以参考: http://www.chinasvg.com/support/svg-tutorial/svg-path-directive-guide.html /* 命令解释: M = moveto 参数:(x y) L = lineto 参数:(x y) H = horizontal lineto 参数:(x) V = vertical lineto 参数:(y) C = curveto 参数:(x1 y1 x2 y2 x

使用Raphael 画图(二) 扩展的图形 (javascript)

看这文章前,建议先看第一编文章<使用Raphael 画图(一) 基本图形 (javascript)>. 在Raphael基础上扩展的图形: 要运行该例子要引入附件的2个js包.(g.raphael.rar) <script type="text/javascript" src="raphael.js" charset="utf-8"></script> <script type="text/ja

Rational Rose 画图时“接口”图形的几个切换方式与效果

选择Label的效果比较常用些,推荐这个方式!!! 本文转载自:http://blog.csdn.net/elifefly/article/details/3023880 Rational Rose 画图时"接口"图形的几个切换方式与效果,码迷,mamicode.com

使用Raphael 画图(三) 事件 (javascript)

这章展示事件例子. 下图是官方API的事件: 例子: var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}); var a2 = paper.circle(24.833, 26.917, 26.667).attr({stroke: "black", fill: "#fff", "fill

raphael入门到精通---入门篇之总览

什么是Raphael raphael.js是一小巧的javascript库,它可以在web上画矢量图简化你的工作,如果你想创建你指定的图表,图形区域或者可移动的组件,那么就使用raphael吧 话不多说,开始我们的学习吧!!!!!!! 一个小栗子 1 <html> 2 <head></head> 3 <script type="text/javascript" src="raphael-min.js"></scr

【ActionScript】Flash与网页的交互,ActionScript与JavaScript的交互

Flash是可以轻松与网页交互数据的,不然为何Flash会有这么大的生命力呢?仅仅是这样编程比較麻烦而已,又要调试Flash,然后又要放到server上调试. 只是这种方式可以收到非常好的效果.Flash强大的画图功能.图形功能,可以与网页的參数传递联系起来,配合后端的server语言,可以收到非常大效果. 以下举个样例用ActionScript3.0来说明这个问题,例如以下图: IE6效果: 火狐效果: 一旦浏览器装上Flash插件,Flash就行轻松与网页互通消息. 不管在不论什么浏览器,如

raphael.js的使用

1.raphael.js svg画图的开源库,支持IE8+ 官方api: http://dmitrybaranovskiy.github.io/raphael/reference.html Github地址: https://github.com/DmitryBaranovskiy/raphael/ 2.js引用 //raphael.js主库 <script src="./raphael.js" type="text/javascript"></s

JavaScript和Java之间的关系

今天来简单而又详细地说说JavaScript和Java的关系. 开门见山总结性一句话,它们之间的关系 = 雷锋和雷峰塔之间的关系,换句话说:它们之间没什么关系. 但往往有不少初学者甚至中级者认为它们之间有密切的关系,这很让人无语. 个人认为如果不分辨清楚,Java学得越好的初学者,对于JavaScript就会学得越糟.因为在一张白纸上好画图,在一张花纸上就很难再画图了. 比较 JavaScript Java 诞生时间 1995年 1995年 曾用名 Mocha, LiveScript Oak 母

iOS开发——图形编程OC篇&amp;(二)CALayer自定义图层

一.第一种方式 1.简单说明 以前想要在view中画东西,需要自定义view,创建一个类与之关联,让这个类继承自UIView,然后重写它的DrawRect:方法,然后在该方法中画图. 绘制图形的步骤: (1)获取上下文 (2)绘制图形 (3)渲染图形 如果在layer上画东西,与上面的过程类似. 代码示例: 新建一个类,让该类继承自CALayer YYMylayer.m文件 1 // 2 // YYMylayer.m 3 // 05-自定义layer(1) 4 // 5 // Created b