iapyang 7 years ago
parent
commit
909f50d322
  1. 3
      uidoc/README.md
  2. 63
      uidoc/base/canvas.md
  3. 35
      uidoc/case/complex_canvas.md
  4. 11
      uidoc/core/basic_button.md
  5. 4
      uidoc/core/widget.md

3
uidoc/README.md

@ -1,2 +1,5 @@
# FineUIdocs # FineUIdocs
FineUI的交互、前端以及视觉文档规范 FineUI的交互、前端以及视觉文档规范
####1. 控件都会提供setValue, getValue, populate这几个方法来设置值,获取值(展示类控件除外)和刷新控件
####2. 控件都会提供setEnable, setVisible, setValid这几个方法来设置使能,是否可见,是否有效状态,并且在fineui2.0之后,会自动给子组件设置同样的状态,不要重写这些方法,一些需要在设置状态时的额外操作可以通过重写_setXXX来实现

63
uidoc/base/canvas.md

@ -3,37 +3,19 @@
## canvas绘图,基类[BI.Widget](/core/widget.md) ## canvas绘图,基类[BI.Widget](/core/widget.md)
{% method %} {% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/) [source](https://jsfiddle.net/fineui/gcgd1va0/)
{% common %} {% common %}
```javascript ```javascript
var canvas = BI.createWidget({ var canvas = BI.createWidget({
type: "bi.complex_canvas", type: "bi.canvas",
width: 500, element: "#wrapper",
height: 600 width: 500,
}); height: 600
canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, { });
offset: 20, canvas.circle(150, 50, 20, "green");
strokeStyle: "red", canvas.stroke();
lineWidth: 2
});
canvas.branch(220, 155, 120, 110, 150, 200, {
offset: 40
});
canvas.stroke();
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: canvas,
left: 100,
top: 50
}]
})
``` ```
@ -43,31 +25,10 @@ canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, {
## 对外方法 ## 对外方法
| 名称 | 说明 | 回调参数 | 名称 | 说明 | 回调参数
| :------ |:------------- | :----- | :------ |:------------- | :-----
| add | 添加对象到json数组 | json | | line | 绘制线段| (x0, y0, x1, y1) |
| path | 绘制路径 | pathString | | rect | 绘制矩形 | (x,y,w,h,color)分别表示左上角的横坐标、纵坐标,矩形宽、高、以及绘制的颜色|
| image | 绘制图片 | (src,x,y,w,h)分别表示图片路径,绘制的原点横、纵坐标,宽、高 | | circle | 绘制圆形 | (x, y, radius, color)分别表示原点的横坐标,纵坐标,半径以及颜色 |
| rect | 绘制矩形 | (x,y,w,h,r)分别表示左上角的横坐标、纵坐标,矩形宽、高、以及矩形的圆角border-radius大小|
| circle | 绘制圆形 | (x,y,r)分别表示原点的横坐标,纵坐标,以及半径 |
| ellipse | 绘制椭圆 |(x,y,rx,ry)分别表示原点的横、纵坐标,以及水平半径和垂直半径|
| text | 绘制文本 | (x,y,text)分别表示绘制的原点横、纵坐标以及要绘制的文本内容|
| print | 根据制定参数打印出路径 | (x, y, string, font, size, origin, letter_spacing, line_spacing) |
| setStart | 开始绘制 | |
| setFinish | 结束绘制 | |
| setSize | 设置画布尺寸 | (width,height)分别表示画布宽高|
| setViewBox | 设置画布可视区域 | (x,y,width,height,fit)分别表示可视区域原点坐标以及可视区域宽高,以及是否根据可视区域进行调整 |
| getById | 根据id返回元素 | id |
| getElementByPoint | 获根据给定的点坐标返回元素 | (x,y)|
| getElementsByPoint | 获根据给定的点坐标返回元素 | (x,y) |
| getFont | 通过给定的参数在已注册的字体中找到字体对象 | (family, weight, style, stretch) |
| set | 绘制形状的集合 | |
| remove | 设置总页数 | pages |
| clear | 判断是否有上一页 | v |
| line | 绘制线段| (x0, y0, x1, y1) |
| rect | 绘制矩形 | (x,y,w,h,color)分别表示左上角的横坐标、纵坐标,矩形宽、高、以及绘制的颜色|
| circle | 绘制圆形 | (x, y, radius, color)分别表示原点的横坐标,纵坐标,半径以及颜色 |
| hollow | 填充中空的路径 | | | hollow | 填充中空的路径 | |
| solid | 填充实心的路径 | | | solid | 填充实心的路径 | |
| gradient | 绘制渐变色 | (x0, y0, x1, y1, start, end) | | gradient | 绘制渐变色 | (x0, y0, x1, y1, start, end) |

35
uidoc/case/complex_canvas.md

@ -1,2 +1,37 @@
# complex_canvas # complex_canvas
## 复杂的canvas绘图
{% method %}
[source](https://jsfiddle.net/fineui/psozjkgn/)
{% common %}
```javascript
var canvas = BI.createWidget({
type: "bi.complex_canvas",
width: 500,
height: 600
});
canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, {
offset: 20,
strokeStyle: "red",
lineWidth: 2
});
canvas.stroke();
```
{% endmethod %}
## 对外方法
| 名称 | 说明 | 回调参数
| :------ |:------------- | :-----
| branch | 绘制树枝节点| (x0, y0, x1, y1, x2, y2) (以x0, y0为根节点,分支到x1,y1, x2,y2...)|
| stroke | 绘制 | |
---

11
uidoc/core/basic_button.md

@ -1,4 +1,4 @@
# bi.basci_button # bi.basic_button
## 一般的button父级,基类[BI.Single](/core/single.md) ## 一般的button父级,基类[BI.Single](/core/single.md)
@ -7,18 +7,17 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:---- | :------ |:------------- | :-----| :----|:----
| value | 组件value值 | string | | null| | value | 组件value值 | string | | null|
| text | 文本内容 | string | | " " | | stopEvent | 阻止事件 |boolean | true,false | false |
| stopEvent | 阻止冒泡 |boolean | true,false | false |
| stopPropagation | 阻止冒泡 | boolean | true,false| false | | stopPropagation | 阻止冒泡 | boolean | true,false| false |
| selected | 选中文本值 | boolean | true,false |false | | selected | button的选中状态 | boolean | true,false |false |
| once | 点击一次选中有效,再点无效 | boolean | true,false | false| | once | 点击一次选中有效,再点无效 | boolean | true,false | false|
| forceSelected | 点击即选中, 选中了就不会被取消,与once的区别是forceSelected不影响事件的触发| boolean | true,false| false| | forceSelected | 点击即选中, 选中了就不会被取消,与once的区别是forceSelected不影响事件的触发| boolean | true,false| false|
| forceNotSelected | 无论怎么点击都不会被选中 | boolean| true,false | false| | forceNotSelected | 无论怎么点击都不会被选中 | boolean| true,false | false|
| disableSelected | 使能选中| boolean | true,false| false| | disableSelected | 使能选中| boolean | true,false| false|
| shadow | 是否显示阴影 | boolean| true,false| false| | shadow | 是否显示阴影 | boolean| true,false| false|
| isShadowShowingOnSelected| 选中状态下是否显示阴影|boolean| true,false | false| | isShadowShowingOnSelected| 选中状态下是否显示阴影|boolean| true,false | false|
| trigger | 被选元素要触发的事件 | | | null| | trigger | 被选元素要触发的事件 | string | mousedown, mouseup, click, dblclick, lclick | null|
| handler | | | | | | handler | 点击事件回调 | function | | BI.emptyFn |
## 对外方法 ## 对外方法

4
uidoc/core/widget.md

@ -1,6 +1,6 @@
# bi.widget # bi.widget
## Widget超类 ## 所有控件的超类
## API ## API
##### 基础属性 ##### 基础属性
@ -31,6 +31,8 @@
## 对外方法 ## 对外方法
#####(注: fineui2.0引入生命周期后,widget的实现类不需要重写setEnable,setValid等方法,会自动调用子组件的对应方法
,一些需要在设置状态后做的额外工作可以通过重写_setXXX来实现)
| 名称 | 说明 | 回调参数 | 名称 | 说明 | 回调参数
| :------ |:------------- | :----- | :------ |:------------- | :-----
| isMounted | 判断组件是否挂载| — | | isMounted | 判断组件是否挂载| — |

Loading…
Cancel
Save