在KineticJS中使用touchmove移动图像
在KineticJS中使用touchmove移动图像
提问于 2014-04-01 00:16:19
我想用'touchmove‘事件来移动图像，我知道我可以将拖放设置为true并使用它，但是在需要使用'touchmove’时，我可以在以后添加更多的东西(缩放、旋转等)。
问题是:- 1-它没有反应，只是在几次尝试之后随机出现。当图像大于50x50时，什么也不会发生。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body onmousedown="return false;">
<div id="container"></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: 250,
height: 400
});
var layer = new Kinetic.Layer();
function writeMessage(message) {
text.setText(message);
layer.draw();
}
var text = new Kinetic.Text({
x: 10,
y: 10,
fontFamily: 'Calibri',
fontSize: 24,
text: '',
fill: 'black'
});
image=new Image();
image.onload=function(){
var map = new Kinetic.Image({
x: 0,
y: 0,
image: image,
width: 50,
height: 50
});
map.on('touchstart',function() {
writeMessage('Touchstart');
});
map.on('touchmove',function() {
var touchPos = stage.getPointerPosition();
var x = touchPos.x;
var y = touchPos.y;
var pos= {x:x,y:y};
map.move(pos);
writeMessage('x: ' + x + ', y: ' + y);
});
layer.add(map);
stage.add(layer);
};
image.src='img/map-04.png';
layer.add(text);
</script>
</body>
</html>提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-04-01 00:37:12
如果使用的是move函数，则必须传递dx和dy，也不能传递绝对位置。在您的情况下，您可以使用以下方法：
map.on('touchmove', function() {
var pos = stage.getPointerPosition();
map.position(pos);
writeMessage('x: ' + pos.x + ', y: ' + pos.y);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22774563
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号