http://lblovesnow-163-com.iteye.com/blog/1478090
更多资料可以参考楼主的文章
Raphael是一个JavaScript类库,用来在web上绘制矢量图。Raphael通过判断浏览器的不同,创建svg或vml对象,从而达到跨浏览器的效果。【svg简介,svg入门教程,vml简介,vml入门教程】
这意味着,无论是svg还是vml对象,都是一种DOM对象,所以我们可以为它们绑定事件或者修改它们。
Raphael支持用户自定义的扩展,我们可以在此之上扩展自己的组件。例如:gRaphael就是基于raphael创建的图形类库。
Raphael支持的浏览器:Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+
使用Raphael很简单:创建画布,绘制图形,设置样式。代码如下:
// 创建一个320 × 200,左上角距离窗口(x=10,y= 50)的画布
var paper = new Raphael(10, 50, 320, 200);
//创建一个圆,圆心的坐标为(x = 50, y = 40), 半径为10。
var circle = paper.circle(50, 40, 10);
// 给圆填充颜色为: red (#f00)
circle.attr("fill", "#f00");
// 给圆设置边框为: white(#fff)
circle.attr("stroke", "#fff");
这只是一个非常简单的例子,展示了raphael的使用。如果以前接触过svg、vml或者canvas,那么raphael上手很容易。raphael支持链式写法(类似于JQuery),但是,需要注意一点,new出来的Raphael返回的是Paper对象,通过Paper创建的图形返回的是Element对象,这就要求我们要熟悉哪些对象包含哪些方法,否则在链式书写的过程中会出现错误。
Raphael的创建有很多种,除了上面的那种之外,还有以下2种:
//第一种:
//element:DOM对象或者DOM元素的id
//width:宽度
//height:高度
//callback:上下文创建Paper时,执行的函数
var raphael = new Raphael('raphael',400,400);
var raphael = new Raphael(document.getElementById('raphael'),400,400);
//第二种
//array:[element,width,height,{property:value,<attribute>}]
// 或者[x,y,width,height,{property:value,<attribute>}]
//callback:上下文创建Paper时,执行的函数
var raphael = Raphael(["raphael", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);
分享到:
相关推荐
Raphaël.js是一款强大的JavaScript库,专门用于在Web浏览器中创建矢量图形。这个库使得开发者能够在HTML5 canvas或SVG(Scalable Vector Graphics)上绘制复杂的图形,包括流程图。流程图是一种用于表示算法、工作...
RaphaelJS是一款强大的JavaScript库,专门用于在SVG(Scalable Vector Graphics)和VML(Vector Markup Language)格式下创建矢量图形。这个插件允许开发者在网页上绘制出复杂、交互式的图形,而且这些图形在任何...
在"raphael绘制流程图"这个主题中,我们将探讨如何利用Raphaël库来制作动态的、具有分支的流程图。 首先,流程图是一种图形表示方法,常用于描绘工作流程或系统操作过程。它们由各种形状(如矩形、菱形、椭圆等)...
《raphaeljs_starter》是一本专注于RaphaelJS这一强大跨浏览器兼容的矢量图形库的教程书籍,由A. Krishnasagar编写,旨在帮助读者掌握如何轻松地创建交互式的2D图形和动画。本书由Packt Publishing出版,首次出版于...
Raphaël是一款强大的JavaScript库,专用于在Web浏览器中创建矢量图形。它使用SVG(Scalable Vector Graphics)和VML(Vector Markup Language)标准,使得开发者可以在任何分辨率的设备上绘制高质量、可缩放的图形...
raphael-min.js
`Raphael.js`是一个JavaScript库,专门用于创建SVG(可缩放矢量图形)和VML(矢量标记语言),使得在网页上绘制复杂的图形变得轻而易举。今天我们将深入探讨如何使用`Raphael.js`来绘制柱状图。 `Raphael.js`库的...
根据提供的文件信息,可以看出这是一份关于Raphael JavaScript库的学习笔记。Raphael 是一个非常强大的JavaScript库,用于在Web浏览器中绘制矢量图形。它基于SVG(可缩放矢量图形)标准,并提供了丰富的API来简化...
Raphael.js是一个强大的JavaScript库,专用于在浏览器中创建SVG(可缩放矢量图形)和VML(Vector Markup Language)图形,使得在网页上绘制流程图变得简单易行。本篇文章将深入探讨如何利用Raphael库来实现动态流程...
【前端项目-raphael.zip】是一个包含 Raphael JavaScript 库的前端开发资源包。Raphael 是一个流行的开源库,专门用于在网页上创建矢量图形。它使得开发者能够在现代浏览器上利用 SVG (Scalable Vector Graphics) 和...
基于raphael.js 实现矢量图形的绘制,兼容IE,fireFox,chrome等主流浏览器。 功能包括:画矩形,画圆,画三角形,画直线,画虚线,画大括号,画文字。 要绘制不规则曲线可以在这个基础上自己修改一下。 解压后直接...
"Learning Raphael JS Vector Graphics"这个配套源码是学习Raphael库的理想资源,对于希望掌握JavaScript矢量图形绘制技术的开发者来说,它是一份非常宝贵的学习材料。 Raphael的核心特性包括: 1. **跨浏览器兼容...
Raphael.js是一款强大的JavaScript图形库,能够兼容各种浏览器,包括IE6+,它使用SVG和VML技术来绘制矢量图形,使得在网页上绘制复杂的图形变得简单。 Raphael.js库的核心特性在于它的矢量图形支持,这使得图形无论...
Raphaël.js 是一个强大的JavaScript库,专用于在Web浏览器中创建矢量图形。它基于SVG(可缩放矢量图形)和VML(矢量标记语言),这两种技术允许在网页上绘制清晰且分辨率独立的图形。Raphaël.js 的主要优势在于它...
**Raphael JS矢量图形库** Raphael是一个强大的JavaScript库,专为在Web浏览器中创建矢量图形而设计。它支持SVG(Scalable Vector Graphics)和VML(Vector Markup Language),确保在各种浏览器中都能得到良好的...
**Raphael.js 2.21 版本详解与快速上手**...总的来说,Raphael.js 2.21版提供了一个强大且易用的矢量图形绘制工具,适用于各种Web项目。通过深入学习和实践,开发者可以充分利用其功能,创造出富有创意的矢量图形界面。
Raphaël:跨浏览器矢量... 您可以使用: raphael.min.js (包括eve和它的最小化) raphael.js (包含eve且未缩小) raphael.no-deps.js (不包括eve它没有缩小) raphael.no-deps.min.js (不包括eve )从哪儿开始检查
Raphaël.js 是一个基于SVG(Scalable Vector Graphics)和VML(Vector Markup Language)的JavaScript库,用于在Web浏览器中创建矢量图形。它使得开发者能够方便地在网页上绘制复杂的图形,包括流程图。流程图是一...
JavaScript Raphael 是一个强大的矢量图形库,它允许开发者在网页上创建复杂的图形,包括饼图。Raphael 使用SVG(Scalable Vector Graphics)和VML(Vector Markup Language)技术,这两种技术都支持在浏览器中绘制...