fineui/uidoc/base/canvas.md

bi.canvas

canvas绘图,基类BI.Widget

{% method %} source

{% common %}

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
     }]
 })

{% endmethod %}

对外方法

名称	说明	回调参数
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)分别表示原点的横坐标，纵坐标，半径以及颜色 | | hollow | 填充中空的路径 | | | solid | 填充实心的路径 | | | gradient | 绘制渐变色 | (x0, y0, x1, y1, start, end) | | reset | 重置画布 | —| | stroke | 绘制 | callback |

---