paper-pen.js

canvas、 annotation、annotate、Rect、Polygon、Line、Dot、Text、Matrix.

• Quick start

npm i paper-pen --save

<script src='https://unpkg.com/[email protected]/dist/paper-pen.esm.min.js'></script>

online example

• features (待实现)

  • mask 超像素标注
  • group 编组
  • text editor

• demo

    //demo.html
    <canvas id='c'></canvas>
    // demo.js
    import { Canvas } from 'paper-pen'
    let paperPen = new Canvas(
        '#c', // id 、class string (#c, .c)| HTMLCanvasElement
        { // options
            width: 1600, // canvas width
            height: 700, // canvas height
            preventDefault: true, // prevent right click
            selection: true, // can or not renderTop
            skipFindTarget: false // skip find target， default false
        }
    )
    paperPen.setBackground('Your Image Url') // set background
    paperPen.on('img:load', () => {
        // do anything
    })

Now you hava a 1600 * 700 canvas and set a background image for it.

• 是否开启滚轮缩放 (Whether to enable wheel scaling)

wheel: {scale: true}

    import { Canvas } from 'paper-pen'
    let canvas = new Canvas({
        '#c',
        {
            wheel: {
                scale: true, // 开启此项，会使滚轮支持画布缩放
                scroll: true, // 开启此项，会使鼠标滚轮在画布中禁用滚动条
            }
        }
    })

• 是否开启鼠标右键拖动画布(Do you want to enable the right mouse button to drag the canvas)

rightMove: true

import { Canvas } from 'paper-pen'
    let canvas = new Canvas({
        '#c',
        {
            rightMove: true
        }
    })

• How to draw other shape(Rect、Polygon、Line、Point、and so on.)

  • For example --- Rect

    import { Rect, Polygon } from 'paper-pen'
    let rect = new Rect({
        left: 300,
        top: 300,
        width: 100,
        height: 100,
        stroke: '#000',
        opacity: 0.5
    })
    paperPen.add(rect)
  
    let poly = new Polygon({
        points: [{x: 100, y: 100}, {x: 200, y:100}, {x:150, y: 350}],
        stroke: '#0f0',
        opacity: .5,
        fill: '#00f',
        lineWidth: 5
    })
    paperPen.add(poly)

  Now you get a Rect

  this Library provide (Rect、Polygon、Line、Point、CrossLine、Text、Ruler、Arrow), Of course you can custom other Shapes by this Library.

API

• class

need to call with 'new' new Rect() new Line()...

| name | description | | :--------| :------| | Canvas | Canvas Instance | Rect | draw Rectangle, Instance | | Polygon | draw Polygon, Instance | | Point | draw Point, Instance | | Line | draw Line, Instance | | CrossLine | draw CrossLine, Instance | | Text | draw Text, Instance | | Ruler | draw Ruler, Instance | | Arrow | draw Arrow, Instance | | Matrix | Matrix transform |

• Canvas properties

| name | type | description | | :----- | :------| :------ | | width | number | canvas width | | height | number | canvas height | | skipFindTarget | boolean | skip find element | preventDefault | boolean | prevent right click | | selection | boolean | can or not renderTop | transformMatrix | object | matrix {a,b,c,d,e,f} | _objects | array | [shape, shape] | imageFillMode | string | 'contain'、'cover',针对backgroundImage | | wheel | object| 鼠标滚轮相关 | | wheel.scale | boolean | 是否开启滚轮缩放，default false | | wheel.scroll | boolean | 是否缩放时禁用浏览器滚动条 default false | | wheel.max | number | 缩放最大范围 | | wheel.min | number | 缩放最小范围 | | rightMove | boolean | 右键移动画布 default false |

• shape common properties

| name | type | description | | :----- | :------| :------ | | stroke | string | canvas strokeStyle | | fill | string | canvas fillStyle | | lineWidth | number | lineWidth | | opacity | number | 0-1 globalAlpha | | cornerSize | number | | cornerStyle | string | 'square | circle' | cornerBorderColor | string | color | cornerColor | string | | cornerOpacity | number | 0 - 1 | | lockMove | boolean | | displayGraph | boolean | 用来决定是否显示当前图形default true | | needControl | boolean | 是否显示控制点 default true |

