关于Raphael开发过程中的一些总结

依赖

  • jquery.js
  • raphael.js
  • jquery.json.js
  • shape-path.js

调用方法

本工具的静态成员,使用'd$'或者'FinfoView'访问

  • d$.color

    string笔触颜色

  • d$.current

    object当前选中的对象

  • d$.p

    Object当前页面的画布

    d$.p.map--Paper绘图画布
    d$.p.tools--Paper工具栏画布

  • d$.objs

    Array绘图画布上的对象集合

  • d$.path

    object图形路径集合对象

    从shape-path.js中的FINFO_VIEW_PATH对象获得,事先必须引入shape-path.js

  • d$.event

    object事件监听绑定的函数

  • d$.style

    object预设的几种样式

  • d$.building(p[,inf]),d$.station(p[,inf]),d$.valve(p[,inf])

    绘制普通控件

    返回:building/station/valve对象

    参数:

    ppaper画布

    infobject自定义的数据
    {
      x:x偏移,
      y:y偏移,
      s:缩放比例,
      r:旋转角度,
      fill:填充颜色,
      caption:描述,
      stroke:笔触颜色,
      stroke-width:笔触宽度,
    }

  • d$.buildingico(p1,p2),d$.stationico(p1,p2),d$.valveico(p1,p2),d$.lineico(p1,p2)

    绘制工具栏图标

    返回:building/station/valve/line图标对象

    参数:

    p1paper工具栏画布

    p2paper绘图画布

  • d$.shapeNormal(p,type[,inf])

    绘制普通控件

    返回:shapeNormal对象

    参数:

    ppaper画布

    typestring

    infobject自定义的数据

  • d$.ico(p1,type,p2)

    绘制控件图标

    返回:ShapeIco对象

    参数:

    p1paper工具栏画布

    typestring

    p2object绘图画布

  • d$.setMode(mode)

    笔触颜色

    返回:mode

    参数:

    modestring设置画布显示模式
    可选值:'RO'-只读  'EDIT'-编辑  'SHOW'-展示

  • d$.redraw(infstr)

    根据json字符串重绘map画布上的对象

    返回:object  map画布上对象集合

    参数:

    infstrstringjson字符串

  • d$.paper(container,arg)

    定义画布

    参数:

    containerstring页面容器的id
    argstring指定画布类型,map或tools

  • d$.getPos(obj)

    获得鼠标在容器中的坐标

    返回:object  {x:横坐标,y:纵坐标}

    参数:

    objHtmlElement

Raphael-Paper类的拓展成员

  • getInf()

    获取画布上的对象信息

    返回:string  json字符串

  • setMode(mode)

    设置画布显示模式(不建议使用,这个方法在需要的时候会被自动调用)

    返回:mode

    参数:

    modestring设置画布显示模式
    可选值:'RO'-只读  'EDIT'-编辑  'SHOW'-展示

Raphael-Element类的拓展成员

  • obj

    object所属控件对象的引用

  • trans(flag,arg)

    变换图形

    返回:boolean变换成功返回true,否则返回false

    参数:

    flagstring变换类型,t-位移,s-缩放,r-旋转,c-颜色

    argstringNumberArray变换参数

    eg:
      obj.trans('t',[50,60])-向右平移50像素,向下平移60像素
      obj.trans('s',1.5)-放大为原来的1.5倍
      obj.trans('r',30)-顺时针旋转30度
      obj.trans('c','#fff')-填充为白色

  • reset()

    复位图形

  • draw()

    根据图形data()方法中存放的信息绘制图形,该方法可使被隐藏的图形恢复显示

  • unbindall()

    解除图形所有的事件绑定

  • blur()

    使图形失去焦点

Raphael-Set类的拓展成员

  • blur()

    使set中所有图形失去焦点

ShapeBase类

图形基类,抽象类,已知子类:ShapeNormal,ShapeIco,pipeline

  • shapes

    Set该对象的图形集合

  • type

    string类型

  • remove()

    移除对象

  • databind([arg])

    设置或返回对象绑定的数据

    返回:

    object返回指定key的绑定数据对象,未指定则返回全部

    参数:

    argobject键 或 键值对
    eg:
      obj.databind('key1')->返回键为‘key1’的数据绑定对象
      obj.databind({key1:{caption:'压强A',unit:'帕斯卡',delay:5000,alert:[{max:60,color:'red'}]},key2:null})->设置数据绑定

  • removeDatabind([arg])

    移除全部或某个数据绑定对象

    返回:

    object返回this.data()或者剩余的数据绑定对象(如果有)

    参数:

    argobject

  • databindexe()

    虚函数,执行绑定数据的查询与显示

  • reset()

    重置图形

  • data([arg])

    设置控件的数据,用法参考jQuery.data()

  • removeData([arg])

    移除控件的数据,用法参考jQuery.removeData()

ShapeNormal类

一般图形控件类,单纯PATH绘制的控件,继承自ShapeBase,已知子类:building,station,valve

  • id

    Number与对象在d$.objs中的下标值相等,从0开始,取决于对象创建顺序与涂层次序

  • shape

    Element图形

  • trans(flag,arg)

    变换图形,参考Element:trans()

  • setMode(mode)

    设置对象的显示模式,参考d$.setMode()

  • databindexe()

    查询并显示对象的绑定数据

ShapeIco类

图标类,继承自ShapeBase,已知子类:building.ico,station.ico,valve.ico,pipeline.ico

  • shape

    Element图形

building,station,valve类

直接创建相应控件,继承自ShapeNormal

building.ico,station.ico,valve.ico,pipeline.ico类

直接创建相应图标,并设置显示位置,绑定单击事件,继承自ShapeIco

pipeline类

管线类,继承自ShapeBase

  • line

    Set管线图形集合

  • points

    Set节点图形集合

  • id

    Number参考ShapeNormal:id

  • path

    string管线路径

  • flow_flag

    Element标识管线流向的标记

  • setMode(mode)

    设置管线显示模式并绑定相应事件监听,参考d$.setMode()

  • redraw(arg)

    根据参数重绘一条管线

    参数:

    argobject
    {
      color:#fff,//颜色
      stroke_width:10,//宽度
      points:[{x:10,y:10},{x:20,y:30}]//节点坐标数组
    }

  • con(c)

    这是个什么方法呢,你猜

  • trans(flag, arg)

    调整管线的颜色或者宽度

    参数:

    flagstring

    argstringNumber

    eg:
      obj.trans('c','#000')->设置管线为黑色
      obj.trans('s',20)->设置管线宽度为20

  • flow([dir])

    标记管线流向

    参数:

    dirNumber大于0正向,小于0逆向,0或者空 取消标记

  • reset()

    覆盖父类方法,然后啥也不干

猜你喜欢

转载自blog.csdn.net/liuli283/article/details/50041257