仿写一个设计编辑器第二天

绘制文本和文本框

使用 new fabric.IText()生成一个文本实例，new fabric.Textbox()生成文本框实例，再通过canvas.add()把实例绘制到画布

// 插入文本
addText() {
    const text = new this.fabric.IText("三体", {
        ...defaultPosition,
        fontSize: 40,
        id: uuid(),
    });
    this.canvas.c.add(text);
    this.canvas.c.setActiveObject(text);
},

绘制SVG文件

通过 fabric.loadSVGFromURL(）加载svg文件，在其中使用fabric.utile.groupSVGElemet()把svg文件组合给，在其中使用 uuid()给每个svg文件一个唯一的标识 再通过 canvas.add()把svg图像绘制到画布上

addItem(e) {
    const url = e.target.src;
    
    // loadSVGFromURL中回调函数返回路径的文件，svg是由许多物件组合而成，
    this.fabric.loadSVGFromURL(url, (objects, options) => {
    // 使用 this.fabric.util.groupSVGElemnt（）把svg的各部分组合起来,并给svg图片设置唯一标识和位置
    let item = this.fabric.util.groupSVGElements(objects, {
        ...options,
        ...defaultPosition,
        id: uuid(),
        name: "svg元素",
    });
    this.canvas.c.add(item);
    this.canvas.c.renderAll();
});
},

改变画布尺寸

使用Element-ui的计数器组件 el-input-number,watch中监听width和height的大小，使用canvas.setWidth()和setHeight()改变画布的大小

    // 设置画布宽度
    widthNum() {
        this.canvas.c.setWidth(this.widthNum);
        this.canvas.c.renderAll();
    },

    // 设置画布高度
    heightNum() {
        this.canvas.c.setHeight(this.heightNum);
        this.canvas.c.renderAll();
    },
}

给背景填充颜色

使用Element-ui的颜色选择器 ColorPicker 在watch中监听颜色值的变化，使用canvas.setBackgroundColor()填充画布颜色

color() {
    this.canvas.c.setBackgroundColor(this.color);
    this.canvas.c.renderAll();
},

设置背景图片

使用Element-ui的upload组件上传图片文件，不过文件不上传到服务器，通过upload组件的钩子函数before-upload可以在函数参数中拿到上传图片的数据，使用 FileReader解析文件返回一个图片地址，让后生成一个图片实例，在使用方法复制该图片元素，使用 canvas.setBackgroundImage()设置背景图片

// 拿到上传的图片

handleUpload(file) {
    getImgStr(file).then((res) => {
        this.imgFile = res;
    });
},

// 创建图片
createImg() {
    let imgEle = document.createElement("img");
    imgEle.src = this.imgFile;
    document.body.appendChild(imgEle);
    imgEle.onload = () => {
    this.setBgImg(imgEle);
    imgEle.remove();
};

},

// 设置背景
setBgImg(img) {
    const imgEle = img.cloneNode();
    imgEle.onload = () => {
        // 可跨域设置
        const imgInstance = new this.fabric.Image(imgEle, {
        crossOrigin: "anonymous",
    });
    
    // 渲染背景
    this.canvas.c.setBackgroundImage(
        imgInstance,
        this.canvas.c.renderAll.bind(this.canvas.c),
        {
        scaleX: this.canvas.c.width / imgInstance.width,
        scaleY: this.canvas.c.width / imgInstance.width,
        }
);
this.canvas.c.renderAll();
this.canvas.c.requestRenderAll();
};
},

//utils中的解析文件的方法
export function getImgStr(file) {
    return new Promise((resolve, reject) => {
    try {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
        resolve(reader.result)
    }
    }.catch (error) {
        reject(error)
    }
   })

}