@icanvas/components
Version:
这是icanvas的界面组件包
227 lines (128 loc) • 5.28 kB
Markdown
# **iCanvas界面组件**
## 基础组件 Component
```javascript
let View = new Component();
```
属性
`View.id` 组件ID
`View.zIndex` 组件层级
`View.children` 子组件列表
`View.parent` 父组件
`View.matrix` 当前绘制矩阵
`View.clip` 界面裁剪函数<sup style="color:red">不推荐</sup>
`View.visible` 显示状态
`View.alpha` 透明度
`View.position` 定位坐标<sup>相对父组件</sup>
`View.x` 定位X坐标<sup>相对父组件</sup>
`View.y` 定位Y坐标<sup>相对父组件</sup>
`View.anchor` 锚点<sup>相对自身原点</sup>
`View.anchorX` 锚点X坐标<sup>相对自身原点</sup>
`View.anchorY` 锚点Y坐标<sup>相对自身原点</sup>
`View.scale` 缩放<sup>相对自身锚点</sup>
`View.scaleX` 缩放X比例<sup>相对自身锚点</sup>
`View.scaleY` 缩放Y比例<sup>相对自身锚点</sup>
`View.radian` 旋转弧度<sup>相对自身锚点</sup>
`View.angle` 旋转角度<sup>相对自身锚点</sup>
`View.touchChildren` 是否允许点击到子元素
`View.touchStop` 是否允许冒泡到父元素
方法
`View.setParent(component|null,index=-1)` 设置/移除父组件
`View.addChildAt(component,index=0)` 添加子组件到index位置
`View.addChild(...args|Array)` 添加子组件列表<sup>传入数组或多个参数</sup>
`View.removeChild(component)` 移除子组件component
`View.removeChildren()` 移除所有子组件
`View.offsetTouch(vector2)` vector2坐标偏移锚点距离
`View.setClip(clip)` 设置界面裁剪函数<sup>不推荐</sup>
`View.setVisible(bool)` 设置显示状态
`View.setAlpha(bool)` 设置透明度
`View.setPosition(x,y)` 设置定位坐标
`View.setAnchor(x,y)` 设置锚点坐标
`View.setScale(x,y)` 设置缩放比例
`View.setRadian(x,y)` 设置旋转弧度
`View.setAngle(x,y)` 设置旋转角度
`View.hitPoint(x,y,bx,by,bw,bh)` (x,y)是否在(bx,by,bw,bh)矩形范围内
---
## 图片组件 Texture
继承自Component
```javascript
let View = new Texture();
```
属性
`View.texture` 基本图片
`View.size` 绘制大小
`View.framePosition` 切割位置
`View.frameSize` 切割大小
`View.width` 图片宽度
`View.height` 图片高度
方法
`View.setTexture(texture,frameX,frameY,frameWidth,frameHeight)`设置图片
`View.setAnchorSize(x=0.5,y=0.5)`设置绘制锚点<sup>按图片大小的比例<sup>
`View.setSize(x,y)`设置图片大小
`View.setSizeLimit(maxX,maxY,minX,minY)` 限制图片大小
`View.hitMe(x,y)` 点(x,y)是否在本实例范围内
`View.update(Context)` 绘制本实例到Context上下文
---
## 文本组件 Text
继承自Component
```javascript
let View = new Text({});
```
属性
`Text.Context` 检测用离屏上下文<sup style="color:blue">静态</sup>
`View.AlignWidth` 各横向对齐属性的偏移量<sup style="color:blue">静态</sup>
`View.AlignHeight` 各纵向对齐属性的偏移量<sup style="color:blue">静态</sup>
`View.defaultSpecial` 默认图标对应号<sup style="color:blue">静态</sup>
`View.defaultConfig` 默认文本配置<sup style="color:blue">静态</sup>
`View.config` 文本格式配置
`View.lineHeight` 行高
`View.font` 字体
`View.size` 文本大小
`View.width` 文本最大宽度<sup style="color:green">只读</sup>
`View.height` 文本最大高度<sup style="color:green">只读</sup>
`View.value` 文本内容
`View.special` 特殊字符
方法
`View.setValue(value)` 设置文本内容
`View.setSpecial({})`设置特殊字符列表
`View.separate(x,y)` 将文本进行文本格式重检测
`View.setAnchorSize(x=0.5,y=0.5)`设置绘制锚点<sup>按文本大小的比例<sup>
`View.hitMe(x,y)` 点(x,y)是否在本实例范围内
`View.update(Context)` 绘制本实例到Context上下文
---
## 滚动组件 Scroll
继承自Component
```javascript
let View = new Scroll(200,300,400,600);
```
属性
`View.size` 滚动框大小
`View.width` 滚动框宽度
`View.height` 滚动框高度
`View.context` 真实滚动内容缓存上下文
`View.realWidth` 真实滚动内容宽度<sup style="color:green">只读</sup>
`View.realHeight` 真实滚动内容高度<sup style="color:green">只读</sup>
`View.scrollAt` 当前滚动位置
方法
`View.setSize(x,y)` 设置滚动框大小
`View.setAnchorSize(x,y)` 设置滚动框锚点比例
`View.setRealSize(x,y)` 设置滚动内容真实高度<sup>将清空内容</sup>
`View.touchMoveX(x)` 横向滚动x距离
`View.touchMoveY(y)` 纵向滚动y距离
`View.hitMe(x,y)` 点(x,y)是否在本实例范围内
`View.update(Context)` 绘制本实例到Context上下文
`View.offsetTouch(vector2)` vector2坐标偏移锚点距离再偏移滚动位置距离
---
## 缓存组件 Cache<sup style="color:red">不推荐</sup>
继承自Component
```javascript
let View = new Cache(200,300);
```
属性
`View.context` 真实滚动内容缓存上下文
`View.width` 缓存宽度<sup style="color:green">只读</sup>
`View.height` 缓存高度<sup style="color:green">只读</sup>
方法
`View.setSize(x,y)` 设置缓存大小
`View.setAnchorSize(x,y)` 设置缓存锚点比例
`View.hitMe(x,y)` 点(x,y)是否在本实例范围内
`View.update(Context)` 绘制本实例到Context上下文