KineticJS：如何获取 Sprite 或图像的宽度和高度？答案

【问题标题】：KineticJS: How do I get the Width and Height of a Sprite or Image?KineticJS：如何获取 Sprite 或图像的宽度和高度？
【发布时间】：2014-09-10 17:32:43
【问题描述】：

我从一个 URL 加载了一个精灵，并想获取精灵的宽度和高度，结果发现宽度和高度总是为零。我创建了以下示例。

如何获取精灵的真实宽度和高度？

我使用 sprite 示例并在这里创建了一个 jsfiddle：http://jsfiddle.net/confile/jVG9t/

这是html代码：

<div id="container"></div>
    <div id="buttons">
      <input type="button" id="punch" value="Width">
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>


Image <br>
<div id="mydiv" ></div>

这是JS代码：

var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

      var imageObj = new Image();
      imageObj.onload = function() {
        var blob = new Kinetic.Sprite({
          x: 250,
          y: 40,
          image: imageObj,
          animation: 'idle',
          animations: {
            idle: [
              // x, y, width, height (4 frames)
              2,2,70,119,
              71,2,74,119,
              146,2,81,119,
              226,2,76,119
            ],
            punch: [
              // x, y, width, height (3 frames)
              2,138,74,122,
              76,138,84,122,
              346,138,120,122
            ]
          },
          frameRate: 7,
          frameIndex: 0
        });

        // add the shape to the layer
        layer.add(blob);

        // add the layer to the stage
        stage.add(layer);

        // start sprite animation
        blob.start();

        var frameCount = 0;

        blob.on('frameIndexChange', function(evt) {
          if (blob.animation() === 'punch' && ++frameCount > 3) {
            blob.animation('idle');
            frameCount = 0;
          }
        });

        document.getElementById('punch').addEventListener('click', function() {
            alert("blob.width: "+blob.width());

        }, false);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/blob-sprite.png';

【问题讨论】：

标签： javascript html canvas kineticjs

【解决方案1】：

您可以通过请求其.width 和.height 属性来获取整个imageObj 的宽度/高度：

var imageObj = new Image();
imageObj.onload = function() {
    var width=imageObj.width;
    var height=imageObj.height;
}

如果 imageObj 是一个 spritesheet，则无法以编程方式获取该 spritesheet 上各个 sprite 的 x、y、宽度、高度。 spritesheet 作者通常会给你这些信息。您通常可以观察 spritesheet 并查看其布局。

您的 KineticJS 演示要求编码人员知道 spritesheet 上每个精灵的 x、y、宽度、高度。

【讨论】：