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

@rev-ai/image-editor

v0.0.1

Published

基于fabric实现的图片编辑组件

Downloads

1

Readme

文档说明 | English | 中文

vue-fabric-editor

Demo 基于 fabric.js 和 Vue 开发的图片编辑器,可自定义字体、素材、设计模板。

image

已有功能

功能介绍文章 文字 + 动图。

  • 导入 JSON 文件
  • 保存为 PNG、SVG、JSON 文件
  • 插入 SVG、图片文件
  • 多元素水平、垂直对齐方式
  • 字体模板
  • 组合/拆分组合
  • 图层及顺序调整
  • 撤销/重做
  • 背景属性设置
  • 外观属性/字体属性/描边/阴影
  • 自定义字体
  • 自定义模板素材
  • 快捷键
  • 右键菜单
  • 辅助线
  • 标尺
  • 图片替换
  • 图片滤镜
  • 国际化

使用

启动项目

请先安装node.js v16,然后执行以下命令:

yarn install
yarn serve

为非web前端开发人员准备了部署教程,快速解决你的部署需求。

自定义素材

可自定义字体、设计模板、标题模板等,所有自定义素材在https://github.com/nihaojob/vue-fabric-editor-static 项目中保存。

我们通过有偿的方式积累高质量的常见问题、最佳实践文档,欢迎加入星球:

贡献指南

项目致力于打造一个开箱即用的web图片编辑器应用,同时沉淀一个介于web图片编辑器应用与fabric.js之间的封装层,期望封装层面向开发者设计,提供更简单的接口,让开发者可以轻松的实现图片应用开发。

我们离目标还有很长的距离,如果你对这件事情感兴趣,真诚的邀请你加入,我们一起沉淀fabric.js的最佳实践,你会得到包括不限于以下列表的收获,你只要会简单的Git和Javascript语法就可以。

  • 熟悉开源协作方式,成为项目贡献者。
  • Vue3 + TS实践,边学边开发。
  • fabric.js开发,边学边开发。
  • 入门单元测试,边学边开发。
  • 众多的fabric.js开发者交流。
  • 图形编辑器架构经验。

目前有很多需要做的工作,比如英文文档的搭建、SDK拆分等,欢迎与我联系,我愿意与你进行任何问题的交流,微信:13146890191。期待你的 issue 和 PR 。

这是我发表在掘金社区关于编辑器的技术笔记,会有更多的细节:

  1. 使用 fabric.js 快速开发一个图片编辑器
  2. fabric.js开发图片编辑器的细节实现

注:如果遇到技术问题,期望使用 issue 讨论,它更加开放与透明,足够多的信息会让解决问题变得更高效,参考提问的智慧

规划

可能新增功能

第一阶段

  • [x] 缩放
  • [x] 三角形、箭头、线条
  • [x] 复制 粘贴 快捷键
  • [x] 拖动模式,放大缩小
  • [x] 画布大小保存
  • [x] 绘制线条
  • [ ] svgIcon 汇总
  • [x] 标题样式列表模板
  • [x] 预览

第二阶段

  • [x] 图片替换
  • [x] 渐变配置
  • [ ] 平铺背景、等比例背景
  • [ ] 图片裁剪
  • [x] 滤镜
  • [x] 描边 strokeDashArray

第三阶段

  • [ ] monorepo升级 进行中
  • [ ] 标尺插件
  • [ ] 截图插件
  • [ ] 滤镜插件
  • [ ] 画布插件
  • [ ] 其他工具函数
  • [ ] @fabricEditor SDK封装
  • [ ] 基于插件开发移动端
  • [ ] 基于插件开发其他图片应用
  • [ ] 文档建设(中英文)

致谢

贡献者

License

Licensed under the MIT License.