我需要移动这个"框"在屏幕的白色部分内触摸或鼠标移动时进行分组。
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'fullscreenDiv',
width: 1180,
height: 664
});
var layer = new Kinetic.Layer();
var gamepart = new Kinetic.Rect({
x: 0,
y: 0,
width: 1180,
height: 500,
stroke: 'black',
strokeWidth: 4
});
var statuspart = new Kinetic.Rect({
x: 0,
y: 500,
width: 1180,
height: 164,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
var group = new Kinetic.Group({
draggable: true,
dragBoundFunc: function(pos) {
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
window.addEventListener('keydown', function(e) {
if (e.keyCode == 37) //Left Arrow Key
moveBoxes(-10);
if (e.keyCode == 39) //Right Arrow Key
moveBoxes(10);
stage.draw();
});
function moveBoxes(pixels)
{
group.x(group.x() + pixels);
stage.draw();
}
var oldPos = null;
var touchPos = null;
gamepart.on('touchmove mousemove', moving(stage.getPointerPosition()));
function moving(mousePos){
if(!oldPos)
oldPos = stage.getPointerPosition();
touchPos = mousePos;
var x = touchPos.x - oldPos.x;
moveBoxes(x);
}
</script>
该组包含我添加的方框。 它可以通过键箭头移动,页面可以在webpage
找到答案 0 :(得分:0)
我认为您希望function
用于'touchmove mousemove'
个事件,而不是函数的结果。
gamepart.on('touchmove mousemove', function() {
moving(stage.getPointerPosition())
});