canvas-mark-view

1 安装

npm install canvas-mark-view --save

2 用法

<canvas-mark-view
            ref="readerContent"
            :pages="pages"
            :config="config"
            :readOnly="readOnly"
            :playLayer="layer"
            :layer="layer"
></canvas-mark-view>

3 属性列表

<1> pages

页面数据，因为是按需加载，所以不要一次将所有的数据返回，保存也是监听页面编辑状态，没有编辑的页面不会调用保存的方法

类型 Array

{
    id: '', //id
    width: 940, //宽
    height: 1389, //高
    layerImageOption: {},//导出的编辑图层图片配置，有的话会导出(editLayerPng)，为null的话不导出
    totalImageOption: {}, //导出的全部图层图片配置，有的话会导出(totalLayerData)，为null的话不导出
    getPageDataFunction:async (pageId)=>{
     //返回JSON数据，是fabric的JSON数据结构
     return {
         backgroundImage:'',
         layers:{
             layerA:[],
             layerB:[]
     }
    },
    /**
    * pageId:页面ID
    * pageData：页面的数据
    * editLayerPng：编辑图层保存的png图片base64
    * totalLayerData：全部图层保存的png图片base64
    */
    savePageDataFunction:async (pageId, pageData, editLayerPng,totalLayerData)=>{

     
     
     return  true
    }
}

<2> config

阅读器的配置

{
    showLeftMenu: true, //是否显示左边的菜单，若要自己定制的话可以隐藏
    leftMenus: [ //左边菜单列表
        {
            class:'',//自定义的class
            command: { //命令 ，所有的命令列表请查看下文 《命令列表》
                type: 'mouse',
                config: {}
            },
            icon: 'fas fa-mouse-pointer' //图标的class （i标签）
        }
    ],
    showPageIndex: true //是否显示页面索引
}

<3> readonly

是否是只读状态

类型 Bool

默认 false

<4> layer

不填的话默认为“default”， 当前编辑的图层，非当前图层的数据无法编辑和删除

类型 String

默认 default

<5> playLayer

不填的默认播放当前编辑的图层，点击播放的时候的图层

类型 String

默认

4 方法

阅读器暴露的方法，可通过 this.$refs.readerContent.methodName(XXX)这种方式来调用

<1> scrollTo(pageIndex, pageTop)

滚动到对应的页面和对应页面的 y 高

pageIndex (number) 对应的页面索引（从 0 开始）

pageTop (number) 滚动到当前页的 y 轴高度，相对应的是 pageIndex 内部的 y 高度，不是整个画布的高度哦

返回 promise

<2> addChild(pageIndex,childOptions)

在对应页面添加指定的对象

pageIndex(number) 添加的页面

childOptions(object) 对象的属性，这个参考 fabric 的对象的属性 json

withScrollTo (boolean) 添加之后是否滚动到对应页，默认不滚动

返回 Promise object 是 fabric 的对象属性信息，里面包含 id，和 layer（所在的图层）

<3> async removeChildById(pageIndex, id)

移除对应页面中的 object

pageIndex(number) 页面索引

id(srting) 对象 id