画布对象上的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" />