javascript - 在织物画布中编辑组类型的 i-text
问题描述
我在织物画布上有一个组类型。组有项目 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">
推荐阅读
- python - 我做了这个 Python 脚本,它应该在一个名为 diep.io 的网络游戏中自动射击方块。它不起作用,我做错了什么?
- python - 如何在表格中添加垂直标题?
- html - 无法使用具有不同 url 的同一类创建多个 html 按钮
- javascript - 在 jsx react.js 中显示映射图像
- android - 获取使用 inflater.inflate 创建的视图
- sql - SAS 按天创建一个网络列 - 数组
- python-3.x - 如何在表格中找到相同项目的数量?
- c# - Blazor 测试 InputDate 与 bUnit 的绑定
- c# - C#接口中的静态方法不能从实现类中访问
- c++ - C++ 虚拟析构函数 ROM 使用