fabricjs

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

API

Attributes

| 属性 | 说明 | 类型 | 默认值 | | --------------- | ------------------------------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | widths | 画板宽度 | Number | dom 的大小或者自动适配为全屏 | | height | 画板高度 | Number | dom 的大小或者自动适配为全屏 | | dom | canvas 元素选择器 | String | 自动生成 canvas | | font-family | 画板支持的字体 | Array | ['Arial', 'Helvetica', '宋体', '黑体', '微软雅黑', '楷体', '仿宋', 'Verdana', 'Times New Roman', 'Roboto', 'Open Sans', 'Lato', 'Bellefair', 'Fresca', 'Raleway'] | | before-save | 保存之前钩子函数,返回 false 则终止保存 | Funciton | () => true | | on-save | 保存回调函数 | Funciton | - | | json | 初始化渲染数据(从保存回调中获取) | String|Object | - | | data | 初始化加载元素数据(目前只支持 type 为image OR i-text;_remove属性为该元素不允许被删除) | Array|Object | - | | default-options | 每个元素默认配置 | Object | {cornerSize: 20} AllOptions | | type-options | 不同类型的元素默认配置 | Object | AllOptions |

slot 插槽

• setting

  点击元素展开的设置弹窗扩展插槽，入参：hasText:是否为文本组件；hasRadius:是否含有圆角属性；selection:当前选择组件。

• tools

  顶部工具栏扩展插槽，入参：selection:当前选择组件。

方法

• loadJSON - 加载JSON数据
• loadData - 加载DATA数据
• upperLayer - 当前组件上移
• lowerLayer - 当前组件下移
• setActiveStyle - 设置当前组件样式
• setActiveProp - 设置当前组件属性
• loadImg - 加载图片
• addImg - 添加图片
• addText - 添加文本
• removeActive - 删除当前组件
• setBackgroundImage - 设置背景图片
• save - 保存

Example

<template>
    <div id="app">
        <fabric :on-save="save" :json="json" :data="data"></fabric>
    </div>
</template>

<script>
import 'fabric';
import Fabric from 'muse-ui-fabric';
import 'muse-ui-fabric/dist/muse-ui-fabric.css';
import myImg from '@/assets/my.jpg';

export default {
    name: 'app',
    components: {
        Fabric
    },
    data () {
        return {
            json: null,
            dom: '#canvas',
            data: {
                type: 'image',
                src: myImg,
                _remove: false
            }
        };
    },
    created () {
        this.json = localStorage.getItem('canvas');
    },
    methods: {
        save (json, img) {
            console.log(json);
            console.log(img);
            localStorage.setItem('canvas', JSON.stringify(json));
        }
    }
};
</script>