paper-pen v0.0.8-alpha

paper-pen.js

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

• Quick start

npm i paper-pen --save

<script src='https://unpkg.com/paper-pen@0.0.5/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()...

• Canvas properties

• shape common properties

• shape common methods

• rect properties

-polygon properties

• instance methods

• eventListener

    // 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（支持链式操作）

    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) // 这里的换算都是用矩阵的叉乘。