Skip to content

Latest commit

 

History

History
105 lines (79 loc) · 2.8 KB

README-en.md

File metadata and controls

105 lines (79 loc) · 2.8 KB
Raw

English| 中文

Documents are translated using software,You are welcome to submit for inspection.

vue-fabric-editor

Demo fabric.js and Vue based image editor, can customize fonts, materials, design templates.

Existing function

  • Import JSON file
  • Save it as a PNG, SVG, or JSON file
  • Insert SVG, image files
  • Multi-element horizontal and vertical alignment
  • Combine/Split Combine
  • Layer and order adjustments
  • undo/redo
  • Background property setting
  • Appearance Properties/Font Properties/Stroke/Shadow
  • custom font
  • Custom template material
  • i18n
  • Auxiliary line

Use

Startup

yarn install
yarn serve

Custom font

The font-related files are in src/assets/fonts, put the font files in the directory, and update the newly added font name to the font.css and font.js files.

// font.js
const cnList = [
  {
    name: '汉体',
    fontFamily: '汉体',
  },
  {
    name: '华康金刚黑',
    fontFamily: '华康金刚黑',
  },
];

const enList = [];
export default [...cnList, ...enList];
/* font.css */
@font-face {
  font-family: '汉体';
  src: url('./cn/汉体.ttf');
}

@font-face {
  font-family: '华康金刚黑';
  src: url('./cn/华康金刚黑.ttf');
}

Custom template

The entry of the custom template is in the src/components/importTmpl.vue component, and the template image and JSON file can be placed in the public/template file, and the data can be displayed in the component.

Contribution Guidelines

This is a design editor project that I am using. There are many similar paid editors on the market. As a developer, I still hope to find an editor that can be easily extended and customized. If you also have needs, welcome to join us maintain.

Development introduction：使用 fabric.js 快速开发一个图片编辑器

plan

Possible New Features

  • svgIcon summary
  • Heading Style List Template
  • gradient configuration
  • copy paste shortcut
  • Drag mode, zoom in and zoom out
  • Canvas size saving
  • Replace pictures, load url pictures
  • zoom
  • triangles, arrows, lines
  • Tile background, Isometric background
  • preview
  • stroke strokeDashArray
  • draw lines

License

Licensed under the MIT License.