Javascript Kineticjs-旋转形状的固定填充图案

我习惯于处理形状和过渡。现在，我制作了下一个代码示例：

正如您所看到的，填充图案随形状旋转。我需要把它修好。所以我的问题是：

形状旋转时，是否可以制作固定填充图案，以及如何制作？

---

更新：

我得到了下一种方法：以相反的方向旋转填充模式

---

还有什么更优雅的方法可以做到这一点吗？

Eric刚刚添加了将用户定义的剪切功能保存到图层和组的功能

首先，定义一个函数，用于在图层或组上绘制剪裁区域

var layer = new Kinetic.Layer({
    clipFunc: function(canvas) {
        var context = canvas.getContext();
        context.rect(0, 0, 400, 100);
    } 
});

然后调用.clip（）函数应用剪辑。下面是源代码中Kinetic的clip（）函数：

_clip: function(container) {
   var context = this.getContext(); 
   context.save();
   this._applyAncestorTransforms(container);
   context.beginPath(); 
   container.getClipFunc()(this);
   context.clip();
   context.setTransform(1, 0, 0, 1, 0, 0);
}

---

函数的作用是：在执行剪辑之前应用现有的变换。如果您不喜欢动能函数的转换部分，您可以始终使用“container.getClipFunc（）”，然后基于上面的_clip函数构建自己的myClipWithoutTransform（）；另一种方法是将形状用作遮罩，并将其遮罩的背景元素设置为具有固定的背景图像。我不太熟悉Kinetic.js，所以我不知道它是否可以屏蔽，或者在HTML/CSS中是否可以屏蔽。。。

_clip: function(container) {
   var context = this.getContext(); 
   context.save();
   this._applyAncestorTransforms(container);
   context.beginPath(); 
   container.getClipFunc()(this);
   context.clip();
   context.setTransform(1, 0, 0, 1, 0, 0);
}