獲取畫布對象尺寸後改性

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

我選擇矩形和調整其大小。我的要求是：調整大小後獲得新的寬度和高度。

我試圖使用object：modified event沒有成功。以下是對象的代碼段代碼：修改事件：

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