畫布對象上的Fabric JS事件

Question

我正在使用fabric.js API將64位基本圖像加載到畫布中。 我需要做的是確定畫布上的對象何時調整大小。 我找不到有關事件在畫布上的對象的任何文檔。 有沒有辦法監聽這些對象上的事件？ 在畫布或窗口上收聽調整大小的操作無效：

$("canvas").on("resize", function () {
    console.log("Resize occurred"); //not called
});

Answer 1

您在這里尋找的不是畫布上的resize事件，除非您調整畫布元素本身的大小，否則不會觸發，而是畫布上渲染的對象的resize事件。 由於您正在使用fabricjs渲染圖像，因此您可以偵聽fabricjs事件以獲得所需的結果。 您可以在此處找到所有fabricjs事件的概述。 在您的情況下， object:scaled將是要監聽的事件。 以下可運行代碼段說明了一個示例：

 const canvas = new fabric.Canvas('canvas', { selection: false }); const imageElement = document.getElementById('image'); const img = new fabric.Image(imageElement, { left: 20, top: 20, scaleX: 1, scaleY: 1 }); canvas.add(img); canvas.on('object:scaled', (options) => { console.log( "Object was scaled, current scaleX:", options.target.scaleX, " and scaleY: ", options.target.scaleX) }); 

 canvas { border: 1px solid #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script> <canvas id="canvas" width="300" height="200"></canvas> <img style="display: none" id="image" src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80" />