zoukankan      html  css  js  c++  java
  • 快应用----组件(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(图像中,那些重叠和正常绘制之外的其他地方都是透明的)

                                        

  • 相关阅读:
    SharePoint 2013 配置基于表单的身份认证
    SharePoint 2013 场解决方案包含第三方程序集
    SharePoint 2010 站点附加数据升级到SP2013
    SharePoint 2013 在母版页中插入WebPart
    SharePoint 2013 搭建负载均衡(NLB)
    SharePoint 部署解决方案Feature ID冲突
    SharePoint 2013 配置基于AD的Form认证
    SharePoint Server 2016 Update
    SharePoint 2013 为用户组自定义EventReceiver
    SharePoint 2013 JavaScript API 记录
  • 原文地址:https://www.cnblogs.com/sunqq/p/11227478.html
Copyright © 2011-2022 走看看