• shape common methods

| name | type | description | | :----- | :------| :------ | | getBoundingBox | | 获取包围盒 | | getCommonConfig | | 获取控制点默认配置 |

• rect properties

| name | type | description | | :----- | :------| :------ | | left | number | | | top | number | | | width | number | width | | height | number | height |

-polygon properties

| name | type | description | | :----- | :------| :------ | | points | Array<{x: number, y: number}> | | | needArrow | boolean | 是否需要起始箭头 | | needCenterControl | boolean | 是否需要线段中点 | | centerPointsStyle | string | 'square'| 'circle' 中点样式 | | centerPointsSize | number | 中点大小 | | centerPointsStroke | string | 中点描边颜色 | | centerPointsFill | string | 中点填充颜色 |

• instance methods

| name | description| parameter | return | | :-----| :-----| :----------| :--------- | | setBackground | set canvas background | imgUrl|Image|Video|Canvas|bitmap | | getPointer | Obtain the coordinates of the mouse on the canvas | null | {x number, y:number} | add | Add elements to object list | DrawObject | | | remove | remove elements from object list | DrawObject | | | setActiveObject | set the current object to active | DrawObject| | | setCursor | set the cursor of canvas | css cursor | | | resetActive | Deactivate all objects | null| | | toJSON | get all elements on the canvas | null | [{},{}] | | requestRenderAll | clear all Objects on the canvas, draw all objects on the canvas | null | | toDataUrl | 将画布转换为图片（Convert Canvas to Pictures）| null | {imgData, imgUrl} | toBitMap | 将画布转换为单通道位图（Convert the canvas to a single channel bitmap）| [{r:number,g: number,b:number,a?:number},...]|null | new Promise (ImageBitmap) 不传参数，默认转为二值图（黑白） | off | 卸载指定事件 | (事件名称，回调函数) | | | offAll | 卸载监听事件， 不传参，卸载所有实例监听事件 | 事件名称，如：'mouse:down',将会卸载所有的mouse:down事件 | |

• eventListener

| name | description | callback | | :-----| :----- | :-----| | mouse:down | 鼠标按下事件 | | mouse:move | 鼠标移动事件 | | mouse:wheel| 鼠标滚轮事件 | | mouse:up | 鼠标抬起事件 | | img:load | 当背景图是在线地址时，等图片加载完成后的回调 | | render:before | 画布元素渲染前 | | render:after | 画布元素渲染后 | | obj:add | 元素被添加到画布后 | | obj:remove | 元素从画布中删除后 | | obj:edit | 元素被编辑后 | | obj:move | 元素被移动后 |

    // paper-pen为开发者提供了mouse:down 、mouse:move、mouse:up、img:load、after:render事件回调。
    paperPen.on('mouse:down', opt => {
        let pos = paperPen.getPointer(opt) // 获取鼠标按下的点映射到当前画布的真实坐标位置。
        console.log(pos)
        // 您能在此处做想要做的业务。
    })
    paperPen.off('mouse:down') // 此方法会去掉画布上所有的mouse:down事件, 最好指定第二个参数来删除对应的事件。
    paperPen.on('mouse:down', handleMouseDown)
    paperPen.off('mouse:down', handleMouseDown)

• Matrix， Support chain operation（支持链式操作）

| name | decription | params | type | :----- | :---- | :------ | :----- | | translate | translate matrix | x , y | number | scale | Multiples corresponding to x-axis and y-axis scaling | x, y | number | scaleU | scale Matrix | scaler | number | rotate | rotate matrix | radian| number | transform | transform matrix | a,b,c,d,e,f | number | applyToPoint | Apply the current matrix to point | x, y | number

    import { Matrix } from 'paper-pen'
    let mat = new Matrix() /*
        默认生成单位矩阵
        1, 0, 0,
        0, 1, 0,
        0, 0, 1
    */
    mat.translate(10, 10) // (1, 0, 0, 1, 10, 10) 返回新的矩阵
    mat.translate(100, 100).scale(1.5, 2) // 这里的换算都是用矩阵的叉乘。