# canvas-mark-view

## 1 安装

```
npm install canvas-mark-view --save
```

## 2 用法

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

## 3 属性列表

##### <1> pages

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

> 类型 Array

```js
{
    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

阅读器的配置

```javascript
{
    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> object 是 fabric 的对象属性信息，里面包含 id，和 layer（所在的图层）

##### <3> async removeChildById(pageIndex, id)

移除对应页面中的 object

> pageIndex(number) 页面索引

> id(srting) 对象 id
