draw-image-editor

draw-image-editor

describe

1.基于vue+fabric开发的canvas图片编辑，绘图功能。
2.画布根据传入图片生成自适应宽高，可调节最大宽度。
2.支持多种类型图案绘制
3.支持调节颜色，画笔粗细。
3.生成json对象，随时编辑存储，不用每次生成新图，浪费资源。
4.右侧编辑区可拖动。（支持自定义）

preview

install

---

npm i draw-image-editor -S
import FabricCanvas from "draw-image-editor";
import 'draw-image-editor/lib/FabricCanvas.css';
Vue.use(FabricCanvas);

下载卡住失败，请切换下载源到 cnpm 或 npm i draw-image-editor -S --unsafe-perm

methods

---

@name initFabricCanvas(InitFabricCanvas)
@desc 初始化canvas
@usage
    <FabricCanvas @initFabricCanvas="InitFabricCanvas"/>
    methods:{
        InitFabricCanvas(InitFabricCanvas){
            const Object = {
                canvasData : { String| Object} 画布数据
                            String : 初次加载，传入 URL 即可。
                            Object : 编辑时，传入生成的 Object 对象
                  maxWidth : 画布最大宽度
                            default 1000
                        bg : 画布背景颜色
                            default "rgba(0,0,0,0.1)"
            }
            const fabricEl = new InitFabricCanvas(Object) //返回canvas实例对象
            fabricEl {Object}：
                1.fabric文档对象
                2.toCanvasJSON 画笔json对象
                    this.fabricEl.toCanvasJSON()
                3.refreshImageCanvas 切换画布时调用
                    Object : { canvasData, maxWidth, bg}
                    this.fabricEl.refreshImageCanvas(Object)



        }
    }

@name savesuccess
@desc 保存画布json数据
@usage
    <FabricCanvas  @savesuccess="savesuccess" />
    methods:{
        savesuccess(json){
            ...
        }
    }

Attributes

---

1. currentType

(注：内置画笔工具栏，需自定义调用时使用)

@name currentType
@desc 自定义画笔
@type Object

@usage

currentType = {
    name,color,size
}
<FabricCanvas :currentType="currentType"/>

参数	说明	类型	可选值	默认值
name	画笔名称	String	@name	arrow
color	画笔颜色	String	@color	red
size	画笔大小	String	@size	normal

@name

"square", //矩形
"circle", //圆形
"brush", //画笔
"line", //直线
"arrow", // 箭头
"wave", //波浪线
"text", //文字
"bomb", // bomb
"lucencyLine", //透明线
"bracket", //括号

@color

"red", "yellow", "blue", "green", "black", 其他色值(例：#000 )

@size

"small", "normal", "big"