I have a problem and I need help. The gyroscope function works properly. There is a strange scaling of "anim", "Object". The black frame should be all over. If I correct the frame, the gyroscope does not work. I can not deal with it. Please help.
https://reklamy.serwisyregionalne.pl/2023/testy/zyroskop2.html
// Inicjalizacja sceny
var stage = new createjs.Stage("canvas");
// Size of the "Object" symbol
var objectWidth = 300;
var objectHeight = 600;
// We add the "Object" symbol to the scene
var movableObject = new lib.Object(); // Here "lib" is the name of the library that contains the "Object" symbol
movableObject.setBounds(0, 0, objectWidth, objectHeight); // Set the boundaries of the object
stage.addChild(movableObject);
// Size of the "Anim" symbol
var animWidth = 300;
var animHeight = 600;
// Starting position of objects
//staticAnimSymbol.x = 0;
//staticAnimSymbol.y = 0;
//movableObject.x = 0;
//movableObject.y = 0;
// We add the "Anim" symbol to the scene
var staticAnimSymbol = new lib.anim(); // Here "lib" is the name of the library that contains the "Anim" symbol
staticAnimSymbol.setBounds(0, 0, animWidth, animHeight); // Set the boundaries of the object
staticAnimSymbol.x = 0; // Alignment on the X axis
staticAnimSymbol.y = 0; // Position on the Y axis
stage.addChild(staticAnimSymbol);
// Listen to the device event
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', handleOrientation);
} else {
console.log("Your device does not support gyroscope.");
}
stage.update();
// Function handling device movement
function handleOrientation(event) {
// We get the rotation angles from the device
var beta = event.beta; //Rotation angle in the X plane
var gamma = event.gamma; //Rotation angle in the Y plane
// We update the position of the "Object" symbol
movableObject.x = canvas.width / 2 + (gamma * 5);
movableObject.y = canvas.height / 2 + (beta * 5);
// We limit the offset so that the object does not go out of bounds
movableObject.x = Math.max(0, Math.min(canvas.width - objectWidth, movableObject.x));
movableObject.y = Math.max(0, Math.min(canvas.height - objectHeight, movableObject.y));
// We refresh the scene
stage.update();
}
// Start the Animation
createjs.Ticker.addEventListener("tick", function() {
stage.update();
});
createjs.Ticker.framerate = 60; // Set the number of frames per second (FPS)
AdChoices