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-min.js
刚刚开始学习这个,以后会有资料陆续传上来
资源 https://github.com/Empact/Raphael-Radar
raphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.js
当原始raphael-svg-import达到0.0.3时,引入了一个重大的向后不兼容更改。 它没有解析SVG文档,而是使用正则表达式。 由于以下几个原因,这是不可取的: 使用正则表达式解析XML。 重建浏览器可以本地执行的操作。 ...
raphae图形绘制JS
Raphael-Scala-js Raphael.js的Scala.js绑定 要将Raphael-Scala-js添加到您的Scala.js项目中,请将其包含在build.sbt中 resolvers + = " Sonatype snapshots " at " ...
版权(C)2020 YAAP小米Mi 9T Pro / Redmi K20 Pro的设备配置小米Mi 9T Pro / Redmi K20 Pro(代号为“ raphael” )是小米的高端智能手机。 它于2019年8月宣布并发布。设备规格基本的规格表片上系统高通SDM855金鱼...
0001-Raphael-Shopping-Cart-Vanilla-Challenge:Carrinho de Compras em Vanilla Javascript
raphael中文帮助文档(API)chm文档,因为在网上没有找到好的离线版的,都是在线的,所以自己根据在线的生成了一个chm帮助文档,下载了,绝对不会让你失望。
Raphael.JSON Raphael.Export Raphael.FreeTransform raphael.serialize
利用raphael.js进行流程图的绘制,js已封装好,可直接传入数据进行使用
前端项目-raphael,JavaScript Vector Library
react-raphael-webpack-es6 与React,Raphael.js,Webpak和ES6一起整理了项目设置。 目的是将Raphael.js与React结合使用,看看它是好还是完全怪异。
raphael
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.js PDF文档,说明Raphael.js的优点与D3的区别,以及由浅入深的范例
[奥莱理] RaphaelJS 编程 (英文版) [奥莱理] RaphaelJS Graphics and Visualization on the Web (E-Book) ☆ 图书概要:☆ Create beautiful, interactive images on the Web with RaphaelJS, the JavaScript ...
raphaeljs_starter.pdf
Raphaël:跨浏览器矢量... 您可以使用: raphael.min.js (包括eve和它的最小化) raphael.js (包含eve且未缩小) raphael.no-deps.js (不包括eve它没有缩小) raphael.no-deps.min.js (不包括eve )从哪儿开始检查