FabricJS ClipPath无法在使用乘法器的toDataUrl上正确缩放

Question

我正在使用Fabric JS 3.6.2

我有一个响应式画布，可以根据自己的喜好添加道具并配置“游戏图块”，这是我遇到的the branch build。我将在下面添加步骤以进一步复制问题。

我使用画布添加了很多图像文件，并且最近开始在墙壁和地板上实现clipPath。

由于画布本身与最终输出相比是按比例缩小的，所以我必须添加蒙版，并与添加的图像的相对大小相比，将其重新缩放。之后使用fabric.Image将图像加载到画布上.fromURL。为了解决这个问题，我在this StackOverflow question接受的答案中使用rescaleMask

函数

当我对自己创建的内容感到满意时，可以使用toDataUrl（）从画布生成图像，但是我需要将画布放大到正确的输出尺寸，或者在toDataUrl（）中使用multiplier属性来获取正确的输出大小。除了clipPaths之外的所有内容都可以正确缩放。

toDataUrl() {
    var self = this;

    // self.resizeCanvasFullscreen();// Alternative solution part 1

    var calculatedMultiplier = self.store.canvasSettings.width / $("#canvasContainer").width();
    var pngUrl = self.canvas.toDataURL({
      format: "image/png",
      multiplier: calculatedMultiplier});

    // self.resizeCanvasResponsive(); // Alternative solution part 2
    return pngUrl;
  },

与此有点矛盾：当我做的最后一件事是清除画布，然后添加所有图像并附加clipPaths时，canvas.toDataUrl没有问题。但是，如果我做的最后一件事是在画布上添加一个新对象，那么canvas.toDataUrl将无法正确缩放clipPath。比较：

canvas.toDataUrl（）立即添加所有内容：

canvas.toDataUrl（）当画布刚刚获得一个新对象时：

使用顶部发布的链接复制此内容：-打开链接，选择基本类型（石材或木材）-点击画布下方的“生成图像”，一切正常，并在下面的列表中生成一个可保存的图像-单击“道具”标签，然后通过单击添加任何可用的道具（或将其拖到那里）-再次单击“生成图像”，注意发生的剪裁

注意：如果我删除乘数（并且在保存之前不重新缩放画布），clipPath缩放有效。尽管最终输出的大小不是必须的，所以这不是有效的解决方案。

我可以找到is this one的最接近StackOverflow的答案，但这是针对clipTo的，我不知道如何通过现在的clipPath设置来实现这一目标。在解决这个问题的正确方向上，这仍然是重要的一步吗？

Answer 1

我尴尬地回答我自己的问题-记住当我说过：“要解决这个问题，我在this StackOverflow question接受的答案中使用了rescaleMask函数”

结果是我对该功能做了一些实验，我替换了两行：

mask.scaleX = 1;
mask.scaleY = 1;

使用：

mask.scaleX = target.scaleX;
mask.scaleY = target.scaleY;

由于target.scaleX和scaleY在设置遮罩的点处始终为1，这没问题，起初就像吊饰一样工作。

[我的猜测是，在将对象添加到画布后，它必须已使用缩小比例进行了更新，因此，在通过倍增器在canvas.toDataUrl（）期间调整画布大小时，它使用了缩小后的target.scaleX和target。 scaleY，当时不为1。

如果您处于相同或相似的情况，请尝试在上面的链接中找到的rescaleMask函数，看看会带来什么结果！ （不确定是否应将此问题标记为重复的问题？）