画架将图像分割成碎片 [英] easeljs splitting an image into pieces

问题描述

我是画架的新手，想知道如何将图像分割成给定数量的图片。从我到目前为止收集的内容来看，我应该使用SpriteSheets来实现这一目标。但是，我见过的唯一教程是在一个Spritesheet中有多个图像的教程，而不是一个分为多个图像并放入SpriteSheet的图像。
这是我的代码到目前为止（我知道变量帧是未定义的，因为我还无法正确访问spriteSheet数组）：

I'm new to easeljs and was wondering how would you split an image into a given number of pieces. From what I've gathered so far, I'm supposed to use SpriteSheets to accomplish this. However, the only tutorials I've seen are ones with multiple images in one Spritesheet, not one image divided into multiple images and put into a SpriteSheet. This is my code so far (I know that the variable frames is undefined since I cannot properly access the spriteSheet array yet):

  var data = {
    images: ["/images/teemo.png"],
    frames: {width:50, height:50}
  };
  var spriteSheet = new createjs.SpriteSheet(data);
  console.log(spriteSheet);
  console.log(spriteSheet[frames]);
  var frames = spriteSheet[frames];
  console.log(frames);
  for (var i=0; i<frames.length; i++){
    var bmp = new createjs.Bitmap(SpriteSheet[frames][i]);
  }

推荐答案

spritesheet是一种有趣的方式（虽然不是真正的课程意图）。你的用法是错误的。

A spritesheet is an interesting way (although not really the intent of the class). Your usage is wrong though.

1. 创建Spritesheet


2. 创建Sprite实例（在EaselJS中称为BitmapAnimation） 0.6.1及更早版本），每个指向同一个SpriteSheet实例


3. 使用sprite.gotoAndStop（frame）让每个实例显示不同的部分

这是一个例子：

for (var i=0; i< numberOfImages; i++) {
    var sprite = new createsjs.Sprite(spriteSheetData);
    sprite.gotoAndStop(i);
    stage.addChild(sprite);
    // Other stuff
}

你也可以裁掉一块使用Bitmap和sourceRect属性的图像，该属性采用Rectangle来定义裁剪区域。这最终与上述方法大致相同，但可能需要更多工作来确定每个矩形尺寸。

You can also crop out a piece of an image using a Bitmap and the sourceRect property, which takes a Rectangle to define the crop area. This ends up being roughly the same as the above approach, but might be more work to determine each Rectangle dimensions.

干杯。

这篇关于画架将图像分割成碎片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！