Adds support for limiting the coordinates for stick base.

[Xzereus]

Adds support for limiting the coordinates for stick base by setting limitedBase to true providing either a limitMaxX, limitMaxY, limitMinX, limitMinY, or any combination of the four.

This is very helpful to allow for multiple sticks on the screen, each in a different area of the screen, without having to set the base to a fixed spot.

[jeromeetienne]

i think this feature is already present. see the dual.html example

https://github.com/jeromeetienne/virtualjoystick.js/blob/master/examples/dual.html

[Xzereus]

@jeromeetienne You are correct that this was technically possible with the library, though it required a bit of extra hacking to do it (intercepting the touch event and only passing it on if the touch is in the right area). This enhancement allows this to be done at the time the joystick is created. So the sample becomes:

var joystick    = new VirtualJoystick({
    container   : document.body,
    strokeStyle : 'cyan',
    limitStickTravel: true,
    stickRadius : 120,
    limitedBase : true,
    limitMaxX: window.innerWidth/2
});

// one on the right of the screen
var joystick    = new VirtualJoystick({
    container   : document.body,
    strokeStyle : 'orange',
    limitStickTravel: true,
    stickRadius : 0,
    limitedBase : true,
    limitMinX: window.innerWidth/2      
});

Rather than:

var joystick    = new VirtualJoystick({
    container   : document.body,
    strokeStyle : 'cyan',
    limitStickTravel: true,
    stickRadius : 120       
});
joystick.addEventListener('touchStartValidation', function(event){
    var touch   = event.changedTouches[0];
    if( touch.pageX < window.innerWidth/2 ) return false;
    return true
});

// one on the right of the screen
var joystick    = new VirtualJoystick({
    container   : document.body,
    strokeStyle : 'orange',
    limitStickTravel: true,
    stickRadius : 0     
});
joystick.addEventListener('touchStartValidation', function(event){
    var touch   = event.changedTouches[0];
    if( touch.pageX >= window.innerWidth/2 )    return false;
    return true
});

Additionally, these options support clicking as well as touching, while the example only supports touches (though it could, of course, be enhanced to include clicking if several more lines of code were added).

It's worth noting that my enhancement would not support screen resizing at the moment, but I don't think this is much of an issue with mobile devices as it is. It could be further enhanced to include an update function which is called when the window is resized and will update the limits.

Of course, if you decide not to include this in the library, I understand. I have found it useful in keeping clean code, though.