javascript - Fabric js:通过插入值修改矩形的高度和宽度

我想更改矩形尺寸，并以高度和宽度的形式输入值。但是函数recalculate（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();
});

最佳答案

有一个解决方案：jsfiddle

首先，在HTML中，您必须删除form标记，因为form期望post属性起作用并且您不需要它。然后删除函数的参数，我们将使用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();
});

请注意，当您编辑对象的高度和宽度时，您不会更改边框位置（请检查小提琴上的位置）。如果您想要这种行为，最好使用刻度尺。