From 2b5dfc4b54c0106eb6cfd8a82d509b4c0d362bdd Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Fri, 1 Sep 2017 15:35:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E4=BA=9B=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- uidoc/README.md | 3 ++ uidoc/base/canvas.md | 63 +++++++----------------------------- uidoc/case/complex_canvas.md | 35 ++++++++++++++++++++ uidoc/core/basic_button.md | 11 +++---- uidoc/core/widget.md | 4 ++- 5 files changed, 58 insertions(+), 58 deletions(-) diff --git a/uidoc/README.md b/uidoc/README.md index c8ed22556..11a67105a 100644 --- a/uidoc/README.md +++ b/uidoc/README.md @@ -1,2 +1,5 @@ # FineUIdocs FineUI的交互、前端以及视觉文档规范 + +####1. 控件都会提供setValue, getValue, populate这几个方法来设置值，获取值(展示类控件除外)和刷新控件 +####2. 控件都会提供setEnable, setVisible, setValid这几个方法来设置使能，是否可见，是否有效状态，并且在fineui2.0之后，会自动给子组件设置同样的状态，不要重写这些方法，一些需要在设置状态时的额外操作可以通过重写_setXXX来实现 diff --git a/uidoc/base/canvas.md b/uidoc/base/canvas.md index 13d462c3c..95e08ee29 100644 --- a/uidoc/base/canvas.md +++ b/uidoc/base/canvas.md @@ -3,37 +3,19 @@ ## canvas绘图,基类[BI.Widget](/core/widget.md) {% method %} -[source](https://jsfiddle.net/fineui/txqwwzLm/) +[source](https://jsfiddle.net/fineui/gcgd1va0/) {% 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.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 - }] - }) + type: "bi.canvas", + element: "#wrapper", + width: 500, + height: 600 +}); +canvas.circle(150, 50, 20, "green"); +canvas.stroke(); ``` @@ -43,31 +25,10 @@ canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, { ## 对外方法 | 名称 | 说明 | 回调参数 -| :------ |:------------- | :----- -| add | 添加对象到json数组 | json | -| path | 绘制路径 | pathString | -| image | 绘制图片 | (src,x,y,w,h)分别表示图片路径，绘制的原点横、纵坐标，宽、高 | -| 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)分别表示原点的横坐标，纵坐标，半径以及颜色 | +| :------ |:------------- | :----- +| line | 绘制线段| (x0, y0, x1, y1) | +| rect | 绘制矩形 | (x,y,w,h,color)分别表示左上角的横坐标、纵坐标，矩形宽、高、以及绘制的颜色| +| circle | 绘制圆形 | (x, y, radius, color)分别表示原点的横坐标，纵坐标，半径以及颜色 | | hollow | 填充中空的路径 | | | solid | 填充实心的路径 | | | gradient | 绘制渐变色 | (x0, y0, x1, y1, start, end) | diff --git a/uidoc/case/complex_canvas.md b/uidoc/case/complex_canvas.md index afc3b4371..8a358a502 100644 --- a/uidoc/case/complex_canvas.md +++ b/uidoc/case/complex_canvas.md @@ -1,2 +1,37 @@ # 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 | 绘制 | | + +--- + + diff --git a/uidoc/core/basic_button.md b/uidoc/core/basic_button.md index 131362d37..cbd36279a 100644 --- a/uidoc/core/basic_button.md +++ b/uidoc/core/basic_button.md @@ -1,4 +1,4 @@ -# bi.basci_button +# bi.basic_button ## 一般的button父级,基类[BI.Single](/core/single.md) @@ -7,18 +7,17 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | :------ |:------------- | :-----| :----|:---- | value | 组件value值 | string | | null| -| text | 文本内容 | string | | " " | -| stopEvent | 阻止冒泡 |boolean | true,false | false | +| stopEvent | 阻止事件 |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| | forceSelected | 点击即选中, 选中了就不会被取消,与once的区别是forceSelected不影响事件的触发| boolean | true,false| false| | forceNotSelected | 无论怎么点击都不会被选中 | boolean| true,false | false| | disableSelected | 使能选中| boolean | true,false| false| | shadow | 是否显示阴影 | boolean| true,false| false| | isShadowShowingOnSelected| 选中状态下是否显示阴影|boolean| true,false | false| -| trigger | 被选元素要触发的事件 | | | null| -| handler | | | | | +| trigger | 被选元素要触发的事件 | string | mousedown, mouseup, click, dblclick, lclick | null| +| handler | 点击事件回调 | function | | BI.emptyFn | ## 对外方法 diff --git a/uidoc/core/widget.md b/uidoc/core/widget.md index d630ed4b1..3f3b75d16 100644 --- a/uidoc/core/widget.md +++ b/uidoc/core/widget.md @@ -1,6 +1,6 @@ # bi.widget -## Widget超类 +## 所有控件的超类 ## API ##### 基础属性 @@ -31,6 +31,8 @@ ## 对外方法 +#####(注: fineui2.0引入生命周期后，widget的实现类不需要重写setEnable，setValid等方法，会自动调用子组件的对应方法 +,一些需要在设置状态后做的额外工作可以通过重写_setXXX来实现) | 名称 | 说明 | 回调参数 | :------ |:------------- | :----- | isMounted | 判断组件是否挂载| — |