如何從HTML輸入實時更新Javascript變量？

Question

我正在編寫一個程序，可以使用fabric.js實時修改矩形（取決於用戶鍵盤輸入的內容）。

我做這件事的時間很糟。

我正在嘗試獲取輸入id=width和輸入id=height以便能夠編輯rect.width，而rect.height和PREFERABLY可以在執行此操作時更改矩形的形狀。

我已經在下面包含了我的代碼，我剛剛刪除了所有對document.getElementById('height').value;嘗試document.getElementById('height').value; 因為它們都是絕對沒用的，當我包含它們時，它會破壞整個腳本（我認為這對於jsfiddle來說不是很有用）。

我想我有點頭疼。

任何幫助將非常感激。

的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);
        }
});

Answer 1

因此，您實際上是在問兩個問題：

1.我如何知道文本框的值何時更改？

您可以使用getElementById找到輸入，並將事件監聽器附加到change 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();
});

Answer 2

https://jsfiddle.net/andrwrbnsn/doynL163/30/

快速瀏覽后，我希望這會有所幫助-織物具有setWidth和setHeight，可以在此處進行解釋：

因此，從本質上講，您可以使用document.GetElementById來獲取輸入並添加事件監聽器，該監聽器可以在keyup輸入時更新寬度/高度並刷新畫布。

如何更改Fabric.js對象的值？

如何從HTML輸入實時更新Javascript變量？

問題描述

2 個解決方案

解決方案1
2 已采納 2019-04-08 22:00:35

解決方案2
1 2019-04-08 22:08:48

如何從HTML輸入實時更新Javascript變量？

問題描述

2 個解決方案

解決方案1 2 已采納 2019-04-08 22:00:35

解決方案2 1 2019-04-08 22:08:48

解決方案1
2 已采納 2019-04-08 22:00:35

解決方案2
1 2019-04-08 22:08:48