[英]KineticJS: How do I get the Width and Height of a Sprite or Image?
我从URL加载了一个精灵,想要得到精灵的宽度和高度,结果原来宽度和高度始终为零。 我创建了以下示例。
如何获得子画面的实际宽度和高度?
我使用精灵示例,并在此处创建了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';
您可以通过请求它的.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的作者通常会为您提供此信息。 您经常可以查看子画面并查看其布局。
您的KineticJS演示要求编码人员知道每个Sprite的x,y,width,height在Spritesheet上的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.