修改后获取画布对象尺寸

Question

使用以下代码将 Rect 对象添加到画布后：

canvas = new fabric.Canvas("mycanvas");

// create a rectangle object
var rect = new fabric.Rect({
    left: 30,
    top: 30,
    fill: "green",
    width: 80,
    height: 40
});

// "add" rectangle onto canvas
canvas.add(rect);

我选择 Rect 并调整它的大小。我的要求是：调整大小后获得新的宽度和高度。

我尝试使用 object:modified 事件但没有成功。以下是object:modified event的sn-p代码：

canvas.on("object:modified", function (options) {
    var width = options.target.width;
    var height = options.target.height;

    $("#widthTextBox").val(width);
    $("#heightTextBox").val(height);
});

提前谢谢你。

Answer 1

不要使用宽度或高度，而是使用 getWidth 和 getHeight

像这样：https://jsfiddle.net/ntLcfv2b/

canvas = new fabric.Canvas("my-canvas");

// create a rectangle object
var rect = new fabric.Rect({
    left: 30,
    top: 30,
    fill: "green",
    width: 80,
    height: 40
});

// "add" rectangle onto canvas
canvas.add(rect);


canvas.on("object:modified", function (e) {
    var activeObject = e.target;
    if (!activeObject) {
      return;
    }
    var width = activeObject.getWidth();
    var height = activeObject.getHeight();

    $("#widthTextBox").val(width);
    $("#heightTextBox").val(height);
});

所有 FabricJS 事件

General

after:render — fired continuously after each frame is rendered
before:render — fired before each frame is rendered
canvas:cleared — fired after a call to canvas.clear()
Mouse related

mouse:over
mouse:out
mouse:down — fired when mousedown event occurred on canvas
mouse:up — fired when mouseup event occurred on canvas
mouse:move — fired when the mouse is moving over the canvas
mouse:wheel - fired when using the scroll wheel
Object related

object:added — fired after object has been added
object:modified — fired after object is modified (moved, scaled, rotated)
object:moving — fired continuously during object movement
object:over — fired when mouse is over object (see example below)
object:out — fired when mouse is moved away from object (see example below)
object:removed — fired when object has been removed
object:rotating — fired continuously during object rotating
object:scaling — fired continuously during object scaling
object:selected — fired when object is selected
Path related

path:created — fired when (free-drawn) path is created
Selection related

before:selection:cleared — fired before selection is cleared (before active group is destroyed)
selection:cleared — fired after selection is cleared (after active group is destroyed)
selection:created — fired after selection is created (after active group is created)
Text related

text:editing:entered
text:editing:exited
text:selection:changed
text:changed