2、Fabric.js 加载图片及相关操作

最新推荐文章于 2024-03-04 17:15:29 发布

你在说啥-Lynn

最新推荐文章于 2024-03-04 17:15:29 发布

阅读量1.4k

点赞数 1

分类专栏： Fabric.js 文章标签： javascript fabric 前端

本文链接：https://blog.csdn.net/beauty_600/article/details/129621014

版权

Fabric.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

此文接着上文看…

SVG的方式

fabric.loadSVGFromURL

在这里插入图片描述

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);
  });
}