根据用户输入调整矩形大小

Question

我正在尝试根据用户输入调整矩形的大小，但收到一条错误消息：无法读取属性 'addEventListener' of null。我需要更改 HTML 中的某些内容吗？我尝试将脚本移动到正文下方，但没有成功。貌似一切正常，就是不行


var rect = new fabric.Rect({
  fill: "red",
  width: 300,
  height: 400,
  stroke: "gray",
  strokeWidth: 30,
  fill: "lightgray",
  centeredRotation: true,
  centeredScaling: true,
});

canvas.add(rect);


var Length = document.getElementById("Length");
var Width = document.getElementById("Width");

Length.addEventListener("input", Modify_Length);
Width.addEventListener("input", Modify_Width);

function Modify_Length() {
  var rect = new fabric.Rect({
    fill: "red",
    width: parseFloat(Width.value) || 300,
    height: 400 || parseFloat(Length.value),
    stroke: "gray",
    strokeWidth: 30,
    fill: "lightgray",
    centeredRotation: true,
    centeredScaling: true,
  });
}
function Modify_Width() {
  var rect = new fabric.Rect({
    fill: "red",
    width: parseFloat(Width.value) || 300,
    height: parseFloat(Length.value) || 400,
    stroke: "gray",
    strokeWidth: 30,
    fill: "lightgray",
    centeredRotation: true,
    centeredScaling: true,
  });
}
canvas.renderAll();

Answer 1

不需要为每个元素单独的侦听器。只需共享一个回调函数。另外，不要忘记重新渲染。

const canvas = new fabric.Canvas("c");

const rect = new fabric.Rect({
  fill: "red",
  width: 200,
  height: 80,
  stroke: "gray",
  strokeWidth: 1,
  fill: "lightgray",
  centeredRotation: true,
  centeredScaling: true,
});

canvas.on("object:scaling", function() {
  var obj = canvas.getActiveObject(),
    width = obj.width,
    height = obj.height,
    scaleX = obj.scaleX,
    scaleY = obj.scaleY;

  obj.set({
    width: width * scaleX,
    height: height * scaleY,
    scaleX: 1,
    scaleY: 1,
  });
});

rect.setControlsVisibility({
  mt: false,
  mb: false,
  ml: false,
  mr: false,
  bl: false,
  br: false,
  tl: false,
  tr: false,
  mtr: false,
});

canvas.add(rect);

canvas.centerObject(rect);
canvas.setActiveObject(rect);

canvas.item(0).lockMovementX = true;
canvas.item(0).lockMovementY = true;

const width = document.getElementById('width');
const height = document.getElementById('height');

const adjust = (e) => {
  Object.assign(rect, {
    width: parseFloat(width.value) || 300,
    height: parseFloat(height.value) || 400,
  });
  canvas.renderAll();
};

width.addEventListener('input', adjust);
height.addEventListener('input', adjust);

canvas.renderAll();

label, input {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/451/fabric.min.js"></script>
<canvas id="c" width="250" height="120"></canvas>
<div id="user-input">
  <label for="width">Width:</label>
  <input type="number" id="width" name="width" value="200" />
  <label for="height">Height:</label>
  <input type="number" id="height" name="height" value="80" />
</div>

根据用户输入调整矩形大小

Resizing rectangle based on user input

html

javascript

fabricjs