Image KineticJS-裁剪填充图像

我正在尝试在我的游戏中使用tileset。我想裁剪填充图像，但无法，因为

我无法用动能.Image（）对象填充形状

我无法裁剪Image（）对象

这不起作用，我也不能用预先裁剪的动能.image（）对象替换image:imageObj。有什么想法吗

---

编辑：似乎可以将Kinetic.Image绘制到场景中，使用toDataUrl将裁剪后的Kinetic.Image加载到可由fill使用的图像对象中，然后继续使用贴图脚本。这会带来大量性能问题/加载时间，因此我将继续并假设我想做的事情不可行。如果有人对如何正确地做到这一点有任何想法，请让我知道

您可以获取填充以接受图像，如本例中使用维德/Yoda时所示：

我的建议是将图像加载到一个数组中（正如他在示例中所做的），然后在创建平铺时调用图像

在该示例中，我将第一个五角大楼的代码更改为矩形，如下所示：

var colorPentagon = new Kinetic.Rect({
      x: 40,
      y: 50,
      width: 100,
      height: 100,
      fill: {
        image: images.darthVader,
        offset: [-220, -70]
      },
      stroke: "black",
      strokeWidth: 4,
      draggable: true
    });

---

它是有效的，因此没有理由不能满足您的需求。

我相信OP要求的是能够使用dynamic.Rect（）但使用CSS精灵图像进行填充（我称之为sprite-一个包含多个较小图像的图像，在正常DOM情况下用作div的背景填充，以限制http请求的数量）。OP，有什么原因不能将Kinetic.image（）与sprite中的裁剪一起使用，而不是使用Kinetic.Rect（）吗对象？Lazerblade-Duh！当我发布这个问题时，我已经编写了一整天了。谢谢你的简单修复！

var colorPentagon = new Kinetic.Rect({
      x: 40,
      y: 50,
      width: 100,
      height: 100,
      fill: {
        image: images.darthVader,
        offset: [-220, -70]
      },
      stroke: "black",
      strokeWidth: 4,
      draggable: true
    });