npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sp-image-annotation

v1.0.59

Published

A tool for image annotation

Downloads

38

Readme

sp-image-annotation

算盘组件中用于图片标定的画图工具。

支持:

  • 线段
  • 矩形
  • 圆形
  • 同心圆
  • 遮罩
  • 坐标系

示例

  • 创建节点
<div id="camera-image"></div>
  • 初始化画图工具
import { Annotation } from "sp-image-annotation";

const annotation = new Annotation({
  container: 'camera-image',
  width: imageSize.width,
  height: imageSize.height,
  imgSrc: './demo/demo.jpg',
  onBeforeAddShape: (shapeType, extra) => {
    console.log('before add shape:', shapeType, extra);
    return true;
  },
  onShapeAdded: (shapeType, extra) => {
    console.log('shape added:', shapeType, extra);
    return true;
  },
  onShapeRemoved: shape => {
    console.log('shape removed:', shape);
  },
});
  • 页面结果

配置项

  • container: string

    DOM 节点 id

  • shapes?: string[]

    配置工具栏上支持的图形按钮,缺省是

    ["RECTANGLE", "MASK", "CIRCLE", "LINE", "COORDINATE", "CONCENTRIC_CIRCLE"]

    如只需要加载 矩形 和 圆形 两种工具的按钮,可如下传参

      new Annotation({
        ...
        shapes: ['RECTANGLE', 'CIRCLE'],
        ...
      })

    图形类型详见框选图形

  • width?: number

  • height?: number

    图片的宽和高,单位为像素值

  • imgSrc?: string

    图片的 URL

  • onBeforeAddShape?: (shapeType: string, extraData: any) => boolean

    在添加框选区域前,触发该回调方法,入参为添加的类型及相关数据。

    如果该回调方法中返回 false,则图形不会被添加。

  • onShapeAdded?: (shapeType: string, extraData: any) => boolean;

    在添加框选区域后,触发该回调方法,入参为添加的类型及相关数据。

    如果该回调方法中返回 false,则图形不会被添加。

  • onShapeRemoved?: (shape: ShapeType) => boolean;

    在删除框选区域后,触发该回调方法,入参为添加的类型及相关数据。

    如果该回调方法中返回 false,则图形不会被删除。

框选图形

支持图形列表

线段

  • 数据格式

    coordinate 记录线段上各个点的坐标,x / y 坐标成对出现,即 [x0, y0, x1, y1, x2, y2]

    { "type": "LINE", "coordinate": [300, 150, 350, 200, 450, 120, 300, 150] }

矩形

  • 数据格式

    coordinate 记录矩形的左上角和矩形的宽和高,即 [leftTopX, leftTopY, width, height]

    { "type": "RECTANGLE", "coordinate": [100, 10, 100, 100] }

圆形

  • 数据格式

    coordinate 记录圆形的圆心坐标及半径长度,即 [cx, cy, r]

    { "type": "CIRCLE", "coordinate": [200, 200, 100] }

同心圆

  • 数据格式

    coordinate 记录圆心坐标及内圆半径、外圆半径,即 [cx, cy, innerR, outerR]

    { "type": "CONCENTRIC_CIRCLE", "coordinate": [600, 200, 10, 100] }

遮罩

  • 数据格式

    coordinate 记录遮罩的左上角和矩形的宽和高, 即 [leftTopX, leftTopY, width, height]

    { "type": "MASK", "coordinate": [100, 120, 100, 100] }

坐标系

  • 数据格式

    coordinate 记录坐标系原点坐标和选角角度,即 [cx, cy, rotation]

    { "type": "COORDINATE", "coordinate": [600, 50, 90] }

数据格式

输出数据包含了各个图形的 id、type 和 coordinate。

[
  {
    "id": "e0190095-9a6c-450a-8f2e-135f26420cc6",
    "type": "RECTANGLE",
    "coordinate": [100, 10, 100, 100]
  },
  {
    "id": "b759ca53-2c97-463d-bcb4-1d7cfbf31b07",
    "type": "MASK",
    "coordinate": [100, 120, 100, 100]
  },
  {
    "id": "c8494868-b7e7-4eab-89dd-4ab1d428e050",
    "type": "CIRCLE",
    "coordinate": [200, 200, 100]
  },
  {
    "id": "23ac7e53-64e4-46c1-bded-2e5dcade1d17",
    "type": "LINE",
    "coordinate": [300, 150, 350, 200, 450, 120, 300, 150]
  },
  {
    "id": "5c04faa9-308b-4a42-98ea-43427a1e07cd",
    "type": "COORDINATE",
    "coordinate": [600, 50, 90]
  },
  {
    "id": "78fb3601-d588-4d80-b96e-a94e3a72c39a",
    "type": "CONCENTRIC_CIRCLE",
    "coordinate": [100, 100, 10, 100]
  },
  {
    "id": "29aea1a8-3d27-4321-9a10-2c9e36b784e1",
    "type": "LINE",
    "coordinate": [735.1237114501049, 54.419642857142854]
  }
]

事件

事件列表

  • imageloaded

    图片加载完成后,触发该事件,可用于更新图形数据等。

    示例

    var spImageAnnotation = new SpImageAnnotation.Annotation({
      ...
    });
    
    spImageAnnotation.on('imageloaded', function() {
      spImageAnnotation.load([
        { type: 'RECTANGLE', coordinate: [100, 10, 100, 100] },
        { type: 'MASK', coordinate: [100, 120, 100, 100] },
        { type: 'CIRCLE', coordinate: [200, 200, 100] },
        { type: 'LINE', coordinate: [300, 150, 350, 200, 450, 120, 300, 150] },
        { type: 'COORDINATE', coordinate: [600, 50, 90] },
        { type: 'CONCENTRIC_CIRCLE', coordinate: [600, 200, 10, 100] },
      ]);
    });
    
  • shape:select

    在图形被选中时,触发该事件。

API

  • load

    加载图形数据

    var spImageAnnotation = new SpImageAnnotation.Annotation({
      ...
    });
    
    spImageAnnotation.on('imageloaded', function() {
      spImageAnnotation.load([
        { type: 'RECTANGLE', coordinate: [100, 10, 100, 100] },
        { type: 'MASK', coordinate: [100, 120, 100, 100] },
        { type: 'CIRCLE', coordinate: [200, 200, 100] },
        { type: 'LINE', coordinate: [300, 150, 350, 200, 450, 120, 300, 150] },
        { type: 'COORDINATE', coordinate: [600, 50, 90] },
        { type: 'CONCENTRIC_CIRCLE', coordinate: [600, 200, 10, 100] },
      ]);
    });
    
  • getShapeData

    获取图形数据