Question

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

我无法使用Kinetic.Image（）对象填充形状。

我无法裁剪Image（）对象。

var rect = new Kinetic.Rect({  
    x: 0,  
    y: 0,  
    width: 64,  
    height: 64,  
    fill:{  
        image: imageObj,  
        crop:{  
            x: 128,  
            y: 128,  
            width: 64,  
            height: 64  
        },   
    },  
        strokeWidth: 1  
});

这不起作用，我也无法用预先剪切的Kinetic.Image（）对象替换image：imageObj。有什么想法吗？

编辑：看起来可以通过将Kinetic.Image绘制到场景中，使用toDataUrl将裁剪的Kinetic.Image加载到可用填充的图像对象中，然后继续使用地图脚本。这引入了大量的性能问题/加载时间，因此我将继续并假设我想做的事情是不可行的。如果有人对如何做到这一点有任何想法，请告诉我。

Answer 1

您可以获得填充以接受图像，如本例中的Vader / Yoda所示：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-fill-with-kineticjs/

我建议将图像加载到数组中（就像他在示例中所做的那样），然后在创建图块时调出图像。

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

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
    });

它有效，所以没有理由不能给你你想要的东西。

KineticJS - 裁剪填充图像

1 个答案: