javascript - 在 fabricjs 上下文中更改文本不起作用

Question

我正在尝试在动画期间更改组内的文本。您可以在下面代码段的控制台中看到这一点，

group.item(2).setText(Math.floor(count * 10) % 2 === 0 ? "O" : "X");

parseInt(count + "") % 2 === 0 可能是管理翻转硬币文本的正确方式，但不幸的是它不起作用。谁能帮我理解为什么硬币的一面没有翻转？

var fabric;
(function(fabric) {})(fabric || (fabric = {}));
fabric.Background = fabric.util.createClass(fabric.Rect, {
  type: "background",
  initialize: function(options) {
    options = options || {};
    this.callSuper("initialize", options);
  },
  _render: function(ctx) {
    this.callSuper("_render", ctx);
  }
});
var Ys = (function() {
  function Ys() {
    var _this = this;
    this.app = new fabric.Canvas(document.getElementById("c"));
    this.renderHexagram = function() {};
    this.resize = function() {
      var w = (window.innerWidth > 0) ? window.innerWidth : screen.width;
      var h = (window.innerHeight > 0) ? window.innerHeight : screen.height;
      var width = w;
      var height = h;
      _this.app.setDimensions({
        width: width,
        height: height
      });
    };
    this.drawBackground = function() {
      var backgroundOptions = {};
      backgroundOptions.width = _this.app.getWidth();
      backgroundOptions.height = _this.app.getHeight();
      backgroundOptions.selectable = false;
      var background = new fabric.Background(backgroundOptions);
      var gradientOptions = _this.createVerticalGradientOptions("linear", _this.app.getHeight(), {
        0: "#333333",
        1: "#222222"
      });
      background.setGradient("fill", gradientOptions);
      _this.background = background;
      _this.app.add(background);
    };
    this.drawToss = function() {
      [1, 1, 1].forEach(function(item, idx) {
        setTimeout(function() {
          _this.toss(idx);
        }, _this.getRandom(1, 10) * 100);
      });
    };
    this.toss = function(idx) {
      var canvas = _this.app;
      var circle = new fabric.Circle({
        left: 0,
        top: 0,
        radius: (_this.app.getWidth() / 5) / 2,
        fill: "#FFE600",
        stroke: "#CACA3B",
        strokeWidth: 1,
        angle: 0,
        padding: 0,
        originX: "center",
        originY: "center"
      });
      var innerCircle = new fabric.Circle({
        left: 0,
        top: 0,
        radius: (_this.app.getWidth() / 6) / 2,
        fill: "#FFFF00",
        stroke: "#CACA3B",
        strokeWidth: 1.5,
        angle: 0,
        padding: 0,
        originX: "center",
        originY: "center"
      });
      var text = new fabric.Text("", {
        left: 0,
        top: 0,
        angle: 90,
        originX: "center",
        originY: "center",
        fill: "#fffdb5",
        stroke: "#CACA3B",
        fontSize: ((_this.app.getWidth() / 5)),
        fontWeight: 700,
        strokeWidth: 1
      });
      var group = new fabric.Group([circle, innerCircle, text], ({
        left: (_this.app.getWidth() / 6) + ((_this.app.getWidth() / 3) * idx),
        top: -((_this.app.getWidth() / 5) / 2),
        originX: "center",
        originY: "center",
        selectable: true,
        hasControl: true
      }));
      var rotateIntervall = setInterval((function() {
        var f = 0;
        return function() {
          group.angle = f;
          if (f > 180) {
            f = 0;
          } else {
            f += 1;
          }
          canvas.renderAll();
        };
      })(), 0);
      group.animate("top", _this.app.getHeight() - ((_this.app.getWidth() / 5) / 2), {
        duration: 600,
        onChange: canvas.renderAll.bind(canvas),
        easing: fabric.util.ease["easeOutBounce"]
      });
      (function rotate(f, count) {
        count += .01;
        console.log(Math.floor(count * 10));
        group.item(2).setText(Math.floor(count * 10) % 2 === 0 ? "O" : "X");
        var skewInterval = setInterval((function() {
          return function() {
            group.transformMatrix = [0, 1, f, 0, 0, 0];
            if (f > 1 && count >= 10) {
              clearInterval(skewInterval);
              clearInterval(rotateIntervall);
              return 0;
            } else if (f > 1) {
              f = 0;
            } else if (f > 0.8) {
              f += 0.03;
            } else if (f > 0.9) {
              if (f > 0.93) {
                f += 0.04;
              } else if (f > 0.96) {
                f += 0.05;
              } else {
                f += 0.06;
              }
            } else {
              f += 0.09;
            }
            canvas.renderAll();
            clearInterval(skewInterval);
            rotate(f, count);
            return 0;
          };
        })(), count);
      })(0, 0);
      canvas.add(group);
    };
    this.resize();
    this.app.renderOnAddRemove = true;
    this.headerHeight = this.app.getHeight() / 12;
    this.drawBackground();
    this.drawToss();
  }
  Ys.prototype.createVerticalGradientOptions = function(type, height, colorStops) {
    return {
      type: type,
      x1: 0,
      y1: 0,
      x2: 0,
      y2: height,
      colorStops: colorStops
    };
  };
  Ys.prototype.getRandom = function(min, max) {
    return Math.random() * (max - min) + min;
  };
  return Ys;
}());
var ys = new Ys();
//# sourceMappingURL=application.js.map

