我正在使用 fabric.js API 将 base 64 图像加载到 Canvas 中。我需要做的是确定 Canvas 上的对象何时调整大小。我找不到任何关于 Canvas 上对象事件的文档。有没有办法监听这些对象上的事件?在 Canvas 或窗口上收听调整大小不起作用:
$("canvas").on("resize", function () {
console.log("Resize occurred"); //not called
});
最佳答案
您在这里寻找的不是 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" />
关于javascript - Canvas 对象上的 Fabric JS 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57893775/