我正在制作一个程序，可以使用fabric.js实时修改矩形（取决于用户键盘输入的内容）。
我这么做的时间很糟糕。
我正在尝试获取输入id=width并输入id=height以便能够编辑rect.width和rect.height和PREFERABLY让它改变矩形的形状，因为我正在这样做。
我已经在下面包含了我的代码，我刚刚删除了我在document.getElementById('height').value;的所有尝试，因为它们都是绝对无用的，当我包含它们时它会破坏整个脚本（我认为这对jsfiddle非常有用） 。
我想我有点过头了。
任何帮助将非常感激。
HTML
<body>
<input id="width" type="number" value="100"> <br>
<input id="height" type="number" value="100"> <br>
</body>
<canvas id="canvas" width="800" height="800"></canvas>
使用Javascript
var canvas = new fabric.Canvas('canvas');
var grid = 20;
for (var i = 0; i < (800 / grid); i++) {
canvas.add(new fabric.Line([ i * grid, 0, i * grid, 800],
{strokeDashArray: [3, 17], strokeWidth : 3, stroke: 'black', selectable: false }));
canvas.add(new fabric.Line([ 0, i * grid, 800, i * grid],
{strokeDashArray: [3, 17], strokeWidth :3, stroke: 'black', selectable: false }))
}
var rect = new fabric.Rect({
top : 50,
left : 50,
width : 100,
height : 100,
fill : 'red',
hasControls : false
});
canvas.add(rect);
canvas.on('object:moving', function(options) {
options.target.set({
left: Math.round(options.target.left / grid) *
grid,
top: Math.round(options.target.top / grid) * grid
});
});
canvas.on('object:moving', function (e) {
var obj = e.target;
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth
> obj.canvas.width){
return;
}
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < 0 ||
obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-
obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-
obj.getBoundingRect().left);
}
// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height >
obj.canvas.height ||
obj.getBoundingRect().left+obj.getBoundingRect().width >
obj.canvas.width){
obj.top = Math.min(obj.top, obj.canvas.height-
obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left = Math.min(obj.left, obj.canvas.width-
obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
}
});
所以你真的问了两个问题：
1.如何知道文本框的值何时发生变化？
您可以使用getElementById找到输入，并将附加和事件监听器添加到更改event。
let widthInput = document.getElementById('width');
widthInput.addEventListener('change', (event) => {
});
2.如何在fabric.js中调整对象的大小
您在Fabric.js对象上使用set方法。然后在画布上调用renderAll。
rect.set('width', parseInt(widthInput.value));
canvas.renderAll();
全部一起：
注意：您必须单击文本框以触发更改事件。
https://jsfiddle.net/9v5zogju/
HTML
我删除了无效的type属性，给每个输入一个唯一的id，并删除了额外的body标记。
<input id="width" value="100"><br>
<input id="height" value="100"><br>
<canvas id="canvas" width="800" height="800"></canvas>
使用Javascript
我按原样保留了你的代码。我的代码位于底部。
var canvas = new fabric.Canvas('canvas');
var grid = 20;
for (var i = 0; i < (800 / grid); i++) {
canvas.add(new fabric.Line([ i * grid, 0, i * grid, 800],
{strokeDashArray: [3, 17], strokeWidth : 3, stroke: 'black', selectable: false }));
canvas.add(new fabric.Line([ 0, i * grid, 800, i * grid],
{strokeDashArray: [3, 17], strokeWidth :3, stroke: 'black', selectable: false }))
}
var rect = new fabric.Rect({
top : 50,
left : 50,
width : 100,
height : 100,
fill : 'red',
hasControls : false
});
canvas.add(rect);
canvas.on('object:moving', function(options) {
options.target.set({
left: Math.round(options.target.left / grid) * grid,
top: Math.round(options.target.top / grid) * grid
});
});
canvas.on('object:moving', function (e) {
var obj = e.target;
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
}
// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
}
});
//new code below this line
let widthInput = document.getElementById('width');
widthInput.addEventListener('change', (event) => {
rect.set('width', parseInt(widthInput.value));
canvas.renderAll();
});
let heightInput = document.getElementById('height');
heightInput.addEventListener('change', (event) =>
rect.set('height', parseInt(heightInput.value));
canvas.renderAll();
});
https://jsfiddle.net/andrwrbnsn/doynL163/30/
快速浏览一下后，我希望这有点帮助 - fabric有setWidth和setHeight，如下所示：
所以基本上你使用document.GetElementById获取输入并添加一个eventlistener，它在keyup上更新宽度/高度并刷新画布。