Построение математических функций без рендеринга артефактов

Question

Не думаю, что есть хороший ответ на этот вопрос, но я бы хотел выяснить, есть ли лучший способ сделать это.

Мне нужно построить математическую функцию, которая почти плоская на одном конце экрана и почти вертикальная на другом конце. Нижний левый квадрант круга будет хорошей моделью. Я могу автоматически генерировать столько очков, сколько требуется.

Проблема в том, что я не могу сделать это без всевозможных артефактов.

Я не пробовал примерку Безье; Я не думаю, что это будет даже близко. Насколько я понимаю, Безье предназначен для одноразовой красивой графики, а не для реальной подгонки кривой.

Это оставляет полилинии. Есть только 2 вещи, которые я могу сделать с полилиниями - я могу выбрать длину линии (другими словами, количество точек, которые я автоматически генерирую), и я могу отключить сглаживание (setAttributeNS (null, "shape-render", "хрустящие края").

Если я наберу много очков, то повсюду получу неровности, и результат будет бесполезен. Он также может выглядеть очень сильно, как колеблющийся, из-за чего кажется, что я неправильно рассчитал функцию. Сглаживание не имеет значения, поскольку оно не работает через границы точек.

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

Есть идеи?

Edit: Кажется, что единственный ответ на этот - это на самом деле подгонка кривой Безье. Вы должны предварительно обработать, чтобы найти параметры требуемых сегментов, а затем отобразить результаты. Google предлагает несколько подходов к кривой кривой с Безье.

Answer 1

Полагаю, вы хотите нарисовать y = f (x) за определенный интервал [a, b]

Классическое решение состоит в том, чтобы взять N точек, равномерно распределенных по [a, b], чтобы вычислить f по этим точкам и нарисовать линии (или полиномы).

Это, конечно, не работает в вашем случае, так как у почти вертикально в определенной области. Но почему бы вам не взять больше точек в этих областях (и меньше точек, где функция почти горизонтальна)?

Вы можете вычислить производную вашей функции (или аппроксимировать эту производную с помощью (f (x + h) -f (x)) / h и h small) и определить шаг между двумя последовательными точками с этой производной

Answer 2

У вас есть математическая функция, и вы можете генерировать столько очков, сколько вам нужно.

Я предполагаю, что проблема в том, что, поскольку вы не знаете выходное разрешение (SVG не зависит от устройства), вы не знаете, сколько точек нужно сгенерировать. В противном случае вы можете просто создать ломаную линию, длина каждой строки которой составляет приблизительно 1 пиксель.

Подгонка вашей математической функции к кривой Безье (вероятно) не приведет к идеальному соответствию - точно так же, как круг не может быть идеально согласован с кубической кривой Безье. И я думаю, что задача подгонки вашей функции к кривой Безье не была бы тривиальной (я никогда этого не делал).

Не могли бы вы вывести свою математическую функцию на элемент canvas? Затем вы можете написать некоторый код javascript для построения математической функции в зависимости от выходного разрешения. Подобно тому, как графическая система отображает кривую Безье.

Знаете ли вы, как графические системы отображают кривые Безье? Они аппроксимируют кривую Безье с помощью полилинии, а затем измеряют разность ошибок между полилинией и кривой Безье. Если разница превышает определенный допуск - , где допуск определяется выходным разрешением - безье делится и процесс повторяется для каждой кривой Безье. Когда разница между Безье и полилиниями ниже допуска, полилинии рисуются. http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Computer_graphics