Я пытаюсь создать приложение, которое в основном представляет собой геймпад, который можно использовать для управления игрушкой (машиной или мини-дроном)
Геймпад имеет 2 джойстика (левый и правый), к которым можно прикоснуться иперетаскивается в пределах определенной ограниченной области.
Теперь я в основном сделал базовый макет, и он отлично работает, но если вы переместите каждый в отдельности.Если вы попытаетесь переместить их вместе, это не сработает.
Я имею в виду использование геймпада.Пользователь может перемещать обе палки вместе или одну из них.Если он кого-то двигает, то он работает нормально, но он не работает, когда я пытаюсь переместить оба кардана.
class Square {
constructor(name, cellsSize, mode, circleRadius, dragHandler, releaseHandler) {
if(!cellsSize){ return false;}
let x = (cellsSize/2)-circleRadius,
y = mode == 'BOTH' ? (cellsSize/2)-circleRadius : cellsSize - circleRadius;
this.value = "SATYA";
this.name = name;
this.pan = new Animated.ValueXY();
this.cellsSize = cellsSize;
this.mode = mode;
this.minXY = 0 - CIRCLE_RADIUS; // 50; //this.cellsSize * (0.5);
this.maxXY = cellsSize - CIRCLE_RADIUS; //this.cellsSize * (1.5);
this.halfW = cellsSize/2;
this.halfH = mode == 'BOTH' ? cellsSize/2 : 0;
this.finalX = 0;
this.finalY = 0;
this.constrainedX = this.pan.x.interpolate({
inputRange: [this.minXY, this.maxXY],
outputRange: [this.minXY, this.maxXY],
extrapolate: 'clamp',
});
this.constrainedY = this.pan.y.interpolate({
inputRange: [this.minXY, this.maxXY],
outputRange: [this.minXY, this.maxXY],
extrapolate: 'clamp',
});
this.pan.setValue({ x, y });
this.panResponder = this._buildPanResponder();
this.dragCallback = dragHandler;
this.releaseCallback = releaseHandler;
}
get valueString() { return "ijkl"; }
get panRef() { return this.pan; }
get panResponderRef() { return this.panResponder; }
dragHandler(gesture, event) {
const{ nativeEvent } = event;
const{ halfW, halfH, cellsSize, mode } = this;
let finalX = 0, finalY = 0, normalizedX = 0, normalizedY = 0, dirX = 1, dirY = 1;
dirX = gesture.dx > 0 ? 1 : -1;
dirY = gesture.dy > 0 ? 1 : -1;
if( mode == 'BOTH' || mode == 'X'){ //Locked X axis
normalizedX = Math.abs(gesture.dx) > halfW ? ( dirX*halfW ) : gesture.dx;
finalX = halfW+normalizedX;
finalX = Math.round(finalX*100)/100;
}
if(mode == 'BOTH' || mode == 'Y'){ // Locked Y axis
normalizedY = Math.abs(gesture.dy) > halfH ? ( dirY*halfH ) : gesture.dy;
finalY = cellsSize - (halfH+normalizedY);
finalY = Math.round(finalY*100)/100;
}
if( mode == 'X' || mode == 'FREE' ){ //Free Y axis
normalizedY = gesture.dy;
finalY = (halfH+normalizedY) > cellsSize ? dirY*cellsSize : (halfH+normalizedY);
finalY = (Math.abs(finalY) > cellsSize) ? dirY*cellsSize : finalY; // Cap the top end to max
finalY = (finalY > 0) ? 0 : finalY; // Cap the bottom to min
finalY = Math.round(finalY*100)/100;
}
this.finalX = finalX;
this.finalY = finalY;
this.dragCallback({
name: this.name,
x: toFixed(this.finalX/cellsSize, true),
y: toFixed(this.finalY/cellsSize, true)
});
return;
}
releaseHandler(gesture, event) {
const { dy } = gesture;
const { cellsSize } = this;
if(this.mode === 'X'){
// is it up
if( dy < 0 ){
this.halfH = (this.halfH + gesture.dy);
if ( Math.abs(this.halfH) > cellsSize) {
this.halfH = -1 * cellsSize;
}
}
if( dy > 0 ){
if(Math.abs(this.halfH) < dy){
this.halfH = 0; //move to ground
} else {
this.halfH = this.halfH + dy;
}
}
}
if(this.mode == 'BOTH'){
this.finalX = (cellsSize/2); ///cellsSize;
this.finalY = (cellsSize/2); ///cellsSize;
}
if(this.mode == 'X'){
this.finalX = (cellsSize/2); ///cellsSize;
this.finalY = this.finalY;
}
this.releaseCallback({
name: this.name,
x: toFixed(this.finalX/cellsSize, true),
y: toFixed(this.finalY/cellsSize, true)
});
// console.log(this.halfH);
}
_buildPanResponder() {
return PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderGrant: (event, gestureState) => {
this.pan.setOffset({ x: this.pan.x._value, y: this.pan.y._value });
},
onPanResponderMove: Animated.event([null,
{ //Step 3
dx : this.pan.x,
dy : this.pan.y
}]
,{ listener: (e, gesture) => { this.dragHandler(gesture, e); } }
),
onPanResponderRelease: (event, gesture) => {
const { dy } = gesture;
const { halfH, cellsSize, mode } = this;
if(mode == 'BOTH'){
this.pan.setValue({
x: 0,
y: 0
});
}else{
let value = dy;
if(dy < 0){
value = (Math.abs(this.halfH+gesture.dy) > this.cellsSize) ?
(Math.abs(halfH + dy) - cellsSize) - Math.abs(dy) :
dy;
}
if( dy > 0 ){
if(Math.abs(this.halfH) < dy){
value = Math.abs(this.halfH);
} else {
value = dy;
}
}
this.pan.setValue({
x: 0,
y: value
});
}
this.pan.flattenOffset();
this.releaseHandler(gesture, event);
}
});
}
}
Выше класс, который генерирует маленький круг, который похож на перетаскиваемый элемент.Который можно потрогать и перетащить.
Я вызываю вышеуказанный класс 2 раза в представлении (чтобы получить 2 перетаскиваемых представления), и это правильно показывает, только проблема в том, что мы можем перетаскивать любой из них за раз.Мне нужно уметь перетаскивать оба одновременно.