Canvas 对象上的 Fabric JS 事件

Question

我正在使用 fabric.js API 将 base 64 图像加载到 canvas 中。我需要做的是确定 canvas 上的对象何时调整大小。我找不到任何关于 canvas 上对象事件的文档。有没有办法监听这些对象上的事件？在 canvas 或 window 上收听调整大小不起作用：

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

Answer 1

您在此处查找的不是 canvas 上的调整大小事件，除非您调整 canvas 元素本身的大小，否则不会触发该事件，而是渲染对象上的调整大小事件canvas。由于您正在使用 fabricjs 渲染图像，因此您可以收听 fabricjs 事件以获得所需的结果。您可以找到的所有 fabricjs 事件的概述 here。在您的情况下， 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" />

Canvas 对象上的 Fabric JS 事件

Fabric JS Events On Canvas Objects

html

javascript

html5-canvas

fabricjs