svg ink tool

this is demo,thanks to vercel.app!

svg-mark is a svg ink tool developed based on Vue3.2 and TypeScript，which supports two import methods, umd and esmodule,but CSS files need to be imported manually. The usage method is as follows:

Use your favorite package manager, pnpm is recommended

pnpm add svg-mark

After treeshaking, the size is less than 40KB, and it relies on vue3 to manage data internally.A zero-dependency version will be updated later, and its size will be smaller

Import components and style files in code:

import { PaintArea } from "svg-mark";
import "svg-mark/dist/style.css";

PaintArea is a drawing area component. The design idea of ​​this component is "overlay", so it needs a prop to control whether it is displayed or not. It is turned off by default. You can change the display of this "ink layer" at will, and the ink will not be cleared when it is closed.

const paintMode = ref(false);

<PaintArea :paint-mode="paintMode" />

Current features(v1.0.5)

Supports five drawing tools: text, free curve, straight line, arrow, and rectangle. In the selection mode, you can click an ink, press Delete or Backspace to delete the ink, press Ctrl to select multiple, the selected ink will be highlighted, and one key is supported. Clear the canvas.

follow-up development plan

1. Support exporting and importing ink data as JSON;
2. Support ink color modification;
3. Support multiple ink combinations and ungroups;
4. Support ink stroke thickness setting;
5. Customize toolbar via slots;

If you have good ideas or needs, you can contact me by e-mail [email protected]

SVG 墨迹绘图工具

一个基于Vue3.2和TypeScript开发的svg墨迹工具，支持umd和esmodule两种导入方式，CSS文件需要手动导入，使用方式：

使用你喜欢的包管理器，推荐pnpm

pnpm add svg-mark

treeshaking后只有不到40KB的大小，内部依赖了vue3管理数据。之后会更新一个零依赖的版本，它的体积会更小.

在代码中导入组件和样式代码：

import { PaintArea } from "svg-mark";
import "svg-mark/dist/style.css";

PaintArea是绘图区域组件，本组件的设计思路是“覆盖层”，故需要一个prop控制显示与否，默认关闭，你可以任意变更这个“墨迹层”的显示与否，关闭时不会清除墨迹。

const paintMode = ref(false);

<PaintArea :paint-mode="paintMode" />

当前功能(v1.0.5)

支持文字、自由曲线、直线、箭头、矩形五种绘图工具，选择模式下可点击某墨迹，按下Delete或Backspace删除墨迹，按住Ctrl可多选，被选中的墨迹会高亮，支持一键清除画布。

后续开发规划

1. 支持导出、导入墨迹数据为JSON；
2. 支持墨迹颜色修改；
3. 支持多个墨迹组合、取消组合；
4. 支持墨迹笔画粗细设置；
5. 通过插槽自定义工具栏；

如果您有好的想法或需求，可以发邮件联系我[email protected]