raphael入门到精通---属性和事件篇
属性的使用
上一篇文章我们介绍了raphael如何生成基本的图形(元素),对于每个元素来讲,我们可以添加很多的元素(attr)
下面我就来简单的介绍下元素属性的使用(path元素属性我后面单独列出来介绍)
添加属性的方法是attr(),它有四种传值方式
- attrName,value 不解释
- params(一个json对象)
- attrName 传入一个属性名字它将返回对应的值,很想jquery把
- attrNames(数组) 返回对应的数组中属性对应的值
够简单吧,现在来看下有多少属性(这些属性可以参考SVG方面),实际上很多属性使用是和CSS一样的
fill:属性的填充 比如可以用颜色,图片,渐变表示也可以的
stroke : 画笔的颜色
stroke-dasharray : 定义画笔的虚线
stroke-linecap : 线条末端控制图形
stroke-linejoin : 画笔转折处连接点的画风
arrow-end : path结尾的箭头形状
path: M = moveto(M X,Y) :将画笔移动到指定的坐标位置
L = lineto(L X,Y) :画直线到指定的坐标位置
H = horizontal lineto(H X):画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
Z = closepath():关闭路径
重点介绍下A
RX,RY指所在椭圆的x和y轴
XROTATION指椭圆绕中心点顺时针旋转XROTATION的角度。
FLAG1只有两个值,1表示大角度弧线,0为小角度弧线。
FLAG2只有两个值,确定从起点至终点的方向,1为顺时针,0为逆时针
X,Y为终点坐标
事件的使用
对每个元素来讲,都有对应的事件如下
click ,dbclick ,drag ,hover,mouseover,mousedown ,mouseup,mousemove,mouseout等事件
总结
对于raphael来说基本的元素属性都介绍完了。从下一张开始,我们就开始学习API以及一些高级用法,当然了,自然包含raphael官网的demo实例剖析
raphael入门到精通---属性和事件篇的更多相关文章
- raphael入门到精通---入门篇之总览
什么是Raphael raphael.js是一小巧的javascript库,它可以在web上画矢量图简化你的工作,如果你想创建你指定的图表,图形区域或者可移动的组件,那么就使用raphael吧 话不多 ...
- 【Cocos2d入门教程六】Cocos2d-x事件篇之触摸
Cocos游戏当中产生一个事件时,可以有多个对象在监听该事件,所以有优先级(Priority).优先级越高(Priority值越小),事件响应越靠前. 关系图: 新 事件分发机制:在2.x 版本事件处 ...
- Android Studio2.0 教程从入门到精通Windows版 - 提高篇
第二篇我们开发了一个Hello World应用,并介绍Android Sutdio的界面和如何调试应用,接下来将介绍一些常用的快捷键和必备插件. 常用快捷键 代码跳转 描述:跳转是为了方便代码位置的定 ...
- RabbitMQ 3.7.X集群:从入门到精通,这一篇就够了
RabbitMQ是流行的开源消息队列系统,本身已经具备了较强的并发处理速度及运行稳定性,然而在大规模的实际应用中,往往还需要使用集群配置来保证系统中消息通信部分的高可用性,并发处理性能及异常恢复能力. ...
- Jmeter(十二) - 从入门到精通 - JMeter逻辑控制器 - 终篇(详解教程)
1.简介 Jmeter官网对逻辑控制器的解释是:“Logic Controllers determine the order in which Samplers are processed.”. 意思 ...
- Redis从入门到精通之一:序篇
Redis一直是我想好好研究的组件,但是之前受限于工作场景,没有真正意义的使用过.但是目前工作中,Redis作为主要的缓存组件来缓冲服务器的压力.所以,本序列主要结合实际工作中遇到的各种Redis的设 ...
- Android Studio2.0 教程从入门到精通Windows版 - 安装篇
详见:http://www.open-open.com/lib/view/open1468118887690.html
- Swift从入门到精通第十四篇 - 错误处理 初识
错误处理(学习笔记) 环境Xcode 11.0 beta4 swift 5.1 错误表现和抛出 在 swift 中,错误由符合 Error 协议的类型值表示 // 示例 enum VendingMac ...
- Swift从入门到精通第十五篇 - 类型转换 初识
类型转换(学习笔记) 环境Xcode 11.0 beta4 swift 5.1 类型转换 类型转换是检查实例类型的一种方法,或者检查来自类层级不同的父类或子类一个实例,用 is 和 as 操作符 为类 ...
随机推荐
- Cocos2d-x 学习之路------(CCCallfunc 系列)
CCCallFunc,CCCallFuncN,CCCallFuncND,CCCallFuncO类都是调用函数来执行动作,他们的使用只是局限于他们调用的的函数的参数不同而不同 CCCallFunc的回调 ...
- 解决Oracle 11gR2 空闲连接过多,导致连接数满的问题
今天又遇到了11gR2连接数满的问题,以前也遇到过,因为应用那边没有深入检查,没有找到具体原因,暂且认为是这个版本Oracle的BUG吧. 上次的处理办法是用Shell脚本定时在系统中kill v$ ...
- GDAL python教程(1)——用OGR读写矢量数据
本教程的讲义和源码都是取自Utah State University的openGIS课程 相关资料,包括讲义.源码.数据样例,请从此处下载http://www.gis.usu.edu/~chrisg/ ...
- DRAM与NAND Flash产业六大趋势预测分析
集邦科技(TrendForce)旗下的分析部门DRAMeXchange的研究,针对对DRAM与NANDFlash产业的长久观察下,提出了对2012-2015年间产业发展的六大趋势预测: 趋势一 ...
- Siverlight+WCF+Nhibernate 开发之旅(一)
最近正在开发sl程序,考虑了很久,参考了一些框架,令人头疼的数据访问层最终选择wcf+nhibernate,至于为什么选择wcf和nh,个人参考了其他的框架感觉这两者结合从开发效率和便捷性方面比其他的 ...
- mongoose 查询子文档的方法
{ "__v": 1, "_id": "538f5f0f6195a184108c8bd8", "title": &quo ...
- 回收进程用户空间资源 exit()函数 _exit()函数 atexit()函数 on_exit()函数
摘要:本文主要讲述进程的终止方式,以及怎样使用exit()函数来终止进程.回收进程用户空间资源:分析了exit()函数与_exit()函数,returnkeyword的差异.同一时候具体解读了怎样使用 ...
- WPF之Binding的三种简单写法
环境 类代码 public class Person:INotifyPropertyChanged { private string name; public string Name { get { ...
- CF 599D Spongebob and Squares(数学)
题目链接:http://codeforces.com/problemset/problem/599/D 题意:定义F(n,m)为n行m列的矩阵中方阵的个数,比如3行5列的矩阵,3x3的方阵有3个.2x ...
- BZOJ 2594: [Wc2006]水管局长数据加强版( LCT )
离线然后就是维护加边的动态MST, Link cut tree秒掉..不过我写+调了好久...时间复杂度O(NlogN + MlogM) ------------------------------- ...