1

这是一个困扰我很久的问题。比如说，我需要在页面中引入一个布娃娃角色动画。显然，这样一个角色的每个身体部位都是一个图像，并且这些图像的数量可以根据角色的复杂性和角色的数量而变得相当大。如果这些字符是静态的（事实上，DOM 动画仍然是可能的，但可能会慢很多），我可以使用 CSS 背景精灵，但是当涉及到使用画布时，似乎你必须求助于加载所有一张一张的图片，这可能会对页面加载时间产生影响。

此外，我想使用一些允许在画布上创建持久对象的框架，例如paper.js或fabric.js，并处理重绘周期。

虽然我认为编写一个解析器来读取字符的 XML/JSON 描述并根据坐标创建对象是一项微不足道（但耗时）的任务，但我想知道是否已经创建和使用了任何此类工具，我可能不知道。

我想使用的是这样的结构：

character : {
  image : 'characters.png',
  body : {
    head : {
      width : 40,
      height : 50,
      xOff : 50,
      yOff : 125
    }
    // Other parts follow
  }
}

是否有任何框架或游戏引擎允许从这种结构创建对象？将多个图像加载到画布中的最佳方法是什么？

感谢您的任何建议。

UPD。添加了一些细节。

4

2 回答 2

4

为此有一个重载版本drawImage：

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// where image: valid image
//          sx: source slice x position
//          sy: source slice y position
//          sWidth:  source slice width
//          sHeight: source slice height
//       same for dx etc.

所以你可以简单地使用与 CSS 背景精灵相同的方法。

参考：

于 2012-12-13T06:51:20.297 回答
2

您可以尝试框架EaselJs。

于 2012-12-13T07:29:33.287 回答