Editor de diseño de React Js usando Fabric Js

Redactor de diseño

Canva como editor de diseño para diseñar/personalizar las plantillas de diseño y exportar el diseño en pdf/svg/imagen. React js + Fabric js (biblioteca de lienzo html5 de fabricjs.com) se usa para construir la aplicación.

DEMO DE MVP – http://kpomservices.com/reactjseditor/index.html

Fabric JS (fabricjs.com) – Biblioteca HTML5 Canvas

Instale la biblioteca fabric js en react js e inicialícela.

npm install --save fabric
import { fabric } from 'fabric';
componentDidMount() {
    // Make a New Canvas
  this.canvas = new fabric.Canvas('main-canvas', {options});
}

¿Por qué reaccionar JS?

Crea componentes de interfaz de usuario reutilizables, donde esos componentes se pueden usar en otros proyectos de editor. El objetivo principal de React es ser rápido, escalable y simple.

Características de este editor de diseño

  1. El editor tiene la capacidad de crear un diseño de varias páginas.
  2. La salida se puede exportar a pdf, jpeg, png, svg.
  3. Funcionalidad Recortar/Reemplazar imagen disponible.
  4. Importe imágenes de las redes sociales (FB, Instagram, etc.).
  5. Las plantillas precargadas se pueden crear fácilmente.
  6. El usuario puede agregar / importar elementos de imagen / texto / forma / svg para personalizar el diseño.
  7. Arrastre y suelte texto/imágenes/elementos en el diseño.
  8. El administrador puede agregar diferentes tipos de FUENTES.

Generador de PDF de uso avanzado

Los archivos PDF se pueden generar desde el editor de diseño,
Plantillas -> Personalizar -> Guardar -> Descargar como PDF.

Encuentre ejemplos de salidas en PDF exportadas desde el editor.
http://kpomservices.com/Export-Output_1.pdf
http://kpomservices.com/Export-Output_2.pdf

donde se usa

Design Editor se utiliza para crear increíbles postales de marketing inmobiliario y publicaciones en redes sociales / tarjetas de presentación / membretes en graphicsfactory.com
.

Similar Posts

Leave a Reply

Your email address will not be published.