Help with circle implementation

[sobytes]

Hi animecyc,

Would really appriciate some help with adding circle bounds i have been working on this for the past few hours and i have working versions for cirlce bounds here.

http://jsfiddle.net/rdb3geob/

And here.

http://jsfiddle.net/z9vqLnsL/2/

I thought it would be a simple case of copying the code over to my titanium project using ti.draggable as follows.

var container = Ti.UI.createView({
        backgroundColor : 'blue',
borderRadius: 144,
        width : 288,
        height : 288
    });
var free = Draggable.createView({
        opacity : 0,
        backgroundColor : 'transparent',
        borderWidth : 4,
        borderColor : '#101010',
        borderRadius : 30,
        width : 60,
        height : 60,
        zIndex : 2
    });
free.addEventListener('move', function(e) {
                                var r = container.width / 2;
                var small_r = free.width / 2;
                var origin_x = r - small_r;
                var origin_y = r - small_r;
                var x = e.center.x - origin_x;
                var y = e.center.y - origin_y;
                var l = Math.sqrt(x * x + y * y);
                var l_in = Math.min(r - small_r, l);
                free.left = x / l * l_in + origin_x;
                free.top = y / l * l_in + origin_y;
});

But it is just really jumpy, was wonder if you had any suggests would be great functionality to add to the module.

Thanks

[sobytes]

Update this works on the simulator but not on the device have absolutely no idea why ;(

var container = Ti.UI.createView({
        backgroundColor : 'blue',
borderRadius: 144,
        width : 288,
        height : 288
    });
var free = Draggable.createView({
        opacity : 0,
        backgroundColor : 'transparent',
        borderWidth : 4,
        borderColor : '#101010',
        borderRadius : 30,
        width : 60,
        height : 60,
        zIndex : 2
    });
free.addEventListener('move', function(e) {

var circle_cenx = container.width / 2;
        var circle_cenx = container.width / 2;
        var circle_ceny = container.width / 2;
        var circle_radius = container.width / 2;

        var result = limit(e.center.x, e.center.y, circle_cenx, circle_ceny, circle_radius);

        Ti.API.info("X: " + result.x);
        Ti.API.info("Y: " + result.y);

        free.left = (result.x - (free.width / 2));
        free.top = (result.y - (free.height / 2));

        Ti.API.info("free.left: " + (result.x - 30));
        Ti.API.info("free.top: " + (result.y - 30));

});

function limit(x, y, cenx, ceny, r) {
        var dist = distance([x, y], [cenx, ceny]);
        if (dist <= r) {
            return {
                x : x,
                y : y
            };
        } else {
            x = x - cenx;
            y = y - ceny;
            var radians = Math.atan2(y, x);
            return {
                x : Math.cos(radians) * r + cenx,
                y : Math.sin(radians) * r + ceny
            };
        }
    }

    function distance(dot1, dot2) {
        var x1 = dot1[0],
            y1 = dot1[1],
            x2 = dot2[0],
            y2 = dot2[1];
        return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
    }