如何在FabricJS中更改文本框的多行/位置中的文本？

Question

当输入值被更改时，我需要替换特定选择的文本。

• 在初始渲染中，我得到一个选择和字段的对象。
• 其次，输入获取字段值。

假设我正在更改 Line 输入的值，因为此字段控制两行，这两个绿色文本都应替换为新行。

http://jsfiddle.net/hkvmLwfu/

TNX

////////////////////////////////////////////////////////////////////////
/////////////// THIS FUNCTION NEEDS TO BE DEVELOPED ////////////////////
////////////////////////////////////////////////////////////////////////

function replaceTextBySelection(fieldId, fieldValue, canvas, text){

}

////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
var canvas = new fabric.Canvas('paper');
canvas.setHeight(300);
canvas.setWidth(500);

var text = new fabric.Textbox('Sample Line 1 Line 2 Line 3', {
  left: 50,
  top: 10,
  fontFamily: 'arial',
  fill: '#333',
  fontSize: 50
});
canvas.add(text);
canvas.renderAll();

const fields = {
	FIELD_1: {
    	value: "Sample",
        color: '#F00'
    },
    FIELD_2: {
    	value: "Line",
        color: '#0F0'
    }
}

selections = [
    {
        rowId: 0,
        offset: 0,
        length: 6,
        field: "FIELD_1"
    },
    {
        rowId: 1,
        offset: 0,
        length: 4,
        field: "FIELD_2"
    },
    {
        rowId: 2,
        offset: 0,
        length: 4,
        field: "FIELD_2"
    }
]

selections.map((obj)=>{
    text.setSelectionStart(obj.offset);
    text.setSelectionEnd(obj.offset + obj.length);
    text.setSelectionStyles();

    for (let i = text.selectionStart; i < text.selectionEnd; i++) {
      text.insertCharStyleObject(obj.rowId, i, {
        textBackgroundColor: fields[obj.field].color
      })
    }
    canvas.renderAll();
    return obj;
});

$('#FIELD_1').val( fields['FIELD_1'].value );
$('#FIELD_2').val( fields['FIELD_2'].value );


$("input").keyup(function(t){
	replaceTextBySelection(this.id, this.value, canvas, text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<input type="text" id="FIELD_1" />
<br/>
<input type="text" id="FIELD_2" />

Answer 1

您的示例使事情变得复杂，因为selections对象有关行的原因，但文本实际上并不包含行，只包含换行到新行的空格。

如果您将文本定义为

，则会变得更容易

var text = new fabric.Textbox('Sample\nLine 1\nLine 2\nLine 3', { left: 50, top: 10, fontFamily: 'arial', fill: '#333', fontSize: 50 });

使用此文本我创建了一个功能示例：http://jsfiddle.net/hkvmLwfu/12/。我不确定这完全是你想要的，但你应该可以从这里拿起它。

Answer 2

只需使用\n即可打破该行。它将像<br/>一样工作。