为什么当我通过自定义控件更改圆的位置和大小时，Fabric 没有重新渲染圆？

Question

我阅读了Fabric官方文档和演示，然后定制了两个控件来扩展Cicle。 Circle 容器的大小和控件的位置会改变，但我发现 Fabric 没有重新渲染 Circle。

我想知道为什么会发生这种情况？感谢您的帮助！

这是我的代码笔：https://codepen.io/cactusxx/pen/xxMoRXZ

var canvas = (this.__canvas = new fabric.Canvas("c"));
// create a rect object
function Add() {
  var newRect = new fabric.Rect({
    left: 100,
    top: 50,
    fill: "yellow",
    width: 200,
    height: 100,
    objectCaching: false,
    stroke: "lightgreen",
    strokeWidth: 4
  });
  canvas.add(newRect);
}

var circle = new fabric.Circle({
  radius: 100,
  fill: "#f55",
  top: 100,
  left: 100
  // visible: false
});

circle.set({
  borderColor: "red",
  cornerColor: "green",
  cornerSize: 12,
  cornerStyle: "circle",
  transparentCorners: false
});

canvas.add(circle);
canvas.setActiveObject(circle);
circle.controls = updateControls();

function updateControls() {
  return {
    mt: new fabric.Control({
      x: 0,
      y: -0.5,
      cursorStyle: "not-allowed",
      render: renderNotAllowed
    }),
    mr: new fabric.Control({
      x: 0.5,
      y: 0,
      cursorStyle: "not-allowed",
      render: renderNotAllowed
    }),
    ml: new fabric.Control({
      x: -0.5,
      y: 0,
      cursorStyle: "not-allowed",
      render: renderNotAllowed
    }),
    mb: new fabric.Control({
      x: 0,
      y: 0.5,
      cursorStyle: "not-allowed",
      render: renderNotAllowed
    }),
    br: new fabric.Control({
      x: 0.5,
      y: 0.5,
      cursorStyle: "crosshair",
      actionHandler: scaleObject
    }),
    tr: new fabric.Control({
      x: 0.5,
      y: -0.5,
      cursorStyle: "crosshair",
      actionHandler: scaleObject
    })
  };
}

function scaleObject(eventData, transform, x, y) {
  var circleObject = transform.target;
  var xOff = 0,
    yOff = 0,
    diff = 0;
  if (circleObject.__corner === "tr") {
    // console.log("tr");
    var trX = circleObject["left"];
    var trY = circleObject["top"] + 2 * circleObject["radius"];
    xOff = x - trX;
    yOff = trY - y;
    diff = Math.max(xOff, yOff, 0);
    circleObject["top"] = trY - diff;
    circleObject["left"] = trX;
  } else if (circleObject.__corner === "br") {
    var brX = circleObject["left"];
    var brY = circleObject["top"];
    xOff = x - brX;
    yOff = y - brY;
    diff = Math.max(xOff, yOff, 0);
  }
  var newRadius = Math.round(diff / 2);
  circleObject["radius"] = newRadius;
  circleObject["height"] = 2 * newRadius;
  circleObject["width"] = 2 * newRadius;
  // console.log(xOff, yOff, diff);
  // console.log(circleObject);
  // Update Object
  circleObject.setCoords();
  canvas.requestRenderAll();
}

function renderNotAllowed(ctx, left, top, styleOverride, fabricObject) {
  ctx.beginPath();
  ctx.arc(left, top, 6, 0, 2 * Math.PI, false);
  ctx.fillStyle = "gray";
  ctx.fill();
  ctx.lineWidth = 1;
  ctx.strokeStyle = "white";
  ctx.stroke();
}

.controls {
  display: inline-block;
}

<script src="https://unpkg.com/fabric@latest/dist/fabric.js"></script>
<div class="controls">
  <p>
    <button id="add" onclick="Add()">Add a rectangle</button>
  </p>
</div>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

Answer 1

你错过了 objectCaching: false 圆圈