Fabric JS - 拆分多行 IText

Question

我在我的项目中使用 Fabric JS，我想拆分多行 IText，如下图所示：

split multiple lines on IText

这是我的代码：

var canvas = new fabric.Canvas("canvas", { preserveObjectStacking: true 
});

var text = new fabric.IText("Hello!\nSplit Me\nPlease....", {
  fontSize: 20,
  top: 80,
  left: 100,
  fontFamily: "Arial"
});

canvas.add(text);
canvas.renderAll();


$('#split').click(function() {

    var object = canvas.getActiveObject();

    if(!object) return false;

    if ((object.get('type') == 'i-text') && (object.getText().indexOf( "\n" ) > 0)) {

        var splitText = object.getText().split("\n");
        var group = new fabric.Group();
        var cloneObj = [];

        for(var i=0;i<=splitText.length-1;i++) {
            cloneObj[i] = fabric.util.object.clone(object);
            cloneObj[i].setText(splitText[i]);
            canvas.add(group);
            canvas.add(cloneObj[i]);
            group.addWithUpdate(cloneObj[i]);
            canvas.renderAll();
        }

        object.remove();
        canvas.setActiveGroup(group);
        group.setCoords();
        canvas.renderAll();

    }
});

这里是 jsfiddle：https://jsfiddle.net/m74ruzwq/2/

任何帮助将不胜感激。提前致谢。

Answer 1

最好的方法是从fabric中取出已经拆分的任何textLine，为每一行生成一个新对象，固定顶部值，在最后渲染。

var canvas = new fabric.Canvas("canvas", { preserveObjectStacking: true });

var text = new fabric.IText("Hello!\nSplit Me\nPlease....", {
  fontSize: 20,
  top: 80,
  left: 100,
  fontFamily: "Arial"
});

canvas.add(text);
canvas.renderAll();


$('#split').click(function() {

		var object = canvas.getActiveObject();
		
    if(!object) return false;
    
		if (object._textLines && object._textLines.length > 1) {
      canvas.renderOnAddRemove = false;
			var group = new fabric.Group();
			var cloneObj = [];
      var options = object.toObject();
      group.canvas = canvas;
      delete options.text;
			for(var i=0; i < object._textLines.length; i++) {
				var newObj = new fabric.IText(object._textLines[i], options);
        newObj.top += i * object.fontSize * object.lineHeight;
				canvas.add(newObj);
        group.addWithUpdate(newObj);
			}
			object.remove();
      group.setCoords();
      canvas.renderOnAddRemove = true;
			canvas.setActiveGroup(group);
      canvas.renderAll();
		}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script>
<button id="split">Split</button>
<canvas id="canvas" width="400" height="300" style="border: 1px solid #ccc"></canvas>

Answer 2

任何帮助。

这里是 jsfiddle：http://jsfiddle.net/edvkemerovo/4ufjrrco/2/

1 个按钮拆分为组。 2 按钮取消组合。

   var canvas = new fabric.Canvas("canvas", { preserveObjectStacking: true });

    var text = new fabric.IText("Hello!\nSplit Me\nPlease....", {
      fontSize: 20,
      top: 80,
      left: 100,
      fontFamily: "Arial"
    });

    canvas.add(text);
    canvas.renderAll();


    $('#split').click(function() {

            var object = canvas.getActiveObject();

        if(!object) return false;

            if ((object.get('type') == 'i-text') && (object.getText().indexOf( "\n" ) > 0)) {

                var splitText = object.getText().split("\n");
          var top = object.top
                var group = new fabric.Group();
                var cloneObj = [];
          canvas.add(group);
                for(var i=0;i<=splitText.length-1;i++) {
                    cloneObj[i] = fabric.util.object.clone(object);
                    cloneObj[i].setText(splitText[i]);
            cloneObj[i].setTop(top+cloneObj[i].height*i);

                //  canvas.add(cloneObj[i]);
                    group.addWithUpdate(cloneObj[i]);
                    canvas.renderAll();
                }

                object.remove();
        //  canvas.setActiveGroup(group);
                group.setCoords();
                canvas.renderAll();

            }
    });
        $('#ungroup').click(function() {
        var group = canvas.getActiveObject();
        for(var i=0;i<= group._objects.length-1;i++) {
        var cloneObj = fabric.util.object.clone(group._objects[i]);
       cloneObj.setTop(group.top+cloneObj.height*i);
        cloneObj.left = group.left;
       cloneObj.setCoords();
       canvas.add(cloneObj);
       }
            canvas.remove(group);
        canvas.renderAll();
            });