Ketcher源码学习-储备知识-dependencies(2)-Raphaël

一、简介

用于绘制矢量图形 (SVG) 的跨浏览器JavaScript库。

二、对象层级关系

1. 从库中引入Raphael方法。

2. 执行Raphael方法，返回一个Pager对象，表现为创建了一块SVG画布。

3. Paper对象含有circle、ellipse等多种方法，用于绘制各种图形。

4. 执行上述方法，返回一个Element对象，表现为画布上绘制了相应的图形。

5. Element对象含有attr、click等多种方法，用于设置图形CSS属性及DOM事件回调。

6. 执行Pager对象的set方法，返回一个Set对象，即多个Element对象的集合。

7. Set对象可调用Element对象的全部方法，表现为将该方法作用于该集合中的每一个Element对象上。

三、Ketcher中用到的Raphael API

1. Raphael.angle：获取两点间角度。

2. Raphael.el.foo：向Element对象添加自定义方法foo。

3. Raphael.st.foo：向Set对象添加自定义方法foo。

4. Raphael.vml：浏览器是否支持VML。(Vector Markup Language 矢量标记语言)

四、Ketcher中用到的Paper API

1. Paper.circle：绘制一个圆形。

2. Paper.ellipse：绘制一个椭圆。

3. Paper.rect：绘制一个矩形。

4. Paper.text：添加文字。

5. Paper.path：接收SVG path格式字符串，创建一个<path>元素。

6. Paper.clear：清除画布上的所有元素。

7. Paper.set：创建一个Set对象。

8. Paper.setStart：创建一个Set对象，此后创建的元素均会被加入该Set集合。

9. Paper.setFinish：停止将后续创建的元素加入此前创建的Set集合。

10. Paper.setSize：变更画布尺寸。

11. Paper.setViewBox：设置视图框。

五、Ketcher中用到的Element API

1. Element.attr：设置字体、颜色、宽高等CSS属性。

2. Element.getBBox：获取元素边界框的坐标。

3. Element.hide：隐藏元素。

4. Element.show：显示元素。

5. Element.remove：移除元素。

6. Element.transform：接收tstr格式字符串 (transformation string)，对元素进行相应的平移、旋转、缩放等操作。

7. Element.translate：根据给定的距离，平移元素。

8. Element.rotate：根据给定的角度和中心点，旋转元素。

9. Element.scale：根据给定的比例和中心点，缩放元素。

10. Element.toFront：将元素移至图层的最上层。

六、Ketcher中用到的Set API

1. Set.clear：清除Set中的所有元素。