我在织物画布中有一个分组类型。群组中有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">
它不会立即渲染,而是仅在调整组大小时才渲染。
呼叫group#addWithUpdate以更新组。
DEMO
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">