KineticJS:我如何在KineticJS雪碧中使用Sprite？
KineticJS:我如何在KineticJS雪碧中使用Sprite？
提问于 2014-07-15 12:39:14
我有一个sprite，其外观类似于以下模式：
Image Image Image
Image Image Image
Image Image Image其中图像是一个图像，所有九个图像都是精灵。它们都在一层。
有一个使用PNG文件这里的sprites教程，但是我找不到如何使SVG文件工作。
，当我使用sprite时，如何设置帧的坐标？如何使用SVG雪碧？
编辑:这是本教程的代码。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
background-color: #222;
display: inline-block;
width: 580px;
height: 202px;
}
#buttons {
position: absolute;
top: 5px;
left: 10px;
}
#buttons > input {
padding: 10px;
display: block;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<input type="button" id="punch" value="Punch">
</div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<script defer="defer">
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() {
blob.animation('punch');
}, false);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/blob-sprite.png';
</script>
</body>
</html> 回答 1
Stack Overflow用户
发布于 2014-07-15 14:31:10
由于您没有提供任何代码，请单击这里以获得该想法，并提供一些关于SVG逐帧动画的不错教程。不过，我绝不会推荐它，因为在每个框架上都会有一个基于向量的元素，其锚点、曲线等都是相互独立的。因此，对于一个小部分的动画，它将不得不加载所有的点，颜色一遍又一遍。您可以创建一个SVG来代替动画。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24758442
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号