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() 就可以了，运气不好。

我尝试过的

当我销毁 transformer 并重新创建它时，它仍然指示完整尺寸(不是裁剪尺寸)并且裁剪区域仍然存在。

为清楚起见，这里有一个屏幕截图: 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 存储库的分发源代码可以相应地更新，那就更好了。