{"repo":"typsusan-zzz/canvas-drawing-editor","free":true,"listed":false,"github":"https://github.com/typsusan-zzz/canvas-drawing-editor","clone":"git clone https://github.com/typsusan-zzz/canvas-drawing-editor.git","description":"强大的 Canvas 画布编辑器 Web Component，零依赖，支持 Vue 2/3、React、Angular 和原生 HTML | A powerful canvas-based drawing editor Web Component - Zero dependencies, works with Vue 2/3, React, Angular, and vanilla HTML","language":"TypeScript","stars":416,"topics":["angular","canvas","drawing-editor","image-editor","react","typescript","vue","web-component"],"license":"MIT","category":"ui-components","readme_excerpt":"Canvas Drawing Editor 中文 English GitHub : https://github.com/typsusan-zzz/canvas-drawing-editor NPM : https://www.npmjs.com/package/canvas-drawing-editor 在线文档 / Documentation : https://typsusan-zzz.github.io/canvas-drawing-editor/ --- 中文 一个强大的基于 Canvas 的画布编辑器 Web Component， 零依赖 ，支持 Vue 2/3 、 React 、 Angular 和 原生 HTML 。 ✨ 功能特性 - 🎨 绑图工具 - 画笔、矩形、圆形、线条、箭头、多边形、文本 - 🖼️ 图片支持 - 导入和编辑图片，支持亮度/对比度/模糊等滤镜 - 🔍 缩放平移 - 鼠标滚轮以光标为中心缩放，拖拽平移画布 - ↩️ 撤销/重做 - 完整的历史记录支持（Ctrl+Z / Ctrl+Y） - 📚 图层管理 - 图层上移/下移/置顶/置底，可见性和锁定控制 - 🔗 组合/解组 - 多选对象组合（Ctrl+G）和解组（Ctrl+Shift+G） - 📐 对齐/分布 - 左/中/右对齐，水平/垂直分布 - 🔥 热区功能 - 给文本绑定动态变量，实现模板化动态替换 - 💾 导入导出 - JSON 格式保存/加载项目，PNG 格式导出 - ⚡ 零依赖 - 纯 JavaScript 实现，无需 React/Vue - 🎛️ 可配置 - 通过 tool 配置对象显示/隐藏任意工具 - 📦 轻量级 - gzip 后约 20KB - 🔄 旋转控制 - 对象旋转手柄，支持自由旋转 - ⚖️ 等比缩放 - Shift + 拖拽角点保持宽高比 - ⭐ 更多形状 - 星形、心形、三角形、菱形、贝塞尔曲线、平滑曲线 - ✏️ 线条样式 - 实线/虚线/点线样式，单向/双向箭头 - 🎨 填充模式 - 支持描边/填充/描边+填充三种模式 - 🖋️ 富文本 - 支持部分加粗、部分改色、部分斜体 - 🎬 Tween 动画 - 对象属性过渡动画（位置、大小、透明度等） - 📱 移动端支持 - 单指拖拽、双指缩放/旋转、长按选择、响应式布局 - 📐 形状库 - 注册自定义形状，支持带文字的组合形状，可搜索选择 📦 安装 🚀 使用方法 原生 HTML Vue 3 可选配置： 如果控制台出现 Failed to resolve component: canvas-drawing-editor 警告，可在 vite.config.ts 中添加以下配置来消除警告： Vue 2 React Angular ⚙️ 配置项 基础属性 属性 类型 默认值 说明 ------ ------ -------- ------ title string \"Canvas Editor\" 编辑器标题 lang string \"zh\" 界面语言（\"zh\" 中文，\"en\" 英文） theme-color string \"#5450dc\" 主题色（影响按钮、悬停状态等） initial-data string - 初始化 JSON 数据（格式见下方） enable-hotzone boolean false 是否启用热区功能（管理员模式） hotzone-data string - 热区变量数据（JSON 格式，用于动态替换文本） tool-confi","default_branch":null,"files":null,"tree":[],"storefront":"/r/typsusan-zzz","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/typsusan-zzz/canvas-drawing-editor/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}