How to use javascript (or something) to make a grid with dragable points that will modify a curve in realtime?

I want to make a box on the page that c开发者_开发问答ontains a graph with a curve on it, then user can drag a few points around modifying the curve. Preferably javascript or something I can easy share variables with DOM and ASP.NET. I want to get out a certain number of the points. Creating new points and deleting them would be great too. This way I could have a movable curve as well as an ability to select the number of coords they can save to database.

Oh yeah the curve is log(n) base, whatever I guess 10 default?

If you want to do this in javascript then I would suggest you not worry about the asp part, but just focus on the functionality you want, first.

You will want to look at the HTML5 element, <canvas>, and for IE you will want to get excanvas.js, http://excanvas.sourceforge.net/.

For a tutorial on canvas you can start here: https://developer.mozilla.org/en/Canvas_tutorial

This will enable you to have a drawable surface where you can capture mouse click and mouse move events, as well as other javascript events, so you can have the functionality you want.

If you just want to let the user draw a curve, I think you will want to look into using splines. This will let you compute a curve by defining points in 2D space. See, for example:

http://www.math.ucla.edu/~baker/java/hoefer/Spline.htm

I am not sure about the logarithmic base, though.

I created a jQuery plugin that allows you to position elements along the curve. On the home page, I have implemented what you are talking about in order to help generate curves.

It uses a combination of jQuery, jQuery UI and the jCurvy plugin to achieve this. I'd recommend looking at the source on the home page, but here is the code that handles most of it:

$('.draggable').draggable({
                start: function () {

                },
                drag: function () {

                    $('.dot').remove();
                    var curId = $(this).attr('id');
                    var pos = $(this).position();
                    var param;
                    switch (curId) {
                        case 'x1y1':
                            x1 = pos.left;
                            y1 = pos.top;
                            break;

                        case 'x2y2':
                            x2 = pos.left;
                            y2 = pos.top;
                            break;

                        case 'start':
                            x0 = pos.left;
                            y0 = pos.top;
                            break;

                        case 'finish':
                            x3 = pos.left;
                            y3 = pos.top;
                            break;
                    }
                    param = {
                        "x0": x0,
                        "y0": y0,
                        "x1": x1,
                        "y1": y1,
                        "x2": x2,
                        "y2": y2,
                        "x3": x3,
                        "y3": y3
                    };

                    $('.curve').curve(param);
                    $('#sampleCode').text('$(".mySelector").curve(' + JSON.stringify(param) + ')');
                    $('#demoLink').attr('href', 'demo.html?p=' + JSON.stringify(param));
                },
                stop: function () {
                }
            });