快应用----组件（tabs，canvas）
一、tabs组件
1）tabs组件使用
tabs中封装了常见功能和效果：页签支持横向滚动，支持手势滑动切换内容页等；
tabs内部仅支持子组件 tab-bar 和 tab-content ，也可以只包含一个子组件，
a）tab-bar组件，用来包含所有页签的标题，属性mode 用来配置是否可滚动
b）tab-content组件 ，用来包含所有页签的内容，
c）tab-bar组件的第n个直接子节点对应tab-content中第n个直接子节点，具有联动效果
注：tabs内不能再嵌套tabs，可以使用 div组件模拟选项卡思路；
2）页签内容懒加载
一个内容丰富的 选项卡， 通常会包含很多页签内容。
直接使用tabs默认会加载所有页签内容，导致JS线程持续忙于渲染每个页签，无法响应用户点击事件等，造成体验困扰。
为了解决这类问题，开发者可以让页签内容在用户点击时延迟渲染（而不是整个页面初始化时渲染），可以通过if指令完成；
二、canvas组件
注：与HTML 中canvas不同的是：
a）暂不支持width,height属性，尺寸由style控制；
b）默认尺寸为 0 x 0
c）默认底色为白色，background-color无效；
d）支持margin样式，但padding,border无效
e）不能有子节点
f）获取节点的方式需要采用快应用标准 $element 方法；
1） 渲染脚本
单独的canvas组件仅仅是一个透明矩形，我们需要通过渲染脚本来进一步操作。
首先通过$element 和 id 来获取canvas组件节点，再通过getContext方法创建canvas绘图上下文；
getContext 方法的参数目前仅支持‘2d'，创建canvas绘图上下文是一个 CanvasRenderingContext2D对象；
2）绘制
a）坐标系 ：所有元素的位置都相对于原点定位，X轴向右递增，y轴向下递增；
b）填充绘制（fill）: 是指用指定的内容填满所有绘制的图形，最终生成一个实心的图案；
c）描边绘制（stroke）:沿着所有绘制的图形边缘，使用指定的内容进行描绘，最终生成的是空心图案；如果既要填充又要描边，则需要分别绘制两次完成最终图案；
3）绘制图形---矩形（三种方式）
ctx.fillRect(x,y,width,height); //填充绘制矩形
ctx.strokeRect(x,y,width,height);//描边绘制矩形
ctx.clearRect(x,y,width,height);//擦除矩形区域，相当于用白色底色填充绘制
4）绘制路径
a） 绘制线条的一些命令：
绘制直线 lineTo, 绘制圆弧 arc、arcTo,贝塞尔曲线 quadraticCurveTo、bezierCurverTo,矩形 rect
b）渐变色
渐变色对象可以使用 createLinearGradient 创建线性渐变，然后使用 addColorStop 上色；
const lineGrad1 = ctx.createLinearGradient(0,0,300,300); // (x0,y0,x1,y1) x0为渐变开始点的X坐标，y0为渐变开始点的y坐标；x1为渐变结束点的X坐标，y1为渐变结束点的y坐标；
lineGrad1.addColorStop(0,'rgb(200,0,0)');
lineGrad1.addColorStop(1,'rgb(0,0,200)');
ctx.fillStyle = lineGrad1;
5）线宽
注意点1）线条的宽度会由图形的内部向外部同时延伸，会侵占图形的内部空间；在使用较宽线条时特别需要注意图形内部填充部分是否被过渡挤压；
常用解决方法：可以尝试先描边后填充；
2）出现半渲染像素点
例如，绘制一条 (1, 1) 到 (1, 3)，线宽为 1px 的线段，是在 x = 1 的位置，向左右各延伸 0.5px 进行绘制。但是由于实际最小绘制单位是一个像素点，那么最终绘制出来的效果将是线宽 2px，但是颜色减半的线段，视觉上看就会模糊。
常用解决方法，一种是改用偶数的线宽绘制；另一种可以将线段绘制的起始点做适当偏移，例如偏移至 (1.5, 1) 到 (1.5, 3)，左右各延伸 0.5px 后，正好布满一个像素点，不会出现半像素渲染了
6）样式
a）端点样式（lineCap）
端点样式决定了线段端点显示的样式。从上之下依次为butt,round和square，其中 butt 为默认值；round和square会使得线段描绘出来的视觉长度，两端各多出半个线宽；
b）交点样式（lineJoin）
交点样式决定了图形中两线段连接处所显示的样子。从上至下依次为miter，bevel 和 round,miter为默认值
c）交点最大斜接长度（miterLimit）
在上图交点样式为 miter 的展示中，线段的外侧边缘会延伸交汇于一点上。线段直接夹角比较大的，交点不会太远，但当夹角减少时，交点距离会呈指数级增大。
miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，交点样式会自动变成了 bevel。
d）虚线
用 setLineDash方法和 lineDashOffset 属性来制定虚线样式。
drawLineDashCanvas(){
const canvas = this.$element('linedash-canvas');
const ctx = canvas.getContext('2d');
let offset = 0;
setInterval(()=>{
offset ++;
if(offset>16){
offset=0;
}
ctx.clearRect(0,0,300,300);
//设置虚线线段和间隙长度 分别为4px和2px
ctx.setLineDash([4,2]);
//设置虚线的起始偏移量
ctx.lineDashOffset = -offset;
ctx.strokeRect(10,10,200,200);
},20)
}
7）绘制文字
快应用canvas提供fillText和 strokeText 两种方法来绘文字；
ctx.fillText('Hello world',10,50);
a）字体
可以直接使用符合css font语法的字符串作为文字样式的字体属性。默认值为“10px sans-serif”
要注意，不同于web,目前快应用还无法引入外部字体文件，对于字体的选择，仅限于serif,sans-serif和monosapce;
b）对齐方式( textAlign )和 垂直对齐方式（textBaseline）
8）图像对象
为了能够在canvas中使用图片，需要使用图像对象来加载图片
const img = new Image();//新建图像对象
a）图片加载
修改图像对象的src属性，即可启动图片加载；
src既可以使用URI来加载本地图片，也使用URL加载网络图片；
//加载成功的回调
img.onload = ()=>{}
//加载失败的回调
img.onerror = ()=>{}
b）绘制图片
图片加载成功之后，就可以使用drawImage在画布中进行图片绘制了；
为避免图片未加载完成或加载失败导致填充错误，建议在加载成功的回调中进行图片填充操作
img.onload = () =>{
ctx.drawImage(img,0,0)
}
基础参数 drawImage(image,x,y) ,其中image是加载的图像对象，x和y是其在目标canvas里的起始坐标；
缩放 drawImage(image,x,y,width,height) 将图片缩放成指定的尺寸，绘制在画布上；
切片 drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight),说明：image是图像对象，前4个是定义图源的切片位置和尺寸，后4个则是定义切片的目标绘制位置和尺寸；
c）在填充和描边绘制中使用图片
图片不仅仅可以直接绘制到画布中，还可以将图片想渐变色一样，作为绘制图形的样式，在填充和描边绘制中使用；
首先，需要通过createPattern创建图元对象，然后就可以将图元对象作为样式用在图形的绘制中；
同样，为了避免图片未加载完成或加载失败导致填充错误，建议在加载成功的回调中进行操作；
例如：const imgPat = ctx.createPattern(img,'repeat');
9）合成与裁切
a）合成
不仅可以在已有的图形后面再画新图形，还可以用来遮盖指定区域，清除画布中的某些部分以及更多其他操作；
globalCompositeOperation = type;
第一种： source-over (这是默认设置，并在现有画布上下文之上绘制新图形)；
第二种：source-atop(新图形只在与现有画布内容重叠的地方绘制)
第三种：source-in(新图形只在新图形和目标画布重叠的地方绘制，其他都是透明的)
第四种：source-out（在不与现有画布内容重叠的地方绘制新图形）
第五种：destination-over (在现有的画布内容后面绘制新的图形)
第六种：destination-atop(现有的画布只保留与新图形重叠的部分，新的图形是在画布内容后面绘制的)
第七种：destination-in（现有的画布内容保持在新图形和现有画布内容重叠的位置，其他都是透明的）
第八种：destination-out(现有内容保持在新图形不重叠的地方)
第九种：lighter(两个重叠图形的颜色是通过颜色值相加来确定的)
第十种：copy（只显示新图形）
第十一种：xor(图像中，那些重叠和正常绘制之外的其他地方都是透明的)
