Skip to content

Latest commit

 

History

History
92 lines (75 loc) · 2.46 KB

README-en.md

File metadata and controls

92 lines (75 loc) · 2.46 KB

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.