cma_dezier

自定义抛物线组件

Installation

$npm i cma_dezier --save

In vue

import cma_dezier from 'cma_dezier'

const arrLeftTop = [
  { x: 346, y: 191 },
  { x: 237, y: 60 },
  { x: 142, y: 65 },
  { x: 58, y: 94 }
]
const arrLeftBottom = [
  { x: 342, y: 234 },
  { x: 205, y: 189 },
  { x: 33, y: 236 },
  { x: 3, y: 565 }
]
const arrRightTop = [
  { x: 457, y: 219 },
  { x: 551, y: 35 },
  { x: 700, y: 74 },
  { x: 784, y: 130 }
]
const arrRightBottom = [
  { x: 471, y: 242 },
  { x: 611, y: 150 },
  { x: 818, y: 291 },
  { x: 847, y: 523 }
]
dezier.init({
  parentId: 'home-page',
  width: '860',
  height: '710',
  trackList: [
    arrLeftTop,
    arrLeftBottom,
    arrRightTop,
    arrRightTop,
    arrRightBottom
  ]
})

方法说明

/**
  * 初始化，并直接开启抛物线轨迹
  * @param {*} initObj 
  * parentId canvas的父类ID名称 必传
  * width canvas的宽 必传
  * height canvas的高 必传
  * trackList 运动轨迹数组 必传
  * style canvas的style 可选
  * showBall 是否显示发光球体 可选
  * drawCallback 画完抛物线后调用的函数 可选
  * color 色值 rag 格式 可选
  * drawBezierT 控制抛物线时间 可选
  * drawHeadLightT  控制抛物线发光球体时间 可选
*/

dezier.init(initObj) 


/**
 * 抛物线轨迹运动停止，一般都是在页面销毁时调用
 */
beforeDestroy() {
  dezier.stop()
},