我在织物 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">
它不会立即渲染,而是仅在您调整组大小时渲染。
最佳答案
调用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">
关于javascript - 在结构 Canvas 中编辑组类型的 i-text,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59126402/