`

js画图工具:Raphael绘制矢量图学习笔记(1)--简介

 
阅读更多
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"  
}]);  
分享到:
评论

相关推荐

    raphael.js绘制流程图

    Raphaël.js是一款强大的JavaScript库,专门用于在Web浏览器中创建矢量图形。这个库使得开发者能够在HTML5 canvas或SVG(Scalable Vector Graphics)上绘制复杂的图形,包括流程图。流程图是一种用于表示算法、工作...

    SVG画图插件raphaelJS

    RaphaelJS是一款强大的JavaScript库,专门用于在SVG(Scalable Vector Graphics)和VML(Vector Markup Language)格式下创建矢量图形。这个插件允许开发者在网页上绘制出复杂、交互式的图形,而且这些图形在任何...

    raphael绘制流程图

    在"raphael绘制流程图"这个主题中,我们将探讨如何利用Raphaël库来制作动态的、具有分支的流程图。 首先,流程图是一种图形表示方法,常用于描绘工作流程或系统操作过程。它们由各种形状(如矩形、菱形、椭圆等)...

    raphaeljs_starter

    《raphaeljs_starter》是一本专注于RaphaelJS这一强大跨浏览器兼容的矢量图形库的教程书籍,由A. Krishnasagar编写,旨在帮助读者掌握如何轻松地创建交互式的2D图形和动画。本书由Packt Publishing出版,首次出版于...

    raphael绘制柱状图

    Raphaël是一款强大的JavaScript库,专用于在Web浏览器中创建矢量图形。它使用SVG(Scalable Vector Graphics)和VML(Vector Markup Language)标准,使得开发者可以在任何分辨率的设备上绘制高质量、可缩放的图形...

    raphael-min.js

    raphael-min.js

    raphael.js 绘制柱状图

    `Raphael.js`是一个JavaScript库,专门用于创建SVG(可缩放矢量图形)和VML(矢量标记语言),使得在网页上绘制复杂的图形变得轻而易举。今天我们将深入探讨如何使用`Raphael.js`来绘制柱状图。 `Raphael.js`库的...

    Raphael学习笔记

    根据提供的文件信息,可以看出这是一份关于Raphael JavaScript库的学习笔记。Raphael 是一个非常强大的JavaScript库,用于在Web浏览器中绘制矢量图形。它基于SVG(可缩放矢量图形)标准,并提供了丰富的API来简化...

    web流程图动态绘制-使用raphael

    Raphael.js是一个强大的JavaScript库,专用于在浏览器中创建SVG(可缩放矢量图形)和VML(Vector Markup Language)图形,使得在网页上绘制流程图变得简单易行。本篇文章将深入探讨如何利用Raphael库来实现动态流程...

    前端项目-raphael.zip

    【前端项目-raphael.zip】是一个包含 Raphael JavaScript 库的前端开发资源包。Raphael 是一个流行的开源库,专门用于在网页上创建矢量图形。它使得开发者能够在现代浏览器上利用 SVG (Scalable Vector Graphics) 和...

    js矢量画图,raphael.js使用案例,svg画图,web画图,b/s画图,网页画图

    基于raphael.js 实现矢量图形的绘制,兼容IE,fireFox,chrome等主流浏览器。 功能包括:画矩形,画圆,画三角形,画直线,画虚线,画大括号,画文字。 要绘制不规则曲线可以在这个基础上自己修改一下。 解压后直接...

    Learning Raphael JS Vector Graphics 配套源码

    "Learning Raphael JS Vector Graphics"这个配套源码是学习Raphael库的理想资源,对于希望掌握JavaScript矢量图形绘制技术的开发者来说,它是一份非常宝贵的学习材料。 Raphael的核心特性包括: 1. **跨浏览器兼容...

    Raphael-Radar-master

    Raphael.js是一款强大的JavaScript图形库,能够兼容各种浏览器,包括IE6+,它使用SVG和VML技术来绘制矢量图形,使得在网页上绘制复杂的图形变得简单。 Raphael.js库的核心特性在于它的矢量图形支持,这使得图形无论...

    raphaelJS制作图表、饼图、柱状图、曲线图

    Raphaël.js 是一个强大的JavaScript库,专用于在Web浏览器中创建矢量图形。它基于SVG(可缩放矢量图形)和VML(矢量标记语言),这两种技术允许在网页上绘制清晰且分辨率独立的图形。Raphaël.js 的主要优势在于它...

    Raphael 参考文档《Learning Raphael JS Vector Graphics》

    **Raphael JS矢量图形库** Raphael是一个强大的JavaScript库,专为在Web浏览器中创建矢量图形而设计。它支持SVG(Scalable Vector Graphics)和VML(Vector Markup Language),确保在各种浏览器中都能得到良好的...

    Raphael.js 2.21版源码 以及快速上手手册

    **Raphael.js 2.21 版本详解与快速上手**...总的来说,Raphael.js 2.21版提供了一个强大且易用的矢量图形绘制工具,适用于各种Web项目。通过深入学习和实践,开发者可以充分利用其功能,创造出富有创意的矢量图形界面。

    raphael:JavaScript矢量库

    Raphaël:跨浏览器矢量... 您可以使用: raphael.min.js (包括eve和它的最小化) raphael.js (包含eve且未缩小) raphael.no-deps.js (不包括eve它没有缩小) raphael.no-deps.min.js (不包括eve )从哪儿开始检查

    raphael画流程图

    Raphaël.js 是一个基于SVG(Scalable Vector Graphics)和VML(Vector Markup Language)的JavaScript库,用于在Web浏览器中创建矢量图形。它使得开发者能够方便地在网页上绘制复杂的图形,包括流程图。流程图是一...

    javascript raphael 画饼图

    JavaScript Raphael 是一个强大的矢量图形库,它允许开发者在网页上创建复杂的图形,包括饼图。Raphael 使用SVG(Scalable Vector Graphics)和VML(Vector Markup Language)技术,这两种技术都支持在浏览器中绘制...

Global site tag (gtag.js) - Google Analytics