canvas-mark-view

3.4.0 • Public • Published

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

/canvas-mark-view/

    Package Sidebar

    Install

    npm i canvas-mark-view

    Weekly Downloads

    16

    Version

    3.4.0

    License

    MIT

    Unpacked Size

    9.88 MB

    Total Files

    15

    Last publish

    Collaborators

    • tristanwong