Fabric js：使用值插入修改矩形高度和宽度

Question

我想要更改矩形度量值，其中输入的值为高度和宽度。但函数重新计算（inputWidth，inputHeight）失败。谁能帮我 ？

这里是我的html代码：

<div class="row"> 
<div class="col-sm-3"> 
    <form> 
     <div class="form-group"> 
      <label for="inputHeight">Height</label> 
      <input type="text" name="inputHeight" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <label for="inputWidth">Width</label> 
      <input type="text" name="inputWidth" class="form-control"> 
     </div> 
     <button onclick="recalculate(inputWidth, inputHeight)" type="submit" class="btn btn-primary squareP">Modify Rectangle</button> 
     <button type="button" class="btn btn-primary square">Rectangle</button> 
    </form> 
</div> 
<div class="col-sm-9"> 
    <canvas id="myCanvas"></canvas> 
</div> 

这里的javascript：

var canvas = new fabric.Canvas('myCanvas', { 
    width: window.innerWidth, 
    height: window.innerWidth - 50, 
    isDrawingMode: false, 
    backgroundColor: '#fff' 
}); 

document.querySelectorAll('.square')[0].addEventListener('click', function() { 
    var rect = new fabric.Rect({ 
     top: 100, 
     left: 100, 
     width: 100, 
     height: 100, 
     fill: '', 
     selection: false, 
     fill: '#f55' 
    }); 
    canvas.add(rect); 
}); 

document.body.querySelectorAll('.squareP')[0].addEventListener('click', function recalculate(inputWidth, inputHeight) { 
    var obj = canvas.getActiveObject(); 
    obj.set('width', inputWidth).set('height', inputHeight); 
    obj.set({width: inputWidth.value, height: inputHeight.value}); 
    obj.setCoords(); 
    canvas.renderAll(); 
}); 

Answer 1

有一个解决方案：jsfiddle

首先在您的HTML中，您必须删除表单标签，因为表单需要发布属性才能工作，而您并不需要它。然后删除你的函数的参数，我们将使用JQuery来获取它。

<div class="row"> 
<div class="col-sm-3"> 
     <div class="form-group"> 
      <label for="inputHeight">Height</label> 
      <input type="text" name="inputHeight" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <label for="inputWidth">Width</label> 
      <input type="text" name="inputWidth" class="form-control"> 
     </div> 
     <button onclick="recalculate()" type="submit" class="btn btn-primary squareP">Modify Rectangle</button> 
     <button type="button" class="btn btn-primary square">Rectangle</button> 
</div> 
<div class="col-sm-9"> 
    <canvas id="myCanvas"></canvas> 
</div> 

然后在你的JS拿到野外vlue和更新您的尺寸：

var canvas = new fabric.Canvas('myCanvas', { 
    width: window.innerWidth, 
    height: window.innerWidth - 50, 
    isDrawingMode: false, 
    backgroundColor: '#fff' 
}); 

document.querySelectorAll('.square')[0].addEventListener('click', function() { 
    var rect = new fabric.Rect({ 
     top: 100, 
     left: 100, 
     width: 100, 
     height: 100, 
     fill: '', 
     selection: false, 
     fill: '#f55' 
    }); 
    canvas.add(rect); 
}); 

document.body.querySelectorAll('.squareP')[0].addEventListener('click', function recalculate() { 
    var obj = canvas.getActiveObject(); 
    var w = $("input[name='inputWidth']").val(); 
    var h = $("input[name='inputHeight']").val(); 
    obj.set('width', w).set('height', h); 
    obj.setCoords(); 
    canvas.renderAll(); 
}); 

注意，当您编辑对象的高度和宽度，你不改变边界位置（检查小提琴） 。如果你想要这种行为，最好使用比例尺。