Question

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

我准备了一个小小的FiddleJS来证明我的问题：

public class MainActivity extends AppCompatActivity {

    private Context context;

    private WebView webView;
    private LoginDialog dialog;
    private PinDialog pin;
    private RelativeLayout mainLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        context = this;

        ClientCredentials.loadCredentials(context);

        mainLayout = (RelativeLayout)findViewById(R.id.mainLayout);
        Button loginButton = (Button)findViewById(R.id.loginButton);
        webView = (WebView)findViewById(R.id.webview);
        dialog = new LoginDialog(context);
        pin = new PinDialog(context, dialog);

        loginButton.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                if(ClientCredentials.getClientId() > 0 && ClientCredentials.getToken().equals("")) {
                    dialog.show();
                }
                else {
                    pin.show();
                }

                return false;
            }
        });

        pin.setOnDismissListener(new DialogInterface.OnDismissListener() {
            @Override
            public void onDismiss(DialogInterface dialog) {
                loadUrl();
            }
        });

        dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
            @Override
            public void onDismiss(DialogInterface dialog) {
                loadUrl();
            }
        });

        webView.setWebChromeClient(new WebChromeClient());
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        if(ClientCredentials.getClientId() > 0 || !ClientCredentials.getToken().equals("")) {
            loadUrl();
        }
        else {
            dialog.show();
        }
    }

    private void loadUrl() {
        webView.loadUrl(String.format("http://XXX?Address_Id=%d&Token=%s", ClientCredentials.getClientId(), ClientCredentials.getToken()));
    }
}

// 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;
    }

我需要更改操纵杆的边框是圆形而不是椭圆形？

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

非常感谢！

Answer 1

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

<ListView x:Name="MyListView" ItemsSource="{StaticResource ItemCollection}">
  <ListView.ItemsPanel>
     <ItemsPanelTemplate>

        <VirtualizingWrapPanel Orientation="Horizontal"/> 

     </ItemsPanelTemplate>
   </ListView.ItemsPanel> 
</ListView>

然后你需要使用cos和sin：

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;

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

1 个答案: