kdraw v1.0.1

kdraw

kdraw是一个让你更加方便的使用canvas的框架，里面封装了canvas中的各个绘图的功能

绘制

绘制需要用到Kdraw这个类

画布参数：

*
* el:canvas图形的容器，可以兼容css3中的选择器
* width:画布的宽度
* height:画布的高度
* position:图像的左上角坐标
* 

主要方法：

*   
* fillText：绘制文本
* strokeText：文本描边
* polygon：绘制多边形
* arc：绘制圆
* img：绘制图片
* 

• 绘制文本

  用法：

  const draw1 = new Draw({
    el: '.text'
  });
  draw1.
  fillText({
    fontSize: '16px',
    content: '默认样式',
  })

  参数：

    *
    * text.content:绘制文本的内容
    * text.fontFamily:绘制文本的字体
    * text.fontSize: 绘制文本的字体大小
    * text.fillStyle:填充文本的颜色
    * text.strokeStyle:文本描边的颜色
    * text.textBaseline:文本基线对齐选项
    * text.maxWidth:绘制文本的最大宽度
    * text.x:文字左上角的X坐标
    * text.y:文字左上角的Y坐标
    * 

• 绘制图形

  用法：

  • 可以绘制单个图形

    
    //多边形
    const draw2 = new Draw({
      el: '.polygon'
    });
    draw2.
    polygon({
      newobj: false,
      fill: false,
      stroke: true,
      vertex: [
        [200, 0],
        [200, 100],
        [300, 100],
        [300, 0]
      ]
    })
    //圆
    draw2
    .arc({
      newobj: false,
      fill: false,
      close: false,
      endAngle: Math.PI / 2
    });

  • 也可以连续绘制图形

    
    const draw2 = new Draw({
      el: '.polygon'
    });
    draw2.
    polygon({
      close: false,
      fill: false,
      stroke: true
    }).
    polygon({
      newobj: false,
      fill: false,
      stroke: true,
      vertex: [
        [200, 0],
        [200, 100],
        [300, 100],
        [300, 0]
      ]
    }).
    polygon({
      close: true,
      newobj: true,
      fill: false,
      stroke: true,
      vertex: [
        [0, 150],
        [0, 250],
        [100, 250],
        [100, 150]
      ]
    });
    const draw3 = new Draw({
      el: '.arc'
    });
    draw3.
    polygon({
      close: false,
      fill: false,
      stroke: true
    }).
    polygon({
      close: false,
      newobj: false,
      fill: false,
      stroke: true,
      vertex: [
        [200, 0],
        [200, 100],
        [300, 100],
        [300, 0]
      ]
    }).
    arc({
      newobj: false,
      fill: false,
      close: false,
      endAngle: Math.PI / 2
    });

参数:

    * polygon.newobj:是否是新绘制的多边形
    * polygon.fill:是否需要填充
    * polygon.close:是否需要关闭
    * polygon.stroke:是否需要描边
    * polygon.fillStyle:多边形的填充样式
    * polygon.strokeStyle:多边形的描边样式
    * polygon.lineWidth:多边形的描边线条粗细
    * polygon.vertex:多边形的顶点坐标，数据类型是二位数组，如三角形的话，可以这样定义[[20,50],[20,80],[50,30]]
    * arc.x:圆心的X坐标
    * arc.y:圆心的Y坐标
    * arc.radius:圆的半径
    * arc.startAngle:圆的起始弧度
    * arc.endAngle:圆的终点弧度
    * arc.anticlockwise:是否顺时针画圆
    * arc.newobj:是否是新绘制的圆
    * arc.fill:是否需要填充
    * arc.close:是否需要关闭
    * arc.stroke:是否需要描边
    * arc.fillStyle:圆的填充样式
    * arc.strokeStyle:圆的描边样式
    * arc.lineWidth:圆的描边线条粗细

        

        

• 绘制图片

  用法:

  const draw4 = new Draw({
    el: '.img'
  });
  draw4.img({
    sx: 0,
    sy: 0,
    sWidth: 400,
    sHeight: 400
  });

参数:

* img.src:图片的路径
* img.dx:目标画布的左上角在目标canvas上 X 轴的位置
* img.dy:目标画布的左上角在目标canvas上 Y 轴的位置
* img.dWidth:在目标画布上绘制图像的宽度
* img.dHeight:在目标画布上绘制图像的高度
* img.sx:需要绘制到目标上下文中的，源图像的矩形选择框的左上角 X 坐标
* img.sy:需要绘制到目标上下文中的，源图像的矩形选择框的左上角 Y 坐标
* img.sWidth:需要绘制到目标上下文中的，源图像的矩形选择框的宽度
* img.sHeight:需要绘制到目标上下文中的，源图像的矩形选择框的高度
    

画布粒子化

粒子化需要用到新的类Particle

主要参数：

• draw:Draw实例对象里面的参数对象
• emitter:粒子发射器
  • type:发射器类型
  • width:宽度
  • height:高度
  • x:中心x坐标
  • y:中心y坐标
• type:粒子的类型，目前支持square，circle两种类型
• speed:粒子的运动速度
• summary:粒子的总数量
• model:粒子运动形式，1为聚合，0为分散
• duration:总的运动时间,误差为100
• delay:粒子运动的延时范围，误差为100
• easing:缓动类型
  • 缓动类型: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back and Bounce
  • 缓动模式.In, Out and InOut
  • 使用方式:TWEEN.Easing.Quadratic.In

主要方法：

• animate：粒子的运动

用法：

const Particle = require('../src/js/particle.js');
const draw7 = new Draw({
  el: '.ani-particle3'
});
draw7.img({
  src: require('file-loader!../src/images/logo.png'),
  sx: 0,
  sy: 0,
  sWidth: 400,
  sHeight: 400
}, function(draw) {
  new Particle(draw).animate({
    space: 2,
    model: 0,
    emitter: {
      x: 200,
      y: 100,
      width: 0,
      height: 0,

    }
  });
});