依赖安装
npm i git+http://git.cy-dev.com:8099/maoxian/ruitu-magic-canvas.git

引入依赖
main.js 或 plugins.js
import RuituMagicCanvas from 'ruitu-magic-canvas'
Vue.use(RuituMagicCanvas)

页面使用
<CyCanvas ref="canvas" v-model="data" @on-change="onChange"/>

props:
  show: 是否显示组件, true|false
  data: 数据对象，
    {
      // 画布参数
      w: 1024, // 画布大小，宽度，单位px
      h: 1920, // 画布大小，高度，单位px
      bc: '', // 画布背景颜色
      bg: '', // 画布背景图片，如果设置了图片，颜色属性（bc）无效

      // 图层信息
      child: [
        { // 图层对象参数
          t: '', // type，(i：图片, p：手机, sp：侧面手机, va：可视区域)
          w: 100, // 单位px
          h: 100, // 单位px
          x: 0, // 坐标
          y: 0, // 坐标
          z: 1, // 层级
          o: 1, // 透明度
          bg: '', // 背景图
          deg: 0, // 旋转角度
          mbg: '', // 遮罩图片
          bbg: '', // 顶部图片
        }
      ],
    }

methods
  setCardData(data, index)
    设置图层信息
    data:图层对象数据
    index:画布索引，如果传空字符串''，则表示新增图层

  deleteCard(index)
    删除图层
    index：图层

  getImage()
    导出图片
  
  selectIndex(index)
    定位到某个图层，定位的图层会显示托转区域
    index：图层索引

Events
  on-change
    说明：图层索引改变，或者图层内容改变的时候会触发
    回调参数：{ index, data }，index：图层索引，data：对应图层对象

