文档章节

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

i33
 i33
发布于 2013/01/16 11:00
字数 515
阅读 202
收藏 1

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"
}]);

本文转载自:http://lblovesnow-163-com.iteye.com/blog/1478090

i33

i33

粉丝 46
博文 241
码字总数 7442
作品 0
东城
私信 提问
Raphael学习笔记(5)--绘图(路径【椭圆曲线】)

1、椭圆曲线简介 前面的学习笔记:Raphael学习笔记(3)--绘图(路径【直线】)简单的描述了绘制椭圆曲线的参数,但没有详细的介绍各个参数的含义,这次,我们就详细的学习一下椭圆曲线的绘制...

i33
2013/01/16
639
0
强大的矢量图形库:Raphael JS 中文帮助文档及教程

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

李朝强
2013/10/24
880
1
使用javascript实现跨浏览器绘图相关..

HTML里DOM的canvas对象可以画出各式各样的2D 3D图象,甚至游戏.但IE不支持这个对象,微软不想让javascript太强大. 可以通过SVG/VML+JS模拟canvas来实现跨浏览器的矢量图形实现方案. 这其实和网...

喔喔兒
2011/04/10
341
0
Q-Learning—可操控动作大小的小车爬山游戏

image from unsplash.com by Pietro De Grandi 上篇文章我们用强化学习的方法玩了小车爬山,平衡车的游戏。两个游戏有一个共同点,即动作空间(Action Space) 是非连续的。也就是说只能控制动...

Hongtao洪滔
07/19
0
0
李宏毅机器学习完整笔记发布,AI界「最热视频博主」中文课程笔记全开源

提起李宏毅老师,熟悉机器学习的读者朋友一定不会陌生。很多人选择的机器学习入门学习材料都是李宏毅老师的台大公开课视频。现在,机器学习爱好者有更完善的学习资料了。来自 Datawhale 的朋...

在笔记中重新整理PPT内容,并增加了一些注释。
08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

无回路有向图的拓扑排序

因公司业务需要,在表单中每个字段都会配置自动计算,但自动计算公式中会引用到其他字段中的值。所以希望可以根据计算公式,优先计算引用的公式。所以最终使用了无回路有向图的扩扑排序来实现...

兜兜毛毛
今天
6
0
如何抢占云栖大会C位?史上最强强强攻略来了

点击观看视频: APSARA云栖大会开发者情怀 原文链接 本文为云栖社区原创内容,未经允许不得转载。

阿里云官方博客
今天
6
0
Kubernetes 从懵圈到熟练:集群服务的三个要点和一种实现

作者 | 声东 阿里云售后技术专家 文章来源:Docker,点击查看原文。 以我的经验来讲,理解 Kubernetes 集群服务的概念,是比较不容易的一件事情。尤其是当我们基于似是而非的理解,去排查服务...

阿里巴巴云原生
今天
11
0
PHP7.3的新特性

2018年12月6日,PHP7.3正式版发布,在PHP7.2基础上进行了大量错误修复和安全优化,性能提升10%! 从目前的更新说明来看,PHP 7.3 并不是一个主打新特性的版本,包含更多的是 bug 修复。PHP 7...

迅睿CMS-PHP开源CMS程序
今天
8
0
Tomcat 应用中并行流带来的类加载问题

本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/f-X3n9cvDyU5f5NYH6mhxQ 作者:肖铭轩、王道环 随着 Java8 的不断流行,越来越多的开发人员使用并行流(parallel)...

vivo互联网技术
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部