Fabric JS – 动态改变页面缩略图答案

【问题标题】：Fabric JS – dynamically change page thumbnailFabric JS – 动态改变页面缩略图
【发布时间】：2018-05-07 05:20:09
【问题描述】：

我们在多页面环境中使用 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();
});

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

所以基本上我想在每次画布上的某些内容发生更改或画布其ef（大小、背景等）发生更改时调用我的“refreshSavePage()”函数。

我希望使用“after:render”，但这只是被触发了很多次，所以这不是一个选项。

【问题讨论】：

当moving/over/out/rotating/scalling mouseup 后object:modified 会触发时，您无需保存，所以只保存这段时间。
感谢杜尔加。我认为我不仅可以使用“text:changed”、“text:selection:changed”、“object:changed”等。但是如何改变画布大小或背景。或将对象发送到前后。有什么想法吗？
我猜你只能在你改变或调整背景大小的地方调用你的函数。没有事件触发。
所以基本上这就是我拥有的所有可能性 - 对：[github.com/kangax/fabric.js/wiki/Working-with-events]
@SandorRozsa 检查我的答案是否清楚，或者您是否需要更多详细信息

标签： javascript angularjs canvas fabricjs

【解决方案1】：

创建 1 个全局变量 "drawThumb" 并在 "after:render" 方法中添加以下代码以生成单次拇指

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

// code for generate thumb    

clearInterval(drawThumb);
}, 2000);

【讨论】：

【解决方案2】：

没有任何something is changed 事件。

应该涵盖大部分属性的事件是： object:modified 也保持 statefull 为真。

在这种情况下，您还会发现颜色变化。

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

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

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

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

【讨论】：