* {
  padding: 0;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.min.js"></script>
<canvas id="c" width="100" height="100"></canvas>

Answer 1

肯定是缓存尝试有问题​​:

fabric.Object.prototype.objectCaching = false;

var fabric;
(function(fabric) {})(fabric || (fabric = {}));
fabric.Background = fabric.util.createClass(fabric.Rect, {
  type: "background",
  initialize: function(options) {
    options = options || {};
    this.callSuper("initialize", options);
  },
  _render: function(ctx) {
    this.callSuper("_render", ctx);
  }
});
var Ys = (function() {
  function Ys() {
    var _this = this;
    this.app = new fabric.Canvas(document.getElementById("c"));
    this.renderHexagram = function() {};
    this.resize = function() {
      var w = (window.innerWidth > 0) ? window.innerWidth : screen.width;
      var h = (window.innerHeight > 0) ? window.innerHeight : screen.height;
      var width = w;
      var height = h;
      _this.app.setDimensions({
        width: width,
        height: height
      });
    };
    this.drawBackground = function() {
      var backgroundOptions = {};
      backgroundOptions.width = _this.app.getWidth();
      backgroundOptions.height = _this.app.getHeight();
      backgroundOptions.selectable = false;
      var background = new fabric.Background(backgroundOptions);
      var gradientOptions = _this.createVerticalGradientOptions("linear", _this.app.getHeight(), {
        0: "#333333",
        1: "#222222"
      });
      background.setGradient("fill", gradientOptions);
      _this.background = background;
      _this.app.add(background);
    };
    this.drawToss = function() {
      [1, 1, 1].forEach(function(item, idx) {
        setTimeout(function() {
          _this.toss(idx);
        }, _this.getRandom(1, 10) * 100);
      });
    };
    this.toss = function(idx) {
      var canvas = _this.app;
      var circle = new fabric.Circle({
        left: 0,
        top: 0,
        radius: (_this.app.getWidth() / 5) / 2,
        fill: "#FFE600",
        stroke: "#CACA3B",
        strokeWidth: 1,
        angle: 0,
        padding: 0,
        originX: "center",
        originY: "center"
      });
      var innerCircle = new fabric.Circle({
        left: 0,
        top: 0,
        radius: (_this.app.getWidth() / 6) / 2,
        fill: "#FFFF00",
        stroke: "#CACA3B",
        strokeWidth: 1.5,
        angle: 0,
        padding: 0,
        originX: "center",
        originY: "center"
      });
      var text = new fabric.IText("", {
        left: 0,
        top: 0,
        angle: 90,
        originX: "center",
        originY: "center",
        fill: "#fffdb5",
        stroke: "#CACA3B",
        fontSize: ((_this.app.getWidth() / 6)),
        fontFamily: "Segoe UI",
        fontWeight: 700,
        strokeWidth: 1
      });
      var group = new fabric.Group([circle, innerCircle, text], ({
        left: (_this.app.getWidth() / 6) + ((_this.app.getWidth() / 3) * idx),
        top: -((_this.app.getWidth() / 5) / 2),
        originX: "center",
        originY: "center",
        selectable: true,
        hasControl: true
      }));
      var rotateIntervall = setInterval((function() {
        var f = 0;
        return function() {
          group.angle = f;
          if (f > 180) {
            f = 0;
          } else {
            f += 1;
          }
          canvas.renderAll();
        };
      })(), 0);
      group.animate("top", _this.app.getHeight() - ((_this.app.getWidth() / 5) / 2), {
        duration: 600,
        onChange: canvas.renderAll.bind(canvas),
        easing: fabric.util.ease["easeOutBounce"]
      });
      (function rotate(f, count) {
        count += .01;
        group.item(2).set({
          text: Math.floor(count * 10) % 2 === 0 ? "I" : "O"
        });
        var skewInterval = setInterval((function() {
          return function() {
            group.transformMatrix = [0, 1, f, 0, 0, 0];
            if (f > 1 && count >= 10) {
              clearInterval(skewInterval);
              clearInterval(rotateIntervall);
              return 0;
            } else if (f > 1) {
              f = 0;
            } else if (f > 0.8) {
              f += 0.03;
            } else if (f > 0.9) {
              if (f > 0.93) {
                f += 0.04;
              } else if (f > 0.96) {
                f += 0.05;
              } else {
                f += 0.06;
              }
            } else {
              f += 0.09;
            }
            canvas.renderAll();
            clearInterval(skewInterval);
            rotate(f, count);
            return 0;
          };
        })(), count);
      })(0, 0);
      canvas.add(group);
    };
    fabric.Object.prototype.objectCaching = false;
    this.resize();
    this.app.renderOnAddRemove = true;
    this.headerHeight = this.app.getHeight() / 12;
    this.drawBackground();
    this.drawToss();
  }
  Ys.prototype.createVerticalGradientOptions = function(type, height, colorStops) {
    return {
      type: type,
      x1: 0,
      y1: 0,
      x2: 0,
      y2: height,
      colorStops: colorStops
    };
  };
  Ys.prototype.getRandom = function(min, max) {
    return Math.random() * (max - min) + min;
  };
  return Ys;
}());
var ys = new Ys();
//# sourceMappingURL=application.js.map

* {
  padding: 0;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.min.js"></script>
<canvas id="c" width="100" height="100"></canvas>