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

canvas-to-mark

v1.0.6

Published

一个小范围使用的canvas图片标注小工具

Downloads

24

Readme

canvas-to-mark

canvas图片标注工具

demo | 效果

example_lhizmZ

简介

  • 支持矩形标注、多边形标注、点标注。

  • 支持拖拽、缩放。

  • 支持控制点编辑。

  • 支持全局样式设置,单个形状样式设置。

  • 支持添加、编辑标签。

  • 每个形状有唯一 uuid,没有则自动生成。

1、使用

  • 设置 instance.createType 指定需要创建形状类型。

  • 创建矩形时,按住鼠标左键拖动完成创建。

  • 创建多边形时,鼠标左键单击添加点,双击闭合完成创建,Escape退出创建,Backspace退一步删除选择点。

  • 按住鼠标右键拖动画布。

  • 鼠标滚轮缩放画布。

  • 选中形状,Backspace删除

  • 通过 instance.dataset 查看标注结果

支持 UMD 模块规范

npm i canvas-to-mark

1、实例属性

对任意属性的修改都需要调用instance.update()更新视图

| 属性名称 | 类型 | 默认值 | 单个形状属性修改 | 说明 | | ----------------- |:-------:|:-------------------:| :--------------: |:----------:| | lock | boolean | false | | 是否锁定画布 | | MIN_WIDTH | number | 10 | | 最小矩形宽度 | | MIN_HEIGHT | number | 10 | | 最小矩形高度 | | strokeStyle | string | rgb(0, 0, 255) | 支持 | 形状边线颜色 | | fillStyle | string | rgba(0, 0, 255,0.1) | 支持 | 形状填充颜色 | | activeStrokeStyle | string | #f00 | | 选中的形状边线颜色 | | ctrlFillStyle | string | #fff | | 控制点填充颜色 | | ctrlRadius | number | 5 | | 控制点半径 | | pointRadius | number | 5 | | 圆半径 | | labelFillStyle | string | #fff | 支持 | label 填充颜色 | | labelFontSize | number | 12 | | label文字大小 | | labelFontColor | string | #000 | 支持 | label 文字颜色 | | labelMaxLen | number | 5 | | label 字符最大显示个数,超出字符将用...表示 | | rollScal | boolean | true | | 是否允许滚轮缩放 | | createType | boolean | 0 | | 0 不创建,1 创建矩形,2 创建多边形,3 点标注 | | zoomCenter | String | canvasCenter | | 缩放中心(canvasCenter 画布中心,mouse 鼠标) |

2、实例方法

| 方法名称 | 参数类型 | 说明 | | ------------- | :------: | :-----------------------------------: | | setImage | string | 添加/切换图片 | | setData | Array | 加载初始数据 | | setScale | boolean | true 放大画布,false 缩小画布 | | fitZoom | 无 | 适配图片到画布 (contain) | | update | 无 | 更新画布, 修改实例属性后要执行此方法 | | deleteByIndex | number | 根据索引删除形状 |

3、事件

| 事件名称 | 回调参数 | 说明 | | -------- | :------: | :----------------: | | select | info | 当前选中的数据 | | add | info | 当前添加的数据 | | delete | info | 当前删除的数据 | | updated | info | 发生变化的形状数据 | | load | 无 | 图片加载完成 | | error | error | 错误信息 |

注释

本项在canvas-select基础上做了些改动,感谢原作者🙏