英文:
How do I get the values of a nipple.js joystick
问题
我有2个操纵杆，并希望使用JS获取它们的位置和大小属性。官方文档对我来说很难理解，因为它非常理论化，没有实际示例。
我尝试使用控制台来通过检查操纵杆的值来获取属性，但我很不幸地没有获得任何信息。
我只需要获取两个操纵杆的中心和摇杆位置。
以下是我的JavaScript代码：
// touchdevice被设置为true，一旦触摸操作发生
if (touchdevice) {
// mstick和astick是预定义的
mstick = document.querySelector("#mstick");
astick = document.querySelector("#astick");
window.mstick = nipplejs.create({
color: "#000000",
shape: "square",
zone: mstick,
threshold: 0.5,
fadeTime: 300
});
window.astick = nipplejs.create({
color: "#000000",
shape: "circle",
zone: astick,
threshold: 0.5,
fadeTime: 300
});
}
英文:
I'm having 2 joysticks and want to get their position and size properties with JS. The official documentation s hard for me to understand, because it is very very theoretical and has no practical examples.
I tried using the console to get the properties by checking the value of the joysticks, but I miserably failed getting any information out of that.
All I need is to get both joystick centers and stick positions.
Here is my js:
/touchdevice is set to true the moment a touch action happens
if(touchdevice) {
/mstick and astick are predefined
mstick = document.querySelector("#mstick");
astick = document.querySelector("#astick");
window.mstick = nipplejs.create({
color: "#000000",
shape: "square",
zone: mstick,
threshold: 0.5,
fadeTime: 300
});
window.astick = nipplejs.create({
color: "#000000",
shape: "circle",
zone: astick,
threshold: 0.5,
fadeTime: 300
});
}
答案1
得分: 0
以下是翻译好的代码部分：
if (touchdevice) {
// mstick 和 astick 都是预定义的
const mstick = document.querySelector("#mstick");
const astick = document.querySelector("#astick");
window.mstick = {
position: {
x: 0, y: 0
},
distance: 0,
};
window.astick = {
position: {
x: 0, y: 0
},
distance: 0,
};
window.mstickInstance = nipplejs.create({
color: "#000000",
shape: "square",
zone: mstick,
threshold: 0.5,
fadeTime: 300,
});
window.astickInstance = nipplejs.create({
color: "#000000",
shape: "circle",
zone: astick,
threshold: 0.5,
fadeTime: 300,
});
window.mstickInstance.on("move", (event, nipple) => {
window.mstick.position = nipple.position;
window.mstick.distance = nipple.distance;
window.mstick.direction = nipple.angle.radian;
console.log(window.mstick);
});
window.astickInstance.on("move", (event, nipple) => {
window.astick.position = nipple.position;
window.astick.distance = nipple.distance;
window.astick.direction = nipple.angle.radian;
console.log(window.astick);
});
}
请注意，我已经更正了原始代码中的"转义字符，以使代码更加清晰和可读。
英文:
My friend and fellow developer colleague Wef324 (on Discord) helped me with this question. Here is the end result:
if (touchdevice) {
//mstick and astick are predefined
const mstick = document.querySelector("#mstick");
const astick = document.querySelector("#astick");
window.mstick = {
position: {
x:0, y:0
},
distance: 0,
};
window.astick = {
position: {
x:0, y:0
},
distance: 0,
};
window.mstickInstance = nipplejs.create({
color: "#000000",
shape: "square",
zone: mstick,
threshold: 0.5,
fadeTime: 300,
});
window.astickInstance = nipplejs.create({
color: "#000000",
shape: "circle",
zone: astick,
threshold: 0.5,
fadeTime: 300,
});
window.mstickInstance.on("move", (event, nipple) => {
window.mstick.position = nipple.position;
window.mstick.distance = nipple.distance;
window.mstick.direction = nipple.angle.radian;
console.log(window.mstick);
});
window.astickInstance.on("move", (event, nipple) => {
window.astick.position = nipple.position;
window.astick.distance = nipple.distance;
window.astick.direction = nipple.angle.radian;
console.log(window.astick);
});
}
This code basically saves picked values the "move" event delivers with it and saves them into the corresponding window.stickname variable`.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论