javascript - 在结构 Canvas 中编辑组类型的 i-text

Question

我在织物 Canvas 上有一个组类型。组有项目 i-text 和一个圆圈。我想动态更改文本框中的 i-text 值。仅当我调整圆圈大小时它才会呈现。以下是我的代码。

var canvas = new fabric.Canvas('canvas');

var cic1 = new fabric.Circle({
  radius: 20,
  fill: '#fff',
  top: 40,
  left: 40,
  stroke: 'blue',
  strokeWidth: 3
});
var number = 1;
if (canvas.getObjects().length) {
  number = canvas.getObjects().length + 1;
}

var text1 = new fabric.IText(number.toString(), {
  fontSize: 20,
  textAlign: 'center',
  originX: 'center',
  originY: 'center',
  left: 40,
  top: 40
});
var group = new fabric.Group([cic1, text1], {
  left: 40,
  top: 40,
});
canvas.add(group);

canvas.on('mouse:down', function(options) {
  if (options.target != undefined) {
    var grp = canvas.getActiveObject();
    if (canvas.getActiveObject().get('type') == "group") {
      getText(grp);
    }

  }
});

function getText(group) {
  var items = group._objects;
  //group._restoreObjectsState();
  for (var i = 0; i < items.length; i++) {
    if (items[i].get('type') == 'i-text') {
      $('#number').val((items[i].text));
    }
  }
}
$('#number').on('keyup', function() {
  //upper-canvas 
  //var canvas = new fabric.Canvas('c');
  var grp = canvas.getActiveObject();
  var items = grp._objects;
  items[1].text = $('#number').val();

  /*   var json = canvas.toJSON();
    canvas.loadFromJSON(json, function() {
      canvas.renderAll.bind(canvas) 
   },function(o,object){
    canvas.renderAll();
   })*/
  canvas.renderAll();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>
<input type="text" id="number">

Demo

它不会立即渲染，而是仅在您调整组大小时渲染。

Answer 1

调用group#addWithUpdate更新群组。

演示

var canvas = new fabric.Canvas('canvas');

var cic1 = new fabric.Circle({
  radius: 20,
  fill: '#fff',
  top: 40,
  left: 40,
  stroke: 'blue',
  strokeWidth: 3
});
var number = 1;
if (canvas.getObjects().length) {
  number = canvas.getObjects().length + 1;
}

var text1 = new fabric.IText(number.toString(), {
  fontSize: 20,
  textAlign: 'center',
  originX: 'center',
  originY: 'center',
  left: 40,
  top: 40
});
var group = new fabric.Group([cic1, text1], {
  left: 40,
  top: 40,
});
canvas.add(group);

canvas.on('mouse:down', function(options) {
  if (options.target != undefined) {
    var grp = canvas.getActiveObject();
    if (canvas.getActiveObject().get('type') == "group") {
      getText(grp);
    }

  }
});

function getText(group) {
  var items = group._objects;
  for (var i = 0; i < items.length; i++) {
    if (items[i].get('type') == 'i-text') {
      $('#number').val((items[i].text));
    }
  }
}
$('#number').on('keyup', function() {
  var grp = canvas.getActiveObject();
  var items = grp._objects;
  items[1].set({
    text: $('#number').val()
  });
  grp.addWithUpdate();
  canvas.requestRenderAll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>
<input type="text" id="number">