视网膜(HDPI)KineticJS sprites

时间:2014-12-05 12:24:26

标签: sprite kineticjs retina-display hdpi

我正在使用KineticJS sprites并且无法找到一种方法让它们显示为HDPI - 我尝试使用缩放到一半尺寸(我的图像是我希望它们出现的尺寸的2倍) - 这使得图像变小而不会变得更“密集”。

我也尝试将精灵的宽度和高度定义为半值,但这些属性似乎没有效果。

非常感谢任何帮助。继承人和我正在做的事情的例子,我的尝试被注释掉了:

  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: [
          2,2,70,119,
          71,2,74,119,
          146,2,81,119,
          226,2,76,119
        ],
        punch: [
          2,138,74,122,
          76,138,84,122,
          346,138,120,122
        ]
      },
      frameRate: 7,
      frameIndex: 0,
      //width: imageObj.width / 2,
      //height: imageObj.height / 2
    });

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

    // Scale image down?
    //layer.scaleX(0.5).scaleY(0.5);

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

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

0 个答案:

没有答案