kityminder
Version:
985 lines (554 loc) • 22.1 kB
Markdown
Kity Graphic Layer API #
# Point ##
数据契约（JSON 格式）
表示一个点，结构如下：
```javascript
{
x : <float>,
y : <float>
}
```
# Size ##
数据契约（JSON 格式）
表示一个尺寸，结构如下：
```
{
width : <float>,
height : <float>
}
```
# Container ##
功能拓展
提供一个容器功能
## getItems() : Array ###
获得容器中所有的子元素
## getItem(int pos) : object ###
获得指定位置的子元素
## getFirstItem() : object ###
获得首个子元素
## getLastItem() : object ###
根据 CSS Class 获得指定的图形集合
## indexOf(object item) : int ###
获取指定子元素的位置，如果不存在则返回 -1
## forEachItem(Function fn) : this ###
迭代每个子元素
## addItem(object item, int pos) : this ###
添加子元素到指定的位置
## appendItem(object item) : this ###
追加子元素到指定的位置
## prependItem(object item) : this ###
添加子元素到最前头的位置
## removeItem(int pos) : this ###
删除指定位置的子元素
## clear() : this ###
清除容器中所有的子元素
## Item.remove() ###
子元素从容器移除自身
## Item.container ###
子元素获得包含自身的容器
# EventHandler ##
功能拓展
表示可以处理图形事件的接口
## addEventListener(name, handler(ShapeEvent)) ###
注册指定的事件（如 mousedown、 mousemove、 mouseup、 click、 keydown 等）
## removeEventListener(name [, handler(ShapeEvent)]) ###
取消已注册的事件。如果不传绑定的处理函数，将取消所有指定类型的绑定
# ShapeEvent ##
基类 ： DomEvent
包装原生事件对象，并且提供点击的 Shape 实例
## targetShape : Shape ###
点击的 Shape 实例
# Paper ##
基类 : BaseClass
实现 : EventHandler, DefContainer
所有图形的
## Paper(HTMLElement container) : Paper ###
构造函数，给定父容器 Dom，在父容器上创建 Paper 和呈现
## Paper(string id) : Paper ###
构造函数，给定父容器 id，在父容器上创建 Paper 和呈现
## getWidth() : float ###
获取 Paper 的宽度，单位为px
## getHeight() : float ###
返回 Paper 的高度，单位为px
## setWidth(float width) : this ###
设置 Paper 的宽度，单位为px
## setHeight(float height) : this ###
设置 Paper 的高度，单位为px
## setViewBox(float x, float y, float width, float height) : this ###
设置 Paper 的坐标范围
比如说，ViewBox 为 (0, 0, 100, 100) 的时候，一个大小为 (10, 10) 的矩形宽度占据了 Paper 的十分之一。若 Paper 实际大小为 1000px * 1000px 时，矩形实际大小就是 100px * 100px
## getViewBox() : Box ###
获得 Paper 的坐标范围。
## getShapeById(id) : Shape ###
获得具有指定 id 的图形
## internal createDef(string tagName) ###
添加具有指定类型的 def，会给其分配一个 id
## internal removeDef(string id) ###
移除具有指定 id 的 def
# Styled ##
功能拓展
CSS 样式支持
## addClass(string className) : this ###
添加 CSS Class
## removeClass(string className) : this ###
删除 CSS Class
## hasClass(string className) : this ###
判断是否存在指定的 class
## setStyle(Plain styles) ##
设置元素的样式
# Shape ##
基类 : Class
抽象类
实现 : EventHandler, Styled
表示一个图形
## setId(string id) : this ###
设置图形的 id
## getId() : string ###
获得图形的 id
## getType() : string ###
获得图形的类型
## getWidth() : int ###
获取图形所占的宽度
## getHeight() : int ###
返回图形所占的高度
## getSize() : Size ###
返回图形的大小
## getBoundaryBox() : Box ###
获得图形的边界
## setAnchor(float x, float y) : this ###
设置矩阵应用的旋转锚点
## getAnchor() : Point ###
获取矩阵应用的旋转锚点
## getTransform() : Matrix
获取图形当前的变换矩阵
## setTransform(Matrix matrix) : this ###
设置图形的变换矩阵
## mergeTransform(Matrix matrix) : this ###
合并图形的变换矩阵
## translate(float dx, float dy) : this ###
移动图形
## rotate(float degree [, float cx, float cy]) : this ###
旋转图形
## scale(float sx [, float sy]) ###
缩放图形，如果不给定sy，则等比缩放（认为sy = sx）
##
## *addFilter(Filter filter) : this ###
添加滤镜
## *removeFilter(Filter filter) : this ###
删除滤镜
# PathDrawer ##
基类 : BaseClass
提供操作 PathData 的工具类
## PathDrawer(Path path) ###
构造时给定 PathDrawer 要操作的 Path
## moveTo(x, y) : this ###
设置路径当前位置
## moveBy(dx, dy) : this ###
设置路径当前位置（相对位置）
## lineTo(x, y) : this ###
从当前位置绘制一条直线到指定的位置
## lineBy(dx, dy) : this ###
从当前位置绘制一条直线到指定的位置（相对位置）
## bezierTo(x1, y1, x2, y2, x, y) : this ###
绘制贝塞尔曲线
## bezierBy(dx1, dy1, dx2, dy2, dx, dy) : this ###
绘制贝塞尔曲线（相对位置）
## close() : this ###
闭合当前路径
# Path ##
基类 : Shape
表示一个路径（闭合或不闭合）
## Path() : Path ###
构造函数，创建一条空路径
## Path(string data): Path ###
构造函数，用指定的路径数据创建路径
## getPathData() : string ###
获得路径的数据表示
## setPathData(string data) : this ###
设置路径的数据。为了防止派生的图形不被非法修改，有些子类可能会保护改方法不被调用，或者使调用无效。实例化Path能保证该方法的有效性。
## getDrawer() : PathDrawer ###
获得路径数据绘制工具，用于构建或更新路径。注意，闭合的路径调用该方法时会返回 null。
## isClosed() : bool ###
判断当前路径是否已闭合
## stroke(Pen pen) : this ###
用指定的画笔描边路径
## fill(Brush brush) : this ###
用指定的画刷填充路径
# Group
基类 : Shape
实现 : Container
将多个图形组合成新的图形，请参照 Container
# Group() ##
构造函数创建一个空的组
# Rect
基类 : Path
表示一个矩形
## Rect(float width, float height, float x, float y) : Rect ###
构造函数，给定矩形的大小和位置
## setWidth(float width) : this ###
设置矩形的宽度
## setHeight(float height) : this ###
设置矩形的高度
## setSize(float width, float height) ###
设置矩形的大小
## getRadius() : float #####
获得矩形的圆角大小
## setRadius(float radius) : this ###
设置矩形的圆角大小
## getPosition() : Point ###
获取矩形位置的坐标点
## setPosition( float x, float y ) : this ###
设置矩形的位置坐标
## getPositionX() : float ###
获取矩形在X轴上的位置
## getPositionY() : float ###
获取矩形在Y轴上的位置
## setPositionX（ float x ） : this ###
设置矩形在X轴上的位置
## setPositionY（ float y ） : this ###
设置矩形在Y轴上的位置
# Ellipse
基类 : Path
表示一个椭圆
## Ellipse(float radiusX, float radiusY) ###
快捷构造椭圆，给定椭圆的大小
## Ellipse(float radiusX, float radiusY, float x, float y) ###
快速构造椭圆，给定椭圆的位置和大小
## getRadius() : Point ###
获得椭圆的半径
## getRadiusX() : float ###
获得椭圆在 x 轴上的半径
## getRadiusY() : float ###
获得椭圆在 y 轴上的半径
## getCenter() : Point ###
获得椭圆圆心的位置
## getCenterX() : float ###
获得椭圆圆心位置的 x 坐标
## getCenterY() : float ###
获得椭圆圆心位置的 y 坐标
## setRadius(float radiusX, float radiusY) : this ###
设置椭圆的半径
## setRadiusX(float radiusX) : this ###
设置椭圆在 x 轴上的半径
## setRadiusY(float radiusY) : this ###
设置椭圆在 y 轴上的半径
## setCenter(float x, float y) : this ###
设置椭圆圆心的位置
## setCenterX(float x) : this ###
设置椭圆圆心位置的 x 坐标
## setCenterY(float y) : this ###
设置椭圆圆心位置的 y 坐标
# Polygon
基类 : Path
实现 : Container
表示一个多边形，其子元素表示其顶点序列
## Polygon() : Polygon ###
构造函数，创建一个空多边形
## Polygon(Array<Point>) : Polygon ###
用点序列来构造多边形
# Line
基类 : Path
表示一条线段
## Line(float x1, float y1, float x2, float y2) ###
快捷构造函数
## setPoint1(float x, float y) : this ###
设置线段第一个端点的位置
## getPoint1() : Point ###
获取线段第一个端点的位置
## setPoint2(float x, float y) : this ###
设置线段第二个端点的位置
## getPoint2() : Point ###
获取线段第二个端点的位置
# Curve
基类 : Path
实现 : Container
表示一条曲线，其子元素表示其经过的点序列
## Curve() : Curve ###
构造函数，初始化一条曲线
## Curve(Array<Points> points) : Curve ###
快捷构造函数，给定曲线经过的点
# Bezier（贝塞尔曲线） ##
基类 : Path
实现 : PointContainer
## Bezier() : Bezier ###
构造函数，初始化一个空的贝塞尔曲线
## Bezier( Array bezierPoints ) : Bezier ###
构造函数，初始化一个含有给定点集合的贝塞尔曲线
# BezierPoint（贝塞尔上的点） ##
基类 : Class
## BezierPoint( number x, number y ) : BezierPoint ###
构造函数， 根据提供的坐标初始化一个贝塞尔曲线上的点，该点初始是平滑的。 该点还未设置控制点坐标，不能把未设置控制点的BezierPoint添加到bezier曲线上。
## BezierPoint( number x, number y, boolean isSmooth ) : BezierPoint ###
构造函数， 根据提供的坐标初始化一个贝塞尔曲线上的点，可以根据参数isSmooth决定是否平滑。 该点还未设置控制点坐标，不能把未设置控制点的BezierPoint添加到bezier曲线上。
## setForward( number x, number y ) : this ###
设置前置控制点位置，如果当前点BezierPoint对象是平滑的， 则对前置点的改变会引起后置点的变化， 如果不平滑， 则不会引起这种变化。
## setBackward( number x, number y ) : this ###
设置后置控制点位置，如果当前点BezierPoint对象是平滑的， 则对后置点的改变会引起前置点的变化， 如果不平滑， 则不会引起这种变化。
## setSmooth( boolean isSmooth ) : this ###
设置当前BezierPoint对象是否平滑， 更改平滑的BezierPoint对象的控制点，会引起另一个控制点的变化， 反之，则不会引起变化。
## setPoint( number x, number y ) : this ###
更改当前BezierPoint对象的顶点坐标， 该方法会同时移动当前BezierPoint对象的控制点位置。
# Polyline ##
基类 : Path
实现 : Container
表示一条折线，其子元素是其顶点
## Polyline() : Polygon ###
构造函数，创建空折线
## Polyline(Array<Point>) : Polygon ###
用点序列来创建折线
# Image ##
基类 : Shape
用于显示图片
## Image(string url, width, height, x, y) : Image ###
根据提供的url和宽度、高度、x坐标，y坐标信息初始化一个图片对象
## Image(string url, width, height) : Image ###
根据提供的url和宽度、高度信息初始化一个图片对象， 此图片的所处位置的x和y坐标都为0
## setUrl(string url) : this ###
设置图片的 URL
## setWidth( number width ) : this ###
设置图片宽度
## setHeight( number height ) : this ###
设置图片高度
## setX( number x ) : this ###
设置图片位置X坐标
## setY( number y ) : this ###
设置图片位置Y坐标
## getUrl() : string ###
获取图片的 URL,如果未设置图标， 则返回null
## getWdith() : number ###
获取图片的宽度
## getHeight() : number ###
获取图片的高度
## getX() : number ###
获取图片的X坐标
## getY() : number ###
获取图片的Y坐标
# Text ##
基类 : Shape
实现 : Container
用于显示文字，其子元素为单独控制样式的 TextSpan
## Text() : Text ###
创建一个空的文本
## Text(string content) : Text ###
创建一个具有指定内容的文本
## setContent(string content) : this ###
设置文本内容
## getContent() : string
获得文本内容
## appendContent( string content ) : Text
向文本内追加内容
## setX(float x) : this ###
设置文本显示的位置的 x 坐标
## setY(float y) : this ###
设置文本显示的位置的 y 坐标
## getX() : float ###
获得文本显示位置的 x 坐标
## getY() : float ###
获得文本显示位置的 y 坐标
## *setPath(string pathData) : ###
设置文本的排列路径
# TextSpan ##
基类 : Class
实现 : Styled
内联文本块
## TextSpan(string content) ###
创建具有指定内容的文本框
## setContent(string content) ###
设置文本块内容
## getContent() : string ###
获得文本块内容
# Color ##
基类 : Class
实现 : Serializable
表示一个颜色
## Color() : this ###
得到 RGBA(0, 0, 0, 0) 的颜色
## Color(string colorString) ###
用指定的 Color String 来创建颜色，支持常用
## set(string name, float value) : this
设置当前颜色的某一个分量值，支持：
* r/red - RGB 颜色表示中的红色分量（取值0-255）
* g/green - RGB 颜色表示中的绿色分量（取值0-255）
* b/blue - RGB 颜色表示中的蓝色分量（取值0-255）
* h/hue - HSL 颜色表示中的色环角度（取值0-360）
* s/saturation - HSL 颜色表示中的饱和度（取值0-100）
* l/lightness - HSL 颜色表示中的亮度（取值0-100）
* a/alpha - 颜色的透明度（取值0 - 1）
设置 RGB 的分量会影响 HSL 的分量，反之亦然。
## increase(string name, float inc) ###
增加当前颜色某个分值的值，如果溢出，会设置为对应的最大值
## decrease(string name, float dsc) ###
减少当前颜色某个分值的值，如果溢出，会这职位对应的最小值
## get(string name) : this ###
获取当前颜色的某一个分量值，支持的名称和set方法中规定一致
## toRGB() : string ###
获得当前颜色的 RGB 表示： RGB(r, g, b)，这种表示形式会丢失颜色的透明度信息
## toHEX() : string ###
获得当前颜色的 HEX 表示: #RRGGBB，这种表示形式会丢失颜色的透明度信息
## toHSL() : string ###
获得当前颜色的 HSL 表示: HSL(h, s%, l%)，这种表示形式会丢失颜色的透明度信息
## toRGBA() : string ###
获得当前颜色的 RGBA 表示: RGBA(r, g, b, a)
## toHSLA() : string ###
获得当前颜色的 HSLA 表示：HSLA(h, s%, l%, a)
# Brush ##
基类 : Class
抽象类
实现 : Serializable
表示一个画刷，用于填充 Path
## getType() : string ###
获取画刷的类型
ColorBrush #
基类: Brush
表示一个用纯色填充的画刷
## ColorBursh() ###
构造函数，初始化一个纯色填充的画刷
## ColorBrush(Color color) : this ###
构造函数，使用指定的颜色初始化画刷
## setColor(Color color) : this ###
设置画刷颜色
## getColor() : Color ###
获取画刷的颜色
LinearGradientBrush #
基类 : Brush
表示用线性渐变填充的画刷。线性渐变的方向和大小由两个值决定。起始位置和结束，使用(px, py)来表示，取值0 - 1，表示渐变的开始和结束位置在图形的指定比例处。默认是 (0,0) 和 (1, 0)
渐变的颜色通过添加 ColorStop 来指定
## Paper.createLinearGradientBrush() ###
从 paper 创建一个线性渐变的画刷
## LinearGradientBrush(Paper paper) : this ###
初始化线性渐变画刷
## setStartPosition(float px, float py) ###
设置渐变起始位置
## setEndPosition(float px, float py) ###
设置渐变结束位置
## getStartPosition() : Point ###
获取渐变起始位置
## getEndPosition() : Point ###
获取渐变结束位置
## addStop(float offset, Color color) : this ###
设置指定位置上的颜色，offset取值范围为 0 - 1，表示在渐变区间的比例的颜色
RadialGradientBrush #
基类 : Brush
表示用径向渐变填充的画刷。径向渐变用三个值表示。中心位置和半径表示其范围，都用 0 - 1 作为值域。
焦点表示径向渐变的起始位置。中心位置的默认值为(0.5, 0.5), 焦点位置的默认值为(0.5, 0.5)，半径默认值为0.5。
## Paper.createRadialGradientBrush() : Brush ###
## RadialGradientBrush() : this ###
初始化一个径向填充的画刷
## setCenter(float cx, float cy) ###
设置径向渐变的中心位置
## getCenter() : Point ###
获得径向渐变的中心位置
## setFocal(float fx, float fy) : this ###
设置径向渐变的焦点位置
## getFocal() : Point ###
获取径向渐变的焦点位置
## setRadius( float r ) ###
设置径向渐变的半径
## getRadius() : float ###
获取径向渐变的半径
## addStop(float offset, Color color) : this ###
设置渐变指定区间位置的颜色，取值范围 0 - 1
PatternBrush #
基类 : Brush
实现 : Container
表示用图形填充的画刷
## Paper.createPatternBrush() : PatternBrush ###
从 paper 创建一个 PatternBrush
## PatternBrush(Paper paper) : this ###
初始化一个图形填充画刷
# Pen ##
基类 : Class
实现 : Serializable
根据画笔设置当前图形边框样式
## getColor() : Color ###
获取当前图形画笔色值
## getWidth() : float ###
获取当前图形画笔粗细
## setColor(Color color) : this ###
设置当前图形画笔颜色
## setWidth(float width) : this ###
设置当前图形画笔的粗细
## setLineCap(string linecap) ###
设置画笔描边时，端点的样式，取值有：butt、round、suqare
## setLineJoin(string linejoin) ###
设置描边转折点的样式，取值有：miter、round、bevel
## getLineCap() : string ###
获得画笔当前设置的描边端点样式
## getLineJoin() : string ###
获得画笔当前设置的描边转折点样式
## getOpacity() : number ###
获取当前画笔的透明度值
## setOpacity( number opacity ): this ###
设置当前画笔的透明度
## getDashArray() : Array<float> ###
获取虚线的段长和间隔的定义数组，如果为空，则绘制实线
## setDashArray(Array<float>) : this ###
设置虚线的段长河间隔的定义数组
# Filter ##
基类 : Class
实现 : Serializable
表示一个应用到图形上的滤镜
# BlurFilter ##
基类 : Filter
设置图形滤镜为模糊
## BlurFilter(int blur) : this ###
创建一个滤镜
## setBlurFilter(int blur):this ###
设置当前图形滤镜模糊值
## getBlurFilter():this ###
获取当前图形滤镜模糊值
# ShadowFilter ##
inherit: Class
implement: Kity.Brush
设置图形滤镜为阴影
## getShadowFilterOffset():this ###
获取当前图形滤镜偏移
## setShadowFilterOffset(int x,int y):this ###
设置当前图形滤镜偏移
## getShadowFilterBlur():this ###
获取当前图形滤镜模糊值
## setShadowFilterBlur(int blur):this ###
设置当前图形滤镜模糊值
## getShadowFilterBlur():this ###
设置当前图形滤镜模糊值
## setShadowFilteColor(string color):this ###
设置当前图形滤镜颜色
# Matrix ##
基类 : Class
实现 : Serializable
图形变换
## translate(int x, int y) : this ###
添加一个偏移数据到矩阵上
## rotate(int degress) : this ###
添加一个旋转数据到矩阵上
## scale(float sx, float sy) : this ###
增加缩放数据到矩阵上，只给一个参数则等比缩放
## skew(float sx, float sy) : this ###
添加倾斜数据到矩阵上，只给一个参数等比倾斜
## getMatrix() : Plain ###
获取矩阵的数据： { a: float, b: float, c: ...}
## setMatrix(float a, float b, float c, float d, float e, float f): this ###
设置矩阵的数据
## mergeMatrix(Matrix another) : Matrix ###
合并另一个转换矩阵，返回合并后的矩阵
# Use(Shape origin)
基类：Shape
使用指定的图形，进行个性化设置。可以进行的设置：变换（Transform）、填充（Fill）、描边（Stroke）、样式（Style）。
# Clip
基类：Shape
拓展：ShapeContainer
创建图形剪辑。只显示图形剪辑闭合的路径部分。
## Clip.clip(Shape shape)
把剪辑作用在指定的图形上
## Shape.clipWith(Clip clip)
使用指定的剪辑作用在当前图形上
# Mask
基类：Shape
拓展：ShapeContainer
创建图形蒙版，蒙版颜色亮度为 100 的部分，被蒙版的图形能被完全显示，而蒙版颜色亮度为 0 的部分，被蒙版的图形透明度为 0。
## Mask.mask(Shape shape) : this
把蒙版作用在指定的图形上
## shape.maskWith(Mask mask) : this
使用指定的蒙版作用在当前图形
Clipe 和 Mask 的差别：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking