JSPM

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: 0.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

| 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

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