matchman 简介

matchman 是用于展示火柴人骨架数据的 jssdk, 提供轻量级的方式展示

使用步骤

npm i ty_matchman -S

import  Matchstick from 'ty_matchman'
let matchStick = new Matchstick(el,options);
const call = (val) => {
    console.log("call--->", val);
};
// dataSource 的数据结构如下
const dataSource = {
  data: {
    alert: {
      skeletonFile: '', // 火柴人骨架数据
      backgroundUrl: '', // 背景图片
    }
  }
}
matchStick.startDraw(dataSource, call);

el 外部 dom 容器

html 结构
<div class="match_container"> </div>
js 获取el
const el = document.querySelector(".match_container");

options 介绍

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | --------- | ------ | ------ | ------ | | width | canvas 宽 | number | true | 960 | | height | canvas 高 | number | true | 540 | | frameNum | 初始帧数 | number | true | 0 |

methods 说明

• matchStick 为 new Matchstick()实例对象
• startDraw() 方法
• @description: 开始绘制方法
• @params: datasource: object; callback:function 回调函数
• @return {void} matchStick.startDraw(datasource, callback);

• stopDraw() 方法
• @description: 停止绘制方法
• @return {void} matchStick.stopDraw();

插件机制

• registerPlugins() 方法
• @params: plugin: {action: function};
• 该方法是注册插件的方法；
• plugin 插件 需要是一个包含 action 方法的对象；action 方法中依赖注入 Matchstick 实例对象，

使用实例

   let matchStick = new Matchstick(el,options);
   const plugin = {
    action(matchInstance){
      console.log('matchInstance', matchInstance)
      // 获取 matchStick 上下文信息，扩展方法
      // 扩展暂停方法
      matchInstance.pause = () => {

      }
    }
   }
   // 组册单个插件
   matchStick.registerPlugins(plugin);
   // 组册多个插件
   matchStick.registerPlugins(plugin, plugin1,plugin2);
   // 或者
   matchStick.registerPlugins(...[plugin, plugin1,plugin2]);