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	鼠标按下
mousemove/unmousemove	鼠标移动
mouseup/unmouseup	鼠标抬起
touchstart/untouchstart	手指按下
touchmove/untouchmove	手指移动
touchend/untouchend	手指抬起

transform

transform以字符串形式写，例如："t200,50r45s2"

命令	说明	参数
t	translate	x,y
r	rotate	angle
s	scale	x,y

路径

命令	说明	参数
M	moveto	(x y)+
Z	闭合
L	lineto	(x y)+
H	横线(horizontal)	x+
V	竖线(vertical)	y+
C	曲线(curve)	(x1 y1 x2 y2 x y)+
S	平滑曲线(smooth)	(x2 y2 x y)+
Q	二次贝赛尔曲线(quadratic)	(x1 y1 x y)+
T	平滑二次贝塞尔曲线	(x y)+
A	弧线(arc)	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R	卡特莫尔罗曲线(CatmullRom)——抗锯齿平滑曲线的一种算法	x1 y1 (x y)+

属性

名称	类型	说明
基本样式
x	`number`
y	`number`
width	`number`
height	`height`
rx	`number`	圆角x
ry	`number`	圆角y
cx	`number`	圆心x
cy	`number`	圆心y
r	`number`	半径
opacity	`number`	透明度
path	`string`	path字符串
src	`string`	图片地址，只有image元素可用
transform	`string`	类似transform()方法
边线样式
stroke	`string`	边线，只能是颜色
stroke-width	`number`	边线宽度
stroke-linecap	`string`	端点形状：[“butt”, “square”, “round”]
stroke-linejoin	`string`	接头形状：[“bevel”, “round”, “miter”]
stroke-dasharray	`string`	边线虚线，-和.组成："-.-"/"-"/"--.._..--"
stroke-miterlimit	`number`	斜接长度限制，只有当接头是miter时有效
stroke-opacity	`number`	边线透明度
填充样式
fill	`number`	填充，可以是颜色、渐变或图片
fill-opacity	`number`	填充透明度
字体
font	`string`	类似于css的font
font-family	`string`	字体
font-size	`number`	字体大小
font-weight	`string`	加粗
text	`string`	text元素的文字内容
text-anchor	`string`	文本对齐：[“start”, “middle”, “end”]
title	`string`	text的tooltip
href	`string`	链接地址
target	`string`	链接target
其他
cursor	`string`	鼠标指针，类似于css的cursor样式
arrow-end	`string`	arrowhead on the end of the path. The format for string is [-[-]]. Possible types: classic, block, open, oval, diamond, none, width: wide, narrow, midium, length: long, short, midium.
clip-rect	`string`	comma or space separated values: x, y, width and height

转载于:https://www.cnblogs.com/cxmSuperman/p/10582248.html

raphael参数说明相关推荐

区块链产业生态发展情况-中国区块链产业生态发展
2019以来中国区块链产业处于蓬勃发展期,从中央到地方有关区块链发展的指导意见和扶持政策不断发布.据不完全统计,今年上半年全国共有超过23个省市发布了112条涉及区块链的政策信息,多省市把区块链纳入发 ...
用Raphael在网页中画圆环进度条
条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆放就不太好看了.随着css3的出现,圆环状的进度条开始用得越来越多,不过由于IE6/7/8不支持css3,我们只能换其它方 ...
VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件
1. 下载和官网教程下载地址:https://code.visualstudio.com/ 官方教程:https://code.visualstudio.com/docs 2. 安装插件安装扩展插 ...
arcgis合并tif影像_微图影像地图导出拼接大图的参数说明
1. 概述微图是一款集地图下载与GIS功能于一体的轻量级GIS产品,相较于X3版本的万能地图下载器,它有更丰富的地图数据和更专业的GIS功能. 尽管微图的软件界面已经足够简洁明了,但为了让新用户能更 ...
dbcp 连接池参数说明
dbcp 连接池参数说明参考: http://commons.apache.org/proper/commons-dbcp/configuration.html https://www.cnblog ...
从头到尾使用Geth的说明-3-geth参数说明和环境配置
1.参数说明 ETHEREUM选项:--config value TOML 配置文件--datadir "/home/user4/.ethereum" 数据库和keystore密钥 ...
ps aux参数说明
运行 ps aux 的到如下信息: ps aux USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND smmsp ...
redis.conf配置文件参数说明
参数说明 redis.conf 配置项说明如下: 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式 ...
强大的矢量图形库：Raphael JS 中文帮助文档及教程
Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...

raphael参数说明

形状

事件

transform

路径

属性

raphael参数说明相关推荐

最新文章

热门文章