function addSVGDraw() {
  fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
    let oImg = fabric.util.groupSVGElements(objects, options);
    oImg.set({
      left: 100,
      top: 100,
    });
    canvasContainer.add(oImg);
  });

 呀！看起来有点小，我们现在把宽度放大到200…




    
 
function addSVGDraw() {
  fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
    let oImg = fabric.util.groupSVGElements(objects, options);
    oImg.scale(Number(200 / oImg.width));
    // oImg.scaleToWidth(200);
    oImg.set({
      left: 100,
      top: 100,
    });
    canvasContainer.add(oImg);
  });
旋转 angle & rotate
 
1、一般情況下旋转是围绕元素的左上角进行旋转的，为了直观地发现变化，我们在背后放一张初始位置的矩形框作为参考。
 
function addSVGDraw() {
  fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
    let oImg = fabric.util.groupSVGElements(objects, options);
    // oImg.scale(Number(200 / oImg.width));
    oImg.scaleToWidth(200);
    oImg.set({
      left: 300,
      top: 300,
      angle: 90, // 图片旋转角度
    });
    // oImg.rotate(90);
    const bgRect = new fabric.Rect({
      top: 300, // 距离容器顶部 300px
      left: 300, // 距离容器左侧 300px
      fill: '#FFC258', // 填充色
      width: 200,
      height: 153,
    });
    canvasContainer.add(bgRect).add(oImg);
  });
这分别是旋转0° 90° 180° 270°
 
 
 
 
 2、如果希望围绕元素的中心点进行旋转呢？此处有两种方式：
 方式一：设置元素的 originX、oringY 属性为 center，他的原理是改变元素 left、top 设置位置。请看下面示例，背景矩形框没有设置originX、oringY ，将元素设置originX、oringY ，可以直观地看见元素位置会发生了偏移，如果需要存储元素左上角坐标的话就需要重新计算，很繁琐。
 
function addSVGDraw() {
  fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
    let oImg = fabric.util.groupSVGElements(objects, options);
    // oImg.scale(Number(200 / oImg.width));
    oImg.scaleToWidth(200);
    oImg.set({
      left: 300,
      top: 300,
      originX: 'center',
      originY: 'center',
      // angle: 90, // 图片旋转角度
    });
    const bgRect = new fabric.Rect({
      top: 300, // 距离容器顶部 300px
      left: 300, // 距离容器左侧 300px
      fill: '#FFC258', // 填充色
      width: 200,
      height: 153,
    });
    canvasContainer.add(bgRect).add(oImg);
  });
这分别是未进行旋转和旋转90°
 
 
 方式二：centeredRotation：如果为true，则该对象在通过控件旋转时将使用中心点作为变换的原点。需要和rotate 结合使用
 
function addSVGDraw() {
  fabric.loadSVGFromURL(VACUUM_PUMPS, (objects, options) => {
    let oImg = fabric.util.groupSVGElements(objects, options);
    // oImg.scale(Number(200 / oImg.width));
    oImg.scaleToWidth(200);
    oImg.set({
      left: 300,
      top: 300,
    });
    oImg.centeredRotation = true;
    oImg.rotate(90);
    const bgRect = new fabric.Rect({
      top: 300, // 距离容器顶部 300px
      left: 300, // 距离容器左侧 300px
      fill: '#FFC258', // 填充色
      width: 200,
      height: 153,
    });
    canvasContainer.add(bgRect).add(oImg);
  });
这分别是旋转0° 90° 180° 270°
 
 
 
 
 
Image的方式
 
fabric.Image.fromURL
 
function addImageDraw() {
  fabric.Image.fromURL(IcRotateA, (oImg) => {
    oImg.set({
      left: 100,
      top: 100,
    });
    canvasContainer.add(oImg);
  });
旋转 angle & rotate
 
Image 方式的旋转和SVG一直，可参考上方案例。
 更多操作请看 官方文档
git clone https://github.com/kevoj/angular-editor-fabric-js.git
cd angular-editor-fabric-js
npm install
为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。
运行ng build来构建项目。 构建工件将存储在dist
				
fabric插入图片缩放至指定大小
fabric默认添加图片到画布的时候，是使用图片资源的本身真实宽高来绘制的，我们可以利用它提供的set方法，将图片等比例缩放，解决超出画布问题。
/* 添加图片到画布 */
  const _createImage = function(
    imgConfig,
    centerObject = false,
    return new Promise((resolve, reject) => {
      try {
				
参考链接 Fabric.js 简单介绍和使用简介
  Fabric.js是一个可以简化canvas程序编写的库。 Fabric.js为canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。基于MIT协议开源，在github上有许多人贡献代码。
为什么选择fabric.js
手上的项目必须使用canvas
原生的canvas API不够友好
用fabric.js实
动手操作
接下来有3个案例，使用了2张图片 Agumon.png 和 Bhikkhu.png，图片是在 iconfont 网站上找到的。
如果需要使用本案例的图片，可以在文末提供的仓库中获取。
我使用 Fabric.js 的版本是 4.6.0。
这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里(当做背景图)。
我会用 原生 的方法实现一次，然后再在 Vue3 + Element-plus 环境下实现一次。
最后聊聊我在真实项目中的做法。
 这个简单的页面加载一个 SVG 并将其显示在画布上。 每个对象都是可编辑/可拖动的。 作为参考，它还包含 SVG 如何在 IE 中显示的图像。
换行符不渲染到 FabricJS 画布
在第一次鼠标按下/交互之前，文本不会以正确的字体显示
当使用 SVG 文本的左侧/顶部位置创建 IText 时，文本位于屏幕外
				
Fabric.js 提供了一个 DistortFilter 滤镜，可以对图片进行扭曲操作。以下是一个简单的示例代码，展示了如何使用 DistortFilter 对图片进行扭曲：
// 创建 Fabric.js Canvas 实例
var canvas = new fabric.Canvas('canvas');
// 加载图片
fabric.Image.fromURL('https://www.example.com/image.jpg', function(img) {
  // 添加图片到 Fabric.js Canvas 实例
  canvas.add(img);
  // 创建 DistortFilter 滤镜
  var filter = new fabric.Image.filters.Distort({
    image: img,
    // 扭曲控制点位置
    // 可根据需要自行调整
    tlPosition: { x: 50, y: 50 },
    trPosition: { x: 200, y: 50 },
    brPosition: { x: 200, y: 200 },
    blPosition: { x: 50, y: 200 }
  // 应用 DistortFilter 滤镜到图片
  img.filters.push(filter);
  img.applyFilters();
  // 渲染 Fabric.js Canvas 实例
  canvas.renderAll();
这个示例代码加载了一张图片，并将其添加到 Fabric.js Canvas 实例中。然后创建了一个 DistortFilter 滤镜，并设置了扭曲控制点的位置。最后，将 DistortFilter 滤镜应用到图片中，并渲染 Fabric.js Canvas 实例，即可看到扭曲图片的效果。您可以根据需要自行调整控制点的位置，以获得不同的扭曲效果。