Как использовать JavaScript (или что-то), чтобы сделать сетку с перетаскиваемыми точками, которые будут изменять кривую в реальном времени?

Question

Я хочу создать на странице прямоугольник, содержащий график с кривой, затем пользователь может перетащить несколько точек вокруг изменения кривой. Предпочтительно javascript или что-то, что я могу легко поделиться переменными с DOM и ASP.NET. Я хочу набрать определенное количество очков. Создание новых точек и их удаление тоже было бы здорово. Таким образом, у меня может быть подвижная кривая, а также возможность выбрать количество координат, которые они могут сохранить в базе данных.

О, да, кривая - логарифмическая (n) база, что я думаю, 10 по умолчанию?

Answer 1

Если вы хотите сделать это в javascript, я бы посоветовал вам не беспокоиться о части asp, а просто сосредоточиться на функциональности, которую вы хотите, в первую очередь.

Вы захотите взглянуть на элемент HTML5, <canvas>, а для IE вы захотите получить excanvas.js, http://excanvas.sourceforge.net/.

Для учебника по холсту вы можете начать здесь: https://developer.mozilla.org/en/Canvas_tutorial

Это позволит вам иметь нарисованную поверхность, на которой вы сможете фиксировать события щелчка мышью и перемещения мыши, а также другие события javascript, чтобы вы могли иметь нужные вам функции.

Answer 2

Я создал плагин jQuery , который позволяет позиционировать элементы вдоль кривой. На главной странице я реализовал то, о чем вы говорите, чтобы помочь сгенерировать кривые.

Для этого используется комбинация jQuery, jQuery UI и плагина jCurvy . Я бы порекомендовал посмотреть исходный код на домашней странице, но вот код, который обрабатывает большую часть этого:

$('.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 () {
                }
            });

Answer 3

Если вы просто хотите позволить пользователю нарисовать кривую, я думаю, вы захотите изучить использование сплайнов. Это позволит вам вычислить кривую, определив точки в 2D-пространстве. Смотрите, например:

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

Я не уверен насчет логарифмической основы.