1

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

  1. 我无法用 Kinetic.Image() 对象填充形状。

  2. 我无法裁剪 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 加载到可通过填充使用的图像对象中，然后继续使用地图脚本。这引入了大量的性能问题/加载时间，所以我将继续假设我想做的事情是不可行的。如果有人对如何正确执行此操作有任何想法，请告诉我。

4

1 回答 1

0

您可以通过填充来接受图像，如以下使用 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
    });

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

于 2012-11-22T14:18:22.797 回答