Raphaël 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Raphaël 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Raphaël 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Raphaël 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Raphaël 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

Raphaël.js 是一个小型的 JavaScript 库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。

Raphaël.js 使用SVG W3C推荐标准和VML作为创建图形的基础。这意味着你创建的每一个图形对象也是一个DOM对象,所以你可以附加JavaScript事件处理程序或以后 对其进行修改。Raphaël.js目标是提供一个适配器,绘制矢量图兼容大部分浏览器。目前支持的浏览器 Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+。

示例代码:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

在线效果演示:http://raphaeljs.com/pie.html

展开阅读全文

代码

评论 (4)

加载中
打分: 力荐
Raphaël.js目标是提供一个适配器,绘制矢量图
2018/05/29 17:04
回复
举报
打分: 力荐
拉斐尔
2017/05/05 10:31
回复
举报
这个好似很强大啊 Raphaël
2013/07/13 11:34
回复
举报
高大上 Raphaël
2014/12/08 15:00
回复
举报
更多评论
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2019/03/23 00:32

raphael参数说明

大纲 https://github.com/DmitryBaranovskiy/raphael http://dmitrybaranovskiy.github.io/raphael/ 形状 名称 参数 说明 rect x, y, width, height, [r] 矩形 circle cx, cy, r 圆 ellipse cx, cy, rx, ry 椭圆 image src, x, y, width, height 图片 path pathString 路径 text x, y, text 文字 事件 名称 说明 click/unclick 点击 dblclick/undblclick 双击 hover/hover 移入、移出 mousedown/unmousedown 鼠标按下 mousemov...

0
0
发表了博客
2013/01/16 11:00

Raphael学习笔记(1)--简介

Raphael是一个JavaScript类库,用来在web上绘制矢量图。 Raphael通过判断浏览器的不同,创建svg或vml对象,从而达到跨浏览器的效果。【svg简介,svg入门教程,vml简介,vml入门教程】 这意味着,无论是svg还是vml对象,都是一种DOM对象,所以我们可以为它们绑定事件或者修改它们。 Raphael支持用户自定义的扩展,我们可以在此之上扩展自己的组件。例如:gRaphael就是基于raphael创建的图形类库。 Raphael支持的浏览器:Firefox...

0
1
发表于大前端专区
2013/12/18 16:18

使用Raphael实现html中绘图

首先:下载Raphael的javascript库:http://raphaeljs.com/。或者在html页面<head></head>:如下 <script src="http://www.zfanw.com/blog/raphael.js"></script> 步骤:创建画布==>创建图形 创建画布: 创建画布的方法有两种,一种直接用坐标创建画布位置,另一种在html元素中创建画布 使用坐标创建: var paper = Raphael(10, 50, 320, 200);//在浏览器窗口中,坐标 (10,50) 位置创建一个 canvas 对象,长320px,宽...

0
0
发表了博客
2013/01/16 11:06

Raphael学习笔记(2)--绘图(基本图形)

1、图形简介 与html5不同,Raphael提供了以下基本图形:矩形、圆形、椭圆形(html5只有矩形)。 Paper.rect(x,y,width,height,r):绘制矩形; 参数含义: x,y:矩形左上角相对于原点(0,0)的坐标; width,height:矩形的宽度和高度; r:矩形圆角的半径; Paper.circle(x,y,r):绘制圆形; 参数含义: x,y: 圆心相对于原点(0,0) 的坐标; r:圆的半径; Paper.ellipse(x,y,cx,cy):绘制椭圆形; 参数含义: x,y: 椭圆的圆心相对...

0
1
发表了博客
2013/01/16 14:44

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

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表示...

0
2
发表了博客
2013/01/16 14:29

Raphael学习笔记(4)--绘图(路径【贝塞尔曲线】)

贝塞尔曲线的基础知识 其它的什么都不说了,直接上代码: <!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 ...

0
1
发表于大前端专区
2014/04/16 11:45

对raphael js初步认识

//页面中首先引入 <script src="${ctx }/scripts/raphael.js" type="text/javascript"></script> 1://点与点之间创建关系 (graffle.js的主要代码内容) Raphael.fn.connection = function (obj1, obj2, line, bg) { if (obj1.line && obj1.from && obj1.to) { line = obj1; obj1 = line.from; obj2 = line.to; } var bb1 = obj1.getBBox(), bb2 = obj2.getBBox(), p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1}, {x: bb1.x + ...

0
2
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2013/03/20 14:44

如何清空Raphael 画布上所有控件

如题,怎样清空呢。 我有一段代码是类似这样的, 每次从后台获取数据,然后在前台绘制N个圆点。 var paper = Raphael("canvas", 640, 800); paper.circle(320, 300, 300).attr({fill:"#0095C1"}); paper.circle(320, 300, 200).attr({fill:"#576A8C"}); paper.circle(320, 300, 100).attr({fill:"#FFAC2F"}); ...... 目前我是每次都会执行上面这段代码,每次都在创建新的画布。 定时刷新了一段时间后就会发现页面很卡,CPU50%....

1
0
发表了问答
2016/05/13 15:38

Raphael可以做甘特图吗

Raphael可以做甘特图吗 如果数量大的话 有性能限制吗 如果不用Raphael还有其他的框架做甘特图的吗 有经验的给俺讲讲 先谢谢了

2
0
发表了问答
2016/02/22 21:21

raphael 的官网服务器登不进去

raphael的官网服务器 不知道怎么了 登不进去。。。有没有大牛下载了raphael官网的例子和api的发小弟一份 小弟感激不尽 小弟邮箱1178745464@qq.com 小弟急用 大哥们再上 有的话发小弟一份 拜托拜托

3
0
发表了问答
2013/01/06 09:48

raphael绘图问题

请问,我现在用raphael库画图,我创建一个画布,但是我想画N个图只要用一个画布,而不要每画一次都创建一个画布,请问这个怎么解决?

2
0
发表了问答
2013/02/17 18:27

求教raphael大神,如何绘制一个三层的圆环

如题,看到文档里都只提到绘制圆,这个圆只能有一个颜色。 我想要换一个圆,从圆心到最外面,依次有三个颜色,看着就像是最里面一个圆,外面套了两个不同颜色的圆环。怎样画呢。有会的大神麻烦回复下。

1
1
发表了问答
2010/06/16 07:53

Raphaël 为我们提供的一些开源图标

如下图所示,这些图片并不是以图片文件方式存在,而是文本数据,什么意思呢? 详情请看这里。 这些图都符合 MIT 开源授权协议哦。

1
5
发表了问答
2013/01/06 09:42

有没懂raphael的大神,求教

公司的要求现在遇到问题了,是raphael的东西,求大神帮忙啊

1
1
发表了问答
2011/12/05 17:05

Raphaël协议是MIT

RT,修改下资料吧

1
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
4 评论
142 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部