天下无坑

天下无坑


对象控制点自定义

[Day 15 - Fabricjs 物件控制項樣式調整](https://ithelp.ithome.com.tw/articles/10206410 "Day 15 - Fabricjs 物件控制項樣式調整")

[Day 26 - Fabricjs 進階自訂控制項](https://ithelp.ithome.com.tw/articles/10209056 "Day 26 - Fabricjs 進階自訂控制項")

[Custom controls, render and actions](http://fabricjs.com/custom-control-render "Custom controls, render and actions")

[Controls customization](http://fabricjs.com/controls-customization "Controls customization")

[Customization](http://fabricjs.com/customization "Customization")

[default_controls.js](https://github.com/fabricjs/fabric.js/blob/master/src/mixins/default_controls.js "default_controls.js")

扩展支持icon

  // Controls对象扩展 支持icon
  // 9个控制点都使用默认图标
  // cornerStyle ='icon'
  // 9个控制点都使用同一个img对象
  // cornerStyle = oImg
  // 每个控制点使用不同img对象
  // cornerStyle = {ml: oImg, mr: oImg, mb: oImg, mt: oImg, tl: oImg, tr: oImg,bl: oImg, br: oImg, mtr: oImg }
function extendControls() {
    let defaultIcon = "data:image/svg+xml,%3Csvg%20t%3D%221606356506558%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%224891%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M69.3%20512a442.7%20442.7%200%201%200%20885.4%200%20442.7%20442.7%200%201%200-885.4%200z%22%20fill%3D%22%239BBFFD%22%20fill-opacity%3D%22.6%22%20p-id%3D%224892%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M171.536%20512a340.464%20340.464%200%201%200%20680.928%200%20340.464%20340.464%200%201%200-680.928%200z%22%20fill%3D%22%23377FFC%22%20fill-opacity%3D%22.8%22%20p-id%3D%224893%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E";

    let defaultImg = document.createElement('img');
    defaultImg.src = defaultIcon;

    function _getCoordIcon(left, top, styleOverride, fabricObject) {
      let cornerStyle = styleOverride.cornerStyle || fabricObject.cornerStyle
      let oCoords = styleOverride.oCoords || fabricObject.oCoords
      for (let k in oCoords) {
        if (oCoords[k].x == left && oCoords[k].y == top) {
          return cornerStyle.hasOwnProperty(k) ? cornerStyle[k] : defaultImg
        }
      }
      return defaultImg
    }
    fabric.controlsUtils.renderIconControl = function (ctx, left, top, styleOverride, fabricObject) {
      let size = styleOverride.cornerSize || fabricObject.cornerSize;
      let cornerStyle = styleOverride.cornerStyle || fabricObject.cornerStyle;
      // 9个控制点使用同一个img对象
      // cornerStyle = oImg
      // 每个控制点使用不同img对象
      // cornerStyle = {ml: oImg, mr: oImg, mb: oImg, mt: oImg, tl: oImg, tr: oImg,bl: oImg, br: oImg, mtr: oImg }
      let icon = (cornerStyle.width && cornerStyle.height)
        ? cornerStyle
        : _getCoordIcon(left, top, styleOverride, fabricObject)
      ctx.save();
      ctx.translate(left, top);
      ctx.globalAlpha = 1;
      ctx.drawImage(icon, -size / 2, -size / 2, size, size);
      ctx.restore();
    }

    fabric.Control.prototype.render = function (ctx, left, top, styleOverride, fabricObject) {
      styleOverride = styleOverride || {};
      let connerStyle = styleOverride.cornerStyle || fabricObject.cornerStyle;
      if (typeof connerStyle == 'object' || connerStyle == 'icon') {
        fabric.controlsUtils.renderIconControl.call(this, ctx, left, top, styleOverride, fabricObject);
      } else if (connerStyle == 'circle') {
        fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject);
      } else {
        fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject);
      }
    }
  }
  // 修改控制器样式
  let deleteIcon = document.createElement('img')
  deleteIcon.src = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";

  fabric.Object.prototype.controls.deleteControl = new fabric.Control({
    x: 0,
    y: -0.8,
    offsetX: 0,
    offsetY: 0,
    cornerSize: 16,
    // cursorStyle: 'pointer', //鼠标样式
    mouseUpHandler(eventData, target) {
      let canvas = target.canvas;
      canvas.getActiveObject().set({fill: 'blue'})
      canvas.requestRenderAll()
      // return
      // canvas.remove(target)
      // canvas.requestRenderAll()
    },
    render(ctx, left, top, styleOverride, fabricObject) {
      let size = this.cornerSize
      ctx.save()
      ctx.translate(left, top)
      ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
      ctx.drawImage(deleteIcon, -size/2, -size/2, size, size)
      ctx.restore()
    }
  })

页面列表

ITEM_HTML