javascript - Canvas 对象上的 Fabric JS 事件

标签 javascript html html5-canvas fabricjs

我正在使用 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/

相关文章:

javascript - 使用 SSL 和证书通过 Phonegap 连接到 Web 服务器

javascript - 如何在其他 Controller AngularJS中观察变量

javascript - 为内容背后的标题留出空白

html - 如何在textarea之外做滚动条?

javascript - 在 Canvas 标签上绘制箭头

javascript - 创建条形图后,如何更改其背景颜色?

javascript - if语句-多个条件

php - 将访问者提交的数据附加到页面

html - 用 Canvas 上绘制的形状调整 html5 Canvas 的大小

javascript - AngularJS - 日期范围选择器 - ng 模型被覆盖