zoukankan      html  css  js  c++  java
  • Raphael.js API 之 Element.attr()

    /*API-8*/
    Element.attr()
    设置元素属性
    参数列表:
    attrName
        字符串类型 string
        属性名称
    value
        字符串类型 string
        属性值
    (or)
    params
        Object类型
        object of name/value pairs
    (or)
    attrName
        字符串类型 string
        属性名称
    (or)
    attrNames
        数组
        需要返回属性的属性名称数组
        
    返回值:参数列表中涉及属性名称所对应的元素对象
    返回值:参数列表中涉及属性名称所对应的属性值
    返回值:参数列表中属性数组所对应的属性值数组
    返回值:无参数则返回修改后的该对象

    属性参数可选用的设置参数

    1:arrow-end  字符串类型 在路径末端绘制箭头。设置的字符串格式:<type>[-<width>[-<length>]]
    其中type可选项为: classic, block, open, oval, diamond, none
    width可选项为:wide, narrow, medium
    length可选项为:long,short,midium
    示例:
        var raphael = Raphael(document.getElementById("test"),1000,1000);
        raphael.path("M 10 30 l 39 50").attr({
            'arrow-end':'classic-wide-long',
             stroke: '#fff',
              'stroke-width': 2
            });
    2:clip-rect 字符串类型 剪切矩形 用逗号或者空格隔开属性值 :x,y, width and height
    3: cusor 字符串类型 鼠标指针在元素上的样式 详细参见:http://blog.csdn.net/medivhq/article/details/22279085
    4:cx number类型 圆形或者椭圆的轴心x坐标
    5:cy number类型 圆形或者椭圆的轴心y坐标
    6: fill 字符串类型 填充内容:颜色或者图片
    7:fill-opacity number类型 填充的透明度
    8:font 字符串类型 字体
    9:font-family 字符串类型 字体集
    10:font-size 字符串类型 字体大小
    示例:
    var raphael = Raphael(document.getElementById("test"),1000,1000);
    raphael.text(130,180,'Cup').attr({
            'font-size':50
            });
    11:font-weight 字符串类型 字体粗度 /*PS:字体粗细设置属于一种比较复杂的字体样式定义,之所以说它复杂,是因为字体本身粗细千变万化,没有统一标准,对于字体粗细的具体定义也各不相同。*/
    12:height number类型
    13:href 字符串类型 某些特殊的元素会需要一些URL
    14:opacity number类型 透明度
    15:path 字符串类型 SVG轨迹 特殊格式的字符串
    16:r number类型 圆形,椭圆或者圆角矩形的半径
    17:rx number类型 椭圆水平方向半径
    18:ry number类型 椭圆垂直方向半径
    19:src 字符串类型 imageURL ,只在image元素上起作用
    示例:
        var raphael = Raphael(document.getElementById("test"),1000,1000);
        raphael.image().attr({
                src :'js/designer/images/48/start_event_empty.png',
                x:300,
                y:300,
                30,
                height:30
                })
    20:stroke 字符串类型 颜色属性
    21:stroke-dasharray 字符串数组 [“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]中任何一个,类似于画边框虚线
    示例:
    var raphael = Raphael(document.getElementById("test"),1000,1000);
    raphael.rect(100,100,100,50).attr({
            
            'stroke-dasharray':"-"
            });
    22:stroke-linecap 字符串类型 [“butt”, “square”, “round”]
    23: stroke-linejoin 字符串类型 [“bevel”, “round”, “miter”]
    24:stroke-miterlimit number类型
    25: stroke-opacity 字符串类型
    26:stroke-width number类型 单位像素 默认值为1
    27:target字符串类型 使用href
    28:text  字符串类型 文本元素内容 使用 换行

    29:text-ancho 字符串类型 [“start”, “middle”, “end”] 默认值为'middle'
    30: title 字符串类型 为给予的文本设置提示内容
    31:transform 字符串类型
    32:width number类型
    33: x number类型
    34;y number类型

    渐变
        线性渐变格式: “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”,
        例子: “90-#fff-#000” (-90度从白到黑) “0-#fff-#f00:20-#000” (梯度从白到红,在%20处显示为黑色)
        放射性渐变: “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”,
        例子: “r#fff-#000” 梯度从白到黑  “r(0.25, 0.75)#fff-#000” 0.25-0.75之间梯度从白色到黑色(范围0-1只适用于圆和椭圆)
    颜色可选参数
        颜色名称如:red
        #*** 短型HTML颜色标识
        #****** 全型HTML颜色标识
        rgb(*,*,*)
        rgb(*%,*%,*%)
        rgb(*,*,*,*)带透明度rgb格式
        rgb(*%,*%,*%,*%)
        hsb(*,*,*)
        hsb(*%,*%,*%)
        hsba(*,*,*,*)
        hsl(*,*,*)
        hsl(*%,*%,*%)
        hsla(*,*,*,*)
  • 相关阅读:
    ActiveMQ中JMS的可靠性机制
    ActiveMQ中Broker的应用与启动方式
    ActiveMQ支持的传输协议
    ActiveMQ常见消息类型
    Oracle体系结构及备份(十六)——bg-ckpt
    PHP自学之路---雇员管理系统(1)
    UVa11187
    给Android组件添加事件一个很好用的方法
    【项目那些事儿】项目哪些事儿?
    struts2对拦截器使用带实例
  • 原文地址:https://www.cnblogs.com/MedivhQ/p/4074936.html
Copyright © 2011-2022 走看看