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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
3.4.00latest

Version History

VersionDownloads (Last 7 Days)Published
3.4.00
3.3.110
3.3.100
3.3.90
3.3.81
3.3.60
3.3.41
3.3.20
3.3.00
3.2.540
3.2.530
3.2.520
3.2.500
3.2.480
3.2.470
3.2.460
3.2.440
3.2.430
3.2.420
3.2.410
3.2.400
3.2.391
3.2.380
3.2.370
3.2.360
3.2.351
3.2.340
3.2.331
3.2.320
3.2.310
3.2.300
3.2.290
3.2.280
3.2.270
3.2.260
3.2.250
3.2.240
3.2.230
3.2.220
3.2.201
3.2.190
3.2.180
3.2.160
3.2.150
3.2.140
3.2.120
3.2.110
3.2.100
3.2.90
3.2.81
3.2.70
3.2.60
3.2.40
3.2.30
3.2.20
3.2.10
3.2.00
3.1.100
3.1.90
3.1.81
3.1.60
3.1.50
3.1.40
3.1.30
3.1.20
3.1.10
3.1.00
3.0.160
3.0.140
3.0.130
3.0.120
3.0.110
3.0.100
3.0.90
3.0.80
3.0.70
3.0.60
3.0.50
3.0.40
3.0.30
3.0.20
3.0.10
3.0.00
2.1.50
2.1.4-fix1
2.1.40
2.1.30
2.1.20
2.1.10
2.1.00
2.0.120
2.0.110
2.0.100
2.0.91
2.0.80
2.0.70
2.0.61
2.0.50
2.0.40
2.0.30
2.0.3-prev0
2.0.2-prev0
2.0.1-prev1
2.0.0-prev0
0.1.141
0.1.130
0.1.120
0.1.110
0.1.100
0.1.91
0.1.80
0.1.71
0.1.60
0.1.50
0.1.41
0.1.20
0.1.10
0.1.00

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