Question

我们在多页面环境中使用FabricJS。我们的页面列表视图应该使用在画布上有某些东西时生成的缩略图。现在我们正在收听一些与对象相关的事件，并在更改时更新缩略图：

canvas.on('object:modified', function (option) {

    PagesControllerScope && PagesControllerScope.refreshSavePage();
});

canvas.on('object:moving', function (option) {

    PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:over', function (option) {

    PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:out', function (option) {

    PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:removed', function (option) {

    PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:rotating', function (option) {

    PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:scaling', function (option) {

    PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('path:created', function (option) {

    PagesControllerScope && PagesControllerScope.refreshSavePage();
});

有没有办法以“一般”的方式实现这样的事情，而不必为相应的对象或画布本身定义每个可能的变化？

所以基本上我想在画布上更改某些内容时调用我的“refreshSavePage（）”函数，或者更改画布itsef（大小，背景等）。

我希望使用“after：render”，但这很简单，所以这不是一个选项。

Answer 1

创建1个全局变量“drawThumb”并在“after：render”方法中添加以下代码，它会生成单个时间拇指

clearInterval(drawThumb);
drawThumb = setTimeout(function() {    

// code for generate thumb    

clearInterval(drawThumb);
}, 2000);

Answer 2

没有任何something is changed事件。

应涵盖大部分属性的事件包括： object:modified同时保持statefull为真。

在这种情况下，您还会捕捉颜色变化。

你可以做的更好的事情是使用debouce和_set的组合。

您的应用程序应该使用object.set('property', value)来更改对象内的内容。

此时您可以覆盖Object.set以包含您认为合适的间隔{1}}的去抖版本（1秒半秒）

这意味着在最后一次更改后，许多连续更改都不会触发任何内容，并且在您选择的超时后，该函数将触发并刷新缩略图。

Fabric JS - 动态更改页面缩略图

2 个答案: