fabric.js笔记

// 实例化canvas 画布
    this.canvas = new fabric.Canvas("canvas", {
      // 元素对象被选中时保持在当前z轴
      preserveObjectStacking: true,
    });
    // 设置选中后边框的效果
    fabric.Object.prototype.set({
      transparentCorners: false,//边框方点: false 实心  true  空心
      borderColor: '#00FFFC',//边框颜色
      cornerStrokeColor: '#00FFFC',
      cornerColor: '#fff',//边框方点的颜色
      cornerSize: 6,//边框方点的大小
    });
    fabric.Object.prototype.setControlsVisibility({
      mtr: false,//是否显示旋转按钮
    });
    // 旋转按钮样式
    fabric.Object.prototype.controls.mtr.withConnection = false; //主体和旋转按钮的连接线
    fabric.Object.prototype.controls.mtr.offsetY = -20;
    fabric.Object.prototype.controls.mtr.cursorStyle = 'pointer';
    fabric.Object.prototype.controls.mtr.opacity = 0;

// 自定义旋转图标
      const iconURL = 'https://i.328888.xyz/2023/03/13/v64pZ.th.jpeg';
      // const iconURL = "@/assets/img/icon/reduce.png";
      const callback = (image, isError) => {
        if (!isError) {
          fabric.Object.prototype.controls.mtr = new fabric.Control({
            x: 0,
            y: -0.5,
            offsetY: -20,
            cursorStyle: 'pointer',
            actionName: 'rotate',
            actionHandler: fabric.controlsUtils.rotationWithSnapping,
            cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
            // 渲染图标
            render: that.renderIcon(image._element, 0),
            // 设置控制点大小
            cornerSize: 12
          });
        }
      };
      fabric.Image.fromURL(iconURL, callback);

// 渲染图标的方法
    renderIcon(image, initialAngle) {
      return function (ctx, left, top, styleOverride, fabricObject) {
        let size = this.cornerSize;
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle + initialAngle));
        ctx.drawImage(image, -size / 2, -size / 2, size, size);
        ctx.restore();
      }
    },