虚拟操纵杆边框椭圆形而不是圆形

Question

我正在拼命尝试使用 Phaser 在 Javascript 中创建一个虚拟操纵杆。我的问题是，操纵杆的边框不是圆形的，而是椭圆形的。我完全不知道为什么。

我准备了一点 FiddleJS 来演示我的问题：

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 400, Phaser.AUTO, 'game_div');
var game_state = {};

// Creates a new 'main' state that wil contain the game
game_state.main = function() { };  
game_state.main.prototype = {

    preload: function() { 
  // Function called first to load all the assets
        //game.load.image('hello', '');
    },

    create: function() { 
     //setup of the virutal joystick
        this.joyStick = game.add.sprite(200, 200, 'shadedlightjoystick');
        this.joyStick.anchor.setTo(0.5,0.5);

        joyStickStartPositionX = this.joyStick.width * 1.5;
        joyStickStartPositionY = game.camera.height - this.joyStick.height * 1.2;
        this.joyStick.inputEnabled = true;
        this.joyStick.input.enableDrag(false);
        maxMovingDistanceJoyStick = this.joyStick.width / 1.5;
    },
    
    update: function() {
        var joyStickStartPositionX = 200;
        var joyStickStartPositionY = 200;
   // joystick bevariour
        if(game.input.activePointer.isDown) {
            
            distanceBetweenJoyStickInput =  this.distance(this.joyStick.x, this.joyStick.y, joyStickStartPositionX, joyStickStartPositionY);
            
            if(distanceBetweenJoyStickInput > maxMovingDistanceJoyStick){

                var distanceX = game.input.x - joyStickStartPositionX;
                var distanceY = game.input.y - joyStickStartPositionY;

                var multiplierY = Math.cos(distanceY / Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)));
                
                if(distanceY > 0) {
                    multiplierY = -1 + multiplierY;
                }else{
                 multiplierY = 1 - multiplierY;
                }


                this.joyStick.x = joyStickStartPositionX + maxMovingDistanceJoyStick * Math.sin(distanceX / Math.sqrt(Math.pow(distanceX,2) + Math.pow(distanceY,2)));
                
                this.joyStick.y = joyStickStartPositionY - maxMovingDistanceJoyStick * multiplierY;
             }

        }else{
            this.joyStick.x = joyStickStartPositionX;
            this.joyStick.y  = joyStickStartPositionY;
        }
    },
    
    distance:function (x1, y1, x2, y2) {

        var dx = x1 - x2;
        var dy = y1 - y2;

        return Math.sqrt(dx * dx + dy * dy);

    },
};

// Add and start the 'main' state to start the game
game.state.add('main', game_state.main);  
game.state.start('main');

#game_div {
      width: 400px;
      margin: auto;
      margin-top: 50px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.3/phaser.min.js"></script>
<div id="game_div"> </div>

Joystick 的边框是圆形而不是椭圆形，我需要更改什么？

如果你喜欢 jsfiddle：https://jsfiddle.net/Lmodkda1/24/

非常感谢！

Answer 1

你不应该划分距离。你需要斜边的长度和角度：

var hyp = Math.min(Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)), maxMovingDistanceJoyStick);
var angle = Math.atan(distanceY / distanceX)
var mul = distanceX < 0 : -1 ? 1;

然后你需要将它与 cos 和 sin 一起使用:

this.joyStick.x = joyStickStartPositionX + hyp * Math.cos(angle) * mul;
this.joyStick.y = joyStickStartPositionY + hyp * Math.sin(angle) * mul;

虚拟操纵杆边框椭圆形而不是圆形

Virtual Joystick border oval instead of round

javascript

geometry

phaser-framework