UNPKG

@icanvas/components

Version:
227 lines (128 loc) 5.28 kB
# **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上下文