Inglês | chinês
Editor de imagem de código aberto · Arquitetura do plug-in · Design de arrastar e soltar · Funções completas
O editor de imagens de plug-in desenvolvido com base em Fabric.js e Vue, que podem personalizar fontes, materiais, modelos de design, menus de clique com o botão direito do mouse e teclas de atalho.
Demo · Documento · Demoção de edição paga · Introdução à edição paga
Introdução
Design de imagem rápida, Vue-Fabric-Editor é um editor de imagens desenvolvido com base em Fabric.js e Vue, que podem personalizar fontes, materiais, modelos de design, menus de clique com o botão direito do mouse e teclas de atalho.
Introdução à animação · Introdução Vídeo
Características
- Arquitetura do plug-in : pode ser expandida e desenvolvida através de plug-ins, suportando menus com o botão direito do mouse e teclas de atalho.
- Design de arrastar e soltar : um editor gráfico leve e conciso, em vez de uma ferramenta de design de re-rastreamento on-line grande e completa do tipo PS.
- Funções completas : análise PSD, linhas auxiliares, história, gradiente, fontes personalizadas, corte e outras funções.
Já tem funções
- Importar arquivos JSON e PSD
- Exportar arquivos PNG, SVG, JSON
- Combinação/combinação de divisão
- Função da camada
- Propriedades de gradiente
- Atributos de aparência/atributos/traços/sombras/fontes
- Desfazer/refazer
- Chave de atalho
- Clique com o botão direito do mouse no menu
- Linha auxiliar
- Governante
- Fontes personalizadas
- Modelo personalizado Material
- Insira SVG, material de imagem
- Alinhamento horizontal e vertical multi-elementos
- Configurações de atributo de segundo plano
- Setas/linhas
- Desenho de escova/polígono
- Código QR/código de barras
- Substituição de imagem/corte/filtro
- Marca d'água
- Internacionalização
usar
Instale o Node.js V16 e o PNPM primeiro e, em seguida, execute o seguinte comando:
Serviços de desenvolvedor
- Grupo de comunicação do WeChat : formamos vários grupos de comunicação de projetos do WeChat, com autores e mantenedores de projetos ativos no grupo e respondendo a perguntas regularmente.
- Tutorial chinês Fabric.JS : https://blog.kuaitu.cc.
- Planeta de conhecimento : Atualização de longo prazo de informações relevantes sobre editores de código aberto e fabric.js, precipitar práticas recomendadas, compartilhamento de experiência em desenvolvimento, exemplos de código, etc.
Versão paga
Ajuda as empresas a criar rapidamente ferramentas de design on -line, reduzir o investimento em P&D corporativo e evitar a criação repetida de rodas.
Função Introdução · Introdução ao produto · Demo
A versão de código aberto possui apenas o código front-end. A versão paga fornece funções completas e back-end de back-end e back-end de gerenciamento e back-end, fornecendo autorização do código-fonte e apoiando o desenvolvimento secundário .
- Funs de funções completas : Rich Capacabilies, fornecem funções completas de front-end e back-end e podem ser usadas na implantação.
- Arquitetura do plug-in, expansão conveniente : com base na API de plug-in, desenvolva rapidamente o secundário do editor.
- Geração em lote, produção rápida de imagem : suporta geração de imagens em lote através da interface HTTP e arquivos de tabela.
- Design de arrastar e soltar, simples e fácil de usar : Adequado para usuários comuns operarem, fáceis de começar sem treinamento.
- Adaptação de toda a plataforma : versão do PC e versão H5 suportam vários cenários de aplicativos.
- Avilo técnico, treinamento de documentos : Forneça mais suporte e encaixe técnico eficientemente completo.
- Desenvolvimento personalizado, Reduza o investimento : apoia a conclusão rápida das funções personalizadas e reduz o investimento em P&D.
Guia de contribuição
O projeto está comprometido em criar um aplicativo de editor de imagens da Web pronta para uso e, ao mesmo tempo, deposita uma camada de encapsulamento entre o aplicativo Editor de Imagens da Web e o Fabric.js. Espera -se que a camada de encapsulamento seja projetada para desenvolvedores e forneça uma interface mais simples, para que os desenvolvedores possam implementar facilmente o desenvolvimento de aplicativos de imagem.
Se você estiver interessado nesse assunto, o convida sinceramente a se juntar a nós e crescer juntos. Você só precisa conhecer a sintaxe simples do Git e JavaScript.
[Enviar código e Win Razer Game Mouse]
Informações relacionadas
Aqui estão minhas notas técnicas sobre o editor na comunidade Nuggets, e haverá mais detalhes:
- Use Fabric.js para desenvolver rapidamente um editor de imagens,
- Implementação detalhada do Fabric.js Development Image Editor
- Que funções podem fabric.js desenvolver editor de imagens para implementar? Várias imagens
- Meu projeto de código aberto e experiência de código aberto
- Que funções a biblioteca Canvas pode implementar? Introdução à imagem da animação
- Editor de imagem de código aberto vue
- Compartilhamento de experiência pessoal na comercialização de projetos de código aberto
- A arquitetura plug-in do editor de imagem de código aberto Fabric.js
Nota: Se você encontrar problemas técnicos, espera usar o problema para discutir, é mais aberto e transparente, e informações suficientes tornarão a resolução de problemas mais eficientes, consulte a sabedoria de fazer perguntas.
Agradecimentos
- Autor da função do governante Liu Mingye.
- Componente de gradiente do editor de design de Palxiao.
Patrocínio amigável
administrador
Colaboradores
Nihaojob |
Qiu-Jun |
WuchengGuang1998 |
Alicelanniste |
YLX252 |
Liumingye |
MOMO2019 |
Byeword |
bigface2019 |
Wohuweixiya |
ZJC2233 |
ijry |
Makeng |
Z09176141 |
A847244052 |
BRIVER0825 |
SkyscrapernO1 |
Pengzhijian |
Jiangshuq |
Hudenhui |
ddshiyu |
Yehan68 |
Luke358 |
Xiaozeo |
x007XYZ |
Wozhi-Cl |
vvBear |
Slarkerino |
Rolitter |
Mojixiang |
Machetehot |
Liuyaojun |
Jooyyy |
Guda-Art |
nanfb |
TOLLE DULL |
Bamzc |
Yangzongtai |
Alicehhhmm |
Fuqianxi |
Ichtoncosta |
LUUCIDADE |
Licença
Licenciado sob a licença do MIT.
