How to get Clicked or Tapped Coordinates/position (X,Y) of a button or panel

Hi, i’m trying to implement ripple effect / animation, and i need to know where is the coordinates or position when user clicked on a button or panel, so when the ripple effect / animation start, a circle will scale from the clicked coordinate. Or is there any better solution for implementing ripple effect?

Sorry for my English, I’m from Indonesia

Thanks

The click position is passed as arguments to your handlers in JavaScript.

Here’s a very basic example of how to use it:

<App Theme="Basic">
    <Panel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");
            cx = Observable(0);
            cy = Observable(0);

            function clik(arg){
                cx.value = arg.x - 100/2;
                cy.value = arg.y - 100/2;
            }

            module.exports={clik:clik, cx: cx, cy: cy};
        </JavaScript>
        <Circle ux:Name="cir" X="{cx}" Y="{cy}" Width="100" Height="100" Opacity="0" Color="#fff" HitTestMode="None"/>
        <Panel ux:Name="cp" Color="#f00" >
            <Clicked Handler="{clik}">
                <Change cir.Opacity="1" Duration="0.3"/>
            </Clicked>
        </Panel>
    </Panel>
</App>

Were you able to get the ripple effect to work? can you share your code?