javascript - KonvaJS - group.clip() 之后没有变压器更新

Question

关于问题

我正在开发一个使用 konva.js 构建的图形编辑器
经过几个小时的研究，我无法得到 transformer调整到 group 的剪裁大小

详细信息

我有一个定义 simple clip 的组区域，其中有 2 rectangles大小和位置完全相同，堆叠在一起。

• 底部矩形是 filled with an image
• 顶部矩形是 filled with rgba colour

剪裁后的组效果很好；然而，这个应用程序是动态的，因此，它需要用户的输入来设置剪辑区域。当我调用group.clip()和layer.batchDraw()时，它会进行裁剪，但边界矩形(变压器)不会更新，即使在我调用之后>transformer.forceUpdate() 就可以了，没有运气。

我尝试过的

当我销毁变压器并重新创建它时，它仍然指示全尺寸(不是剪裁尺寸)，并且剪裁区域仍然保留。

为了清楚起见，这是一个屏幕截图: Screenshot-20191008-153503.png

一些代码

我怀疑这是否有帮助，代码位于单独的文件中，并且值来自如上所述的用户输入。无论它的值(value)如何，这都是为您准备的:

let grp = new Konva.Group({x:o.x,y:o.y,draggable:o.draggable,clip:{x:0,y:0,width:o.width,height:o.height}});

我在这里粘贴的任何其他代码只会让我们所有人感到困惑，它太多了，我知道人们看到它时会跑，所以，如果我应该添加更多代码，请在评论中告诉我？

我将不胜感激任何帮助，谢谢。

Answer 1

同时lavtron的答案可行，更直接的方法可以解决问题:

错误补丁

(function()
{
    let func = Konva.Group.prototype.getClientRect;
    let orig = {enumerable:false, configurable:false, writable:false, value:func};
    let altr = {enumerable:false, configurable:false, writable:false, value:function(t)
    {
        let attr = this.attrs;
        let resl = this.getOrigClientRect(t);
        if(attr.hasOwnProperty('clipWidth')){resl.width=attr.clipWidth};
        if(attr.hasOwnProperty('clipHeight')){resl.height=attr.clipHeight};
        return resl;
    }};
    Object.defineProperty(Konva.Group.prototype,'getOrigClientRect', orig);
    Object.defineProperty(Konva.Group.prototype,'getClientRect', altr);
})();

如何实现

要实现此补丁:

• 将其添加到您自己的 JavaScript 中 - 在 DOM 中加载 konva.js 脚本之后，
• 或将其直接粘贴到 konva.js 源代码中

如果您使用 RequireJS 加载 KonvaJS，您应该相应地命名导入的对象和/或更新上面的代码，-或者-将其保留为 Konva (注意大写的 K)。

技术细节

这通过使用原始 getClientRect 方法的结果并使用剪裁组的 clipWidth 和 clipHeight 更新它来实现 - 仅当它具有这些属性；否则它返回未修改的结果。

这已经过测试并且运行良好；不过，如果 konva.js 存储库的分发源代码可以相应更新，那就更好了。