Fabric.js 有手就行，面试官硬要问我会不会

#背景

最近在投递简历的时候发现，很多HR在哪儿问，你会不会fabric.js啊；我说我暂时没看过，但是应该不难，看哈文档就能上手了。HR跟我说：“那你可能不太适合我们，祝你早日找到工作。”

咦，我这暴脾气...

写了一个简单的教程，大家可以根据到学习学习。

#技术栈

我是用vite + vue3 搭建的项目。切记这是vue3，因为这儿在后续会出现一个问题。

#绘制一个矩形

绘制一个简单的矩形。

复制
<canvas id="canvas" width="400" height="400"></canvas>

import { fabric } from 'fabric';

canvas.value =  new fabric.Canvas('canvas', {
  
  
  preserveObjectStacking: true,
}),

const rect: any = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 120,
    height: 120,
    z: 10,
});


canvas.value.add(rect);

注意注意注意...

如果你用的是vue3搭建的项目，这样写可能会有问题。我查了很多资料才发现，需要这样修改，这是示例：

复制import { markRaw } from 'vue';
import * as fabric from 'fabric';

canvas.value = markRaw(
    new fabric.Canvas('canvas', {
      
      
      preserveObjectStacking: true,
    }),
);

绘制圆形、三角形等等原理都是一样的，大家可以自己学，并且去看看官方网站的参数，有许多有用的参数比如： angle（角度），opacity（透明度）等等。官方文档-只有英文 | 中文文档，如果你们有更好的可以推荐我修改 | 可以参考文档

#图片的渲染方式

既然是canvas那么肯定是要用到图片的，而且可能有很多操作图片的情况，那我们怎么添加图片呢？

【第一种方法：不推荐】

复制
<input
  id="avatar-upload-input"
  style="display: none"
  accept="image/png, image/jpeg, image/jpg"
  type="file"
  @change="changeInput"
/>


const changeInput = (event: any) => {
  
  let file = event.target.files[0];
  
  const reader = new FileReader();

  if (file) {
    reader.onload = (e: any) => {
      console.log(e.target.result);
      const dataUrl = e.target.result;
      const imgElement = document.createElement('img');
      imgElement.src = dataUrl;
      imgElement.onload = () => {
        const img: any = renderImages(dataUrl);
        canvas.value.add(img);
        img.scaleToWidth(400);
        
        canvas.value.renderAll();
      };
    };
  }
  
  reader.readAsDataURL(file);
};

const renderImages = (result: string) => {
  const imgElement = document.createElement('img');
  imgElement.src = result;

  return new fabric.Image(imgElement, {
    left: 0,
    top: 0,
    angle: 0,
    opacity: 1,
    centeredScaling: true, 
    crossOrigin: 'Anonymous',

    hasControls: false,
    hasBorders: false,
    selectable: false,
    lockMovementX: false,
    lockMovementY: false,
    lockScalingX: false,
    lockScalingY: false,
  });
};

【第二种方法：推荐】

通过上传图片获取到的base64然后通过Image加载图片。

复制<input
  id="avatar-upload-inputs"
  style="display: none"
  accept="image/png, image/jpeg, image/jpg"
  type="file"
  @change="changeInputs"
/>

const changeInputs = (event: any) => {
  
  let file = event.target.files[0];
  
  const reader = new FileReader();

  if (file) {
    reader.onload = (e: any) => {
      console.log(e.target.result);
      const dataUrl = e.target.result;
      fabric.Image.fromURL(dataUrl).then((img: any) => {
        img.scaleToWidth(400);
        canvas.value.add(img);
      });
    };
  }
  
  reader.readAsDataURL(file);
};

【第三种方式：推荐】

加载静态图片。

复制const selectProfilePicture = (picture: string) => {
  const img: any = canvas.value.getObjects()[0];

  if (img) {
    canvas.value.remove(img);
    fabric.Image.fromURL(getImageUrl(picture)).then((img: any) => {
      img.scaleToWidth(400);
      canvas.value.add(img);
    });
  } else {
    fabric.Image.fromURL(getImageUrl(picture)).then((img: any) => {
      img.scaleToWidth(400);
      canvas.value.add(img);
    });
  }
};

const getImageUrl = (name: string) => {
  return new URL(`../images/${name}`, import.meta.url).href;
}

如果想修改一些参数的话,可以用一下方式。

复制fabric.Image.fromURL(getImageUrl(picture)).then((img: any) => {
  img.scaleToWidth(400);
  img.set({
    left: 100,
    top: 100,
  });
  canvas.value.add(img);
});

#移出对象元素

复制const img: any = canvas.value.getObjects()[0];

if (img) {
    canvas.value.remove(img);
}

#总结

以上是一些基本，操作；后续有时间学习会更新专栏。大家可以持续关注。