Интерполяция Catmull-Rom на путях SVG

Я экспериментирую с созданием высокопроизводительных, красивых карандашных инструментов с использованием путей SVG.

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

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

На линейных участках пути лишние точки удаляются, оставляя только точки, необходимые для представления сегмента — я делаю это с помощью Рамера-Дугласа-Пекера.

Но упрощение пути превращает его в полигон с низкой точностью.

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

Возможное решение состоит в том, чтобы соединить точки пути с кубическим Безье, однако это не очень хорошо работает на упрощенных путях. Расстояние между точками слишком велико для того, чтобы кубический Безье мог «сидеть» хорошо, поэтому сглаженный путь больше не точно отражает предполагаемый путь пользователя.

Другое решение — просто использовать алгоритм «постобработки», такой как алгоритм Шнайдера по исходному пути — этот алгоритм практически не будет работать в режиме реального времени, так как он увеличивает производительность.

Идеальное решение

Решение, которое (я думаю) могло бы сработать, — это использовать Centripetal Catmull-Rom< /а> интерполяция.

Центростремительный Catmull Rom против остальных вариантов Catmull-Rom

Из всех алгоритмов, которые я исследовал, этот кажется наиболее многообещающим, поскольку:

  1. Не создает самопересечений на крутых поворотах
  2. Он более плотно прилегает к точкам, поэтому более точно представляет исходный путь.

Является ли Catmull-Rom алгоритмом, который интерполирует ряд правильных точек x/y, или исходный путь должен состоять из кривых?


person nicholaswmin    schedule 10.06.2015    source источник
comment
Как и многие другие языки программирования, SVG может рисовать квадратичные и кубические кривые Безье и дуги, ничего более причудливого в спецификации нет.   -  person Hummeling Engineering BV    schedule 10.06.2015
comment
@HummelingEngineering Да, я это знаю, я даже упоминаю об этом в вопросе.   -  person nicholaswmin    schedule 10.06.2015
comment
@Nicholas_Kyriakides, это ответ на ваш второй вопрос. Я думаю, вам придется описать свой путь, используя последовательность кривых Безье с контрольными точками, полученными с помощью алгоритма Катмулла-Рома.   -  person Hummeling Engineering BV    schedule 10.06.2015
comment
Верно. Но как это выполнимо, вот в чем вопрос   -  person nicholaswmin    schedule 10.06.2015
comment
@Nicholas_Kyriakides, вы не упомянули кривые Безье в своем вопросе, хотя это единственный способ сделать что-то гладким в SVG, поэтому вы все равно будете их использовать. Когда вы уже сократили свои данные с помощью алгоритма Рамера-Дугласа-Пекера, пытались ли вы использовать их в качестве контрольных точек Безье?   -  person Hummeling Engineering BV    schedule 10.06.2015
comment
@HummelingEngineering Вы имеете в виду точки якоря, а не точки control. Если так, то да, но у меня не будет никаких данных для использования в качестве контрольных точек, они будут быть создан путем выполнения какой-либо подгонки кривой, такой как Catmull-Rom   -  person nicholaswmin    schedule 10.06.2015
comment
@Nicholas_Kyriakides это правильно, кривые Безье проходят через свои опорные точки, а не через контрольные точки. Но если они «достаточно близки», это может быть визуально приемлемо.   -  person Hummeling Engineering BV    schedule 10.06.2015
comment
Ради точности я бы предпочел использовать обоснованный и подходящий алгоритм, который вычисляет их, а не произвольно выбирать положение контрольных точек.   -  person nicholaswmin    schedule 10.06.2015
comment
@Nicholas_Kyriakides, насколько я понимаю, Catmull-Rom (CR) определяет кривую на основе 4 точек (например, Безье). То, что вам нужно, это что-то вроде обратного CR, чтобы получить эти 4 точки на основе (возможно, сглаженного) сегмента кривой.   -  person Hummeling Engineering BV    schedule 10.06.2015
comment
@Nicholas_Kyriakides SVG предоставляет команду гладкой квадратичной кривой, которая обозначается буквой T. За командой следует следующая конечная точка кривой; контрольная точка вычисляется автоматически, как сказано в спецификации, путем отражения контрольной точки на предыдущую команду относительно текущей точки.   -  person Hummeling Engineering BV    schedule 10.06.2015
comment
Не уверен, что это полезно, но я заметил, что Snap.svg имеет доступ к формату кривой catmull-rom в своей команде пути, если он используется, snapsvg.io/docs/#Paper.path, то есть используйте R в строке пути.   -  person Ian    schedule 10.06.2015
comment
@Ian Да, потому что это означает, что Snap.svg выполняет внутреннее преобразование Catmull-Rom в Cubic Bezier - спасибо.   -  person nicholaswmin    schedule 12.06.2015


Ответы (2)


Чтобы напрямую ответить на ваши вопросы:

  1. да. Сплайн Катмулла-Рома — это алгоритм интерполяции последовательности точек (x, y, z). Он создаст кубическую полиномиальную кривую между каждыми двумя последовательными точками.
  2. Вы не можете напрямую использовать сплайн Catmull Rom для пути SVG. Сначала вам нужно преобразовать ее в кубическую кривую Безье.

Для сегмента кривой, определяемого точками P0, P1, P2 и P3 и последовательностью узлов t0, t1, t2, t3, центростремительный сплайн Кэтмулла-Рома (определенный между точками P1 и P2) может быть вычислен по рекурсивной формуле, представленной в https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline. Поэтому я не буду здесь подробно останавливаться.

Чтобы преобразовать ее в кубическую кривую Безье, вам нужно вычислить первую производную в P1 и P2 как

M1 = (t2-t1)*(c1*(P1-P0)/(t1-t0) + c2*(P2-P1)/(t2-t1))
M2 = (t2-t1)*(d1*(P2-P1)/(t2-t1) + d2*(P3-P2)/(t3-t2))

Где

 c1 = (t2-t1)/(t2-t0),
 c2 = (t1-t0)/(t2-t0),
 d1 = (t3-t2)/(t3-t1),
 d2 = (t2-t1)/(t3-t1)

Затем вы можете преобразовать ее в кубическую кривую Безье с 4 контрольными точками: Q0, Q1, Q2 и Q3:

Q0 = P1
Q1 = P1 + M1/3
Q2 = P2 - M2/3
Q3 = P2
person fang    schedule 14.06.2015
comment
Я понимаю, что P0, P1, P2 и P3 представляют собой ряд точек x/y, которые я буду использовать в уравнении CR. Какова последовательность узлов и что я получаю в результате из уравнения CR? - person nicholaswmin; 22.06.2015
comment
Последовательность узлов — это параметр, назначаемый каждой точке данных. Вам нужно следовать способу, описанному на странице Wiki в моем посте, чтобы назначить параметры для получения центростремительного сплайна CR. Когда у вас есть последовательность узлов, вы можете получить контрольные точки для кубической кривой Безье. - person fang; 22.06.2015
comment
Спасибо - у меня кое-что работает отлично, кроме одной вещи. У меня замкнутая форма и очень редко сплайн проходит через неправильные контрольные точки. Это может быть еще один вопрос TBH, но знаете ли вы случаи, когда CR «путает» контрольные точки (из-за отсутствия лучшего слова)? Я подозреваю случай стабильности чисел с плавающей запятой. - person nicholaswmin; 22.06.2015
comment
Я не могу понять, в чем проблема, просто из краткого текстового описания. Без более подробного описания (желательно картинки с изображением проблемы) ничего предположить не могу. Прости. - person fang; 23.06.2015
comment
Извините за это - была проблема с Ramer-Douglas-Peucker. Catmull-Rom работает без нареканий - еще раз спасибо - person nicholaswmin; 21.07.2015
comment
Спасибо за этот ответ! Работает как шарм! - person philipp; 16.06.2016

Я использую кубы интерполяции для этого

  1. точка образца

    • mouse direction change in any axis
    • если мышь прошла какое-то расстояние, для большей точности могу добавить: если угол направления меняется слишком сильно (я этим не пользуюсь)
    • если мышь останавливается (это можно игнорировать, если вы также используете мышь вверх / вниз)
  2. использовать точки выборки в качестве контрольных точек для кубической интерполяции

    см. Кубическая интерполяция против кубической Безье, вы также найдете преобразование между интерполяцией и кубической Безье

  3. если этого недостаточно, вы можете соединить линии в одном направлении

    Вот пример рисунков от руки таким способом:

    следуйте за мышью

    И SVG:

    <svg width="512" height="512" viewBox="-131.734968 -63.890725 383.802249 203.65153" >
     <path fill="none" stroke="black" stroke-width="1px" data-tool="-1" data-cfg="-1" data-group="-1" data-hair="0" data-dir="0" transform="matrix(1,0,0,1,0,0" d="M -81.842337 36.317509 c 0 0 -0.494188 0.282842 0 0 c 0 0 4.1653 -2.262737 4.447693 -2.545579 c 0.494188 -0.282842 2.188547 -2.262737 2.541539 -2.545579 c 0.282393 -0.282842 2.823932 -2.192026 3.176923 -2.545579 c 0.352991 -0.282842 2.965128 -2.828421 3.176923 -3.181974 c 0.352991 -0.353552 1.623761 -2.899132 1.906154 -3.181974 c 0.211794 -0.353552 2.329744 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 1.623761 -2.969842 1.906154 -3.181974 c 0.211794 -0.353552 2.400342 -1.697053 2.541539 -1.909184 c 0.282393 -0.212131 0.988376 -1.626342 1.270769 -1.909184 c 0.141196 -0.212131 2.329744 -2.333447 2.541539 -2.545579 c 0.282393 -0.282842 1.411966 -1.626342 1.906154 -1.909184 c 0.211794 -0.212131 3.953505 -2.474869 4.447693 -2.545579 c 0.494188 -0.282842 4.024103 -0.565684 4.447693 -0.636394 c 0.494188 -0.07071 3.247522 -0.494973 3.812308 -0.636394 c 0.423589 -0.07071 4.730086 -1.272789 5.083078 -1.272789 c 0.564786 -0.141421 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.753333 0 3.176923 0 c 0.352991 0 3.31812 -0.212131 3.812308 0 c 0.423589 0 4.024103 1.626342 4.447693 1.909184 c 0.494188 0.212131 3.459317 2.192026 3.812308 2.545579 c 0.423589 0.282842 2.965128 2.828421 3.176923 3.181974 c 0.352991 0.353552 1.764957 2.61629 1.906154 3.181974 c 0.211794 0.353552 1.270769 4.454764 1.270769 5.091159 c 0.141196 0.565684 0 5.23258 0 5.727554 c 0 0.636394 0 3.889079 0 4.454764 c 0 0.494973 -0.070598 4.596185 0 5.091159 c 0 0.565684 0.423589 4.101211 0.635384 4.454764 c 0.070598 0.494973 1.623761 2.899132 1.906154 3.181974 c 0.211794 0.353552 1.976752 2.474869 2.541539 2.545579 c 0.282393 0.282842 4.730086 0.636394 5.083078 0.636394 c 0.564786 0.07071 2.753333 0 3.176923 0 c 0.352991 0 3.529915 0 3.812308 0 c 0.423589 0 2.04735 0 2.541539 0 c 0.282393 0 4.024103 0 4.447693 0 c 0.494188 0 3.459317 0.07071 3.812308 0 c 0.423589 0 2.89453 -0.565684 3.176923 -0.636394 c 0.352991 -0.07071 2.04735 -0.353552 2.541539 -0.636394 c 0.282393 -0.07071 4.235898 -2.404158 4.447693 -2.545579 c 0.494188 -0.282842 1.482564 -0.989947 1.906154 -1.272789 c 0.211794 -0.141421 3.600513 -2.262737 3.812308 -2.545579 c 0.423589 -0.282842 1.694359 -2.262737 1.906154 -2.545579 c 0.211794 -0.282842 1.623761 -2.192026 1.906154 -2.545579 c 0.211794 -0.282842 2.329744 -2.969842 2.541539 -3.181974 c 0.282393 -0.353552 1.553162 -1.555631 1.906154 -1.909184 c 0.211794 -0.212131 2.823932 -2.899132 3.176923 -3.181974 c 0.352991 -0.353552 2.823932 -2.333447 3.176923 -2.545579 c 0.352991 -0.282842 2.753333 -1.697053 3.176923 -1.909184 c 0.352991 -0.212131 3.459317 -1.838474 3.812308 -1.909184 c 0.423589 -0.212131 2.823932 -0.565684 3.176923 -0.636394 c 0.352991 -0.07071 2.823932 -0.636394 3.176923 -0.636394 c 0.352991 -0.07071 2.823932 0 3.176923 0 c 0.352991 0 2.541539 -0.07071 3.176923 0 c 0.352991 0 5.436069 0.353552 5.718462 0.636394 c 0.635384 0.07071 2.400342 2.050605 2.541539 2.545579 c 0.282393 0.282842 1.058974 4.030501 1.270769 4.454764 c 0.141196 0.494973 1.835555 3.394106 1.906154 3.818369 c 0.211794 0.424263 0.423589 3.323395 0.635384 3.818369 c 0.070598 0.424263 1.553162 3.95979 1.906154 4.454764 c 0.211794 0.494973 2.753333 4.313343 3.176923 4.454764 c 0.352991 0.494973 3.459317 1.131368 3.812308 1.272789 c 0.423589 0.141421 2.823932 1.202079 3.176923 1.272789 c 0.352991 0.141421 2.682735 0.636394 3.176923 0.636394 c 0.352991 0.07071 3.74171 0 4.447693 0 c 0.494188 0 6.000856 0 6.353847 0 c 0.705983 0 2.753333 0 3.176923 0 c 0.352991 0 3.459317 0.07071 3.812308 0 c 0.423589 0 2.682735 -0.424263 3.176923 -0.636394 c 0.352991 -0.07071 4.1653 -1.697053 4.447693 -1.909184 c 0.494188 -0.212131 2.259145 -1.697053 2.541539 -1.909184 c 0.282393 -0.212131 2.04735 -1.697053 2.541539 -1.909184 c 0.282393 -0.212131 4.235898 -1.626342 4.447693 -1.909184 c 0.494188 -0.212131 1.553162 -2.333447 1.906154 -2.545579 c 0.211794 -0.282842 2.753333 -1.697053 3.176923 -1.909184 c 0.352991 -0.212131 3.529915 -1.767763 3.812308 -1.909184 c 0.423589 -0.212131 2.04735 -1.202079 2.541539 -1.272789 c 0.282393 -0.141421 4.094701 -0.636394 4.447693 -0.636394 c 0.494188 -0.07071 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.753333 0 3.176923 0 c 0.352991 0 3.388718 -0.212131 3.812308 0 c 0.423589 0 3.388718 1.767763 3.812308 1.909184 c 0.423589 0.212131 3.459317 0.919237 3.812308 1.272789 c 0.423589 0.141421 2.965128 2.969842 3.176923 3.181974 c 0.352991 0.353552 1.764957 1.555631 1.906154 1.909184 c 0.211794 0.212131 1.058974 2.899132 1.270769 3.181974 c 0.141196 0.353552 1.835555 2.192026 1.906154 2.545579 c 0.211794 0.282842 0.352991 2.828421 0.635384 3.181974 c 0.070598 0.353552 2.259145 2.899132 2.541539 3.181974 c 0.282393 0.353552 2.117949 2.474869 2.541539 2.545579 c 0.282393 0.282842 3.459317 0.565684 3.812308 0.636394 c 0.423589 0.07071 2.823932 0.636394 3.176923 0.636394 c 0.352991 0.07071 2.823932 -0.07071 3.176923 0 c 0.352991 0 2.753333 0.565684 3.176923 0.636394 c 0.352991 0.07071 3.459317 0.636394 3.812308 0.636394 c 0.423589 0.07071 2.823932 0 3.176923 0 c 0.352991 0 2.682735 0.07071 3.176923 0 c 0.352991 0 4.1653 -0.636394 4.447693 -0.636394 c 0.494188 -0.07071 2.188547 0.212131 2.541539 0 c 0.282393 0 2.682735 -1.697053 3.176923 -1.909184 c 0.352991 -0.212131 4.235898 -1.767763 4.447693 -1.909184 c 0.494188 -0.212131 1.623761 -1.131368 1.906154 -1.272789 c 0.211794 -0.141421 2.329744 -1.060658 2.541539 -1.272789 c 0.282393 -0.141421 1.906154 -1.909184 1.906154 -1.909184 c 0.211794 -0.212131 0 0 0 0m -334.847767 40.092879 c 0 0 -0.352991 -0.141421 0 0 c 0 0 2.682735 1.131368 3.176923 1.272789 c 0.352991 0.141421 4.1653 1.202079 4.447693 1.272789 c 0.494188 0.141421 2.259145 0.494973 2.541539 0.636394 c 0.282393 0.07071 2.188547 1.202079 2.541539 1.272789 c 0.282393 0.141421 2.823932 0.565684 3.176923 0.636394 c 0.352991 0.07071 2.753333 0.565684 3.176923 0.636394 c 0.352991 0.07071 3.459317 0.636394 3.812308 0.636394 c 0.423589 0.07071 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.89453 0 3.176923 0 c 0.352991 0 2.188547 0 2.541539 0 c 0.282393 0 2.823932 0 3.176923 0 c 0.352991 0 2.753333 0 3.176923 0 c 0.352991 0 3.529915 0.141421 3.812308 0 c 0.423589 0 2.04735 -0.989947 2.541539 -1.272789 c 0.282393 -0.141421 4.1653 -2.262737 4.447693 -2.545579 c 0.494188 -0.282842 2.329744 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 1.835555 -2.687 1.906154 -3.181974 c 0.211794 -0.353552 0.564786 -3.95979 0.635384 -4.454764 c 0.070598 -0.494973 1.200171 -4.242632 0.635384 -4.454764 c 0.070598 -0.494973 -4.659488 -2.050605 -5.083078 -1.909184 c -0.564786 -0.212131 -3.529915 0.989947 -3.812308 1.272789 c -0.423589 0.141421 -2.188547 1.979895 -2.541539 2.545579 c -0.282393 0.282842 -3.176923 4.525474 -3.176923 5.091159 c -0.352991 0.565684 0 4.525474 0 5.091159 c 0 0.565684 -0.282393 4.808317 0 5.091159 c 0 0.565684 2.259145 2.474869 2.541539 2.545579 c 0.282393 0.282842 2.117949 0.424263 2.541539 0.636394 c 0.282393 0.07071 3.388718 1.838474 3.812308 1.909184 c 0.423589 0.212131 3.247522 0.565684 3.812308 0.636394 c 0.423589 0.07071 4.588889 0.636394 5.083078 0.636394 c 0.564786 0.07071 4.1653 0 4.447693 0 c 0.494188 0 2.04735 0 2.541539 0 c 0.282393 0 3.953505 0 4.447693 0 c 0.494188 0 3.671111 0.212131 4.447693 0 c 0.494188 0 6.565642 -1.838474 6.989232 -1.909184 c 0.776581 -0.212131 3.459317 -0.424263 3.812308 -0.636394 c 0.423589 -0.07071 2.753333 -1.767763 3.176923 -1.909184 c 0.352991 -0.212131 3.459317 -0.989947 3.812308 -1.272789 c 0.423589 -0.141421 2.823932 -2.050605 3.176923 -2.545579 c 0.352991 -0.282842 3.106325 -4.030501 3.176923 -4.454764 c 0.352991 -0.494973 1.058974 -3.676948 0.635384 -3.818369 c 0.070598 -0.424263 -3.388718 -1.484921 -3.812308 -1.272789 c -0.423589 -0.141421 -3.459317 1.697053 -3.812308 1.909184 c -0.423589 0.212131 -2.823932 1.626342 -3.176923 1.909184 c -0.352991 0.212131 -2.89453 2.262737 -3.176923 2.545579 c -0.352991 0.282842 -2.47094 2.050605 -2.541539 2.545579 c -0.282393 0.282842 -0.635384 3.889079 -0.635384 4.454764 c -0.070598 0.494973 -0.282393 4.808317 0 5.091159 c 0 0.565684 2.329744 2.404158 2.541539 2.545579 c 0.282393 0.282842 1.623761 1.131368 1.906154 1.272789 c 0.211794 0.141421 2.259145 1.202079 2.541539 1.272789 c 0.282393 0.141421 1.976752 0.424263 2.541539 0.636394 c 0.282393 0.07071 4.588889 1.909184 5.083078 1.909184 c 0.564786 0.212131 3.882906 -0.07071 4.447693 0 c 0.494188 0 4.800684 0.636394 5.083078 0.636394 c 0.564786 0.07071 2.188547 0 2.541539 0 c 0.282393 0 2.823932 -0.07071 3.176923 0 c 0.352991 0 2.612137 0.636394 3.176923 0.636394 c 0.352991 0.07071 4.730086 0 5.083078 0 c 0.564786 0 2.89453 0 3.176923 0 c 0.352991 0 2.188547 0.07071 2.541539 0 c 0.282393 0 2.753333 -0.494973 3.176923 -0.636394 c 0.352991 -0.07071 3.247522 -0.989947 3.812308 -1.272789 c 0.423589 -0.141421 4.730086 -2.333447 5.083078 -2.545579 c 0.564786 -0.282842 2.89453 -1.555631 3.176923 -1.909184 c 0.352991 -0.212131 2.400342 -2.969842 2.541539 -3.181974 c 0.282393 -0.353552 1.129572 -1.484921 1.270769 -1.909184 c 0.141196 -0.212131 1.270769 -3.394106 1.270769 -3.818369 c 0.141196 -0.424263 0 -3.394106 0 -3.818369 c 0 -0.424263 0.352991 -3.606237 0 -3.818369 c 0 -0.424263 -2.682735 -1.909184 -3.176923 -1.909184 c -0.352991 -0.212131 -4.024103 -0.07071 -4.447693 0 c -0.494188 0 -3.671111 0.353552 -3.812308 0.636394 c -0.423589 0.07071 -1.200171 1.979895 -1.270769 2.545579 c -0.141196 0.282842 -0.705983 4.525474 -0.635384 5.091159 c -0.070598 0.565684 0.352991 4.666895 0.635384 5.091159 c 0.070598 0.565684 2.259145 3.535527 2.541539 3.818369 c 0.282393 0.424263 2.259145 2.333447 2.541539 2.545579 c 0.282393 0.282842 2.04735 1.626342 2.541539 1.909184 c 0.282393 0.212131 3.882906 2.333447 4.447693 2.545579 c 0.494188 0.282842 4.800684 1.909184 5.083078 1.909184 c 0.564786 0.212131 2.188547 -0.212131 2.541539 0 c 0.282393 0 2.89453 1.909184 3.176923 1.909184 c 0.352991 0.212131 2.04735 -0.141421 2.541539 0 c 0.282393 0 4.024103 1.131368 4.447693 1.272789 c 0.494188 0.141421 3.247522 1.272789 3.812308 1.272789 c 0.423589 0.141421 4.800684 0 5.083078 0 c 0.564786 0 2.188547 0 2.541539 0 c 0.282393 0 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.682735 0 3.176923 0 c 0.352991 0 4.1653 0 4.447693 0 c 0.494188 0 2.188547 0.07071 2.541539 0 c 0.282393 0 2.823932 -0.565684 3.176923 -0.636394 c 0.352991 -0.07071 2.823932 -0.424263 3.176923 -0.636394 c 0.352991 -0.07071 2.612137 -1.626342 3.176923 -1.909184 c 0.352991 -0.212131 4.800684 -2.333447 5.083078 -2.545579 c 0.564786 -0.282842 2.188547 -1.626342 2.541539 -1.909184 c 0.282393 -0.212131 2.89453 -2.262737 3.176923 -2.545579 c 0.352991 -0.282842 2.329744 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 1.764957 -2.61629 1.906154 -3.181974 c 0.211794 -0.353552 1.270769 -4.384053 1.270769 -5.091159 c 0.141196 -0.565684 0.635384 -6.222527 0 -6.363949 c 0 -0.707105 -5.294872 -1.202079 -5.718462 -1.272789 c -0.635384 -0.141421 -3.31812 -0.636394 -3.812308 -0.636394 c -0.423589 -0.07071 -4.094701 -0.353552 -4.447693 0 c -0.494188 0 -3.176923 2.61629 -3.176923 3.181974 c -0.352991 0.353552 0 4.525474 0 5.091159 c 0 0.565684 -0.211794 4.525474 0 5.091159 c 0 0.565684 1.694359 4.949738 1.906154 5.091159 c 0.211794 0.565684 1.694359 1.060658 1.906154 1.272789 c 0.211794 0.141421 1.694359 1.767763 1.906154 1.909184 c 0.211794 0.212131 1.694359 1.131368 1.906154 1.272789 c 0.211794 0.141421 1.553162 0.989947 1.906154 1.272789 c 0.211794 0.141421 2.89453 2.404158 3.176923 2.545579 c 0.352991 0.282842 2.259145 1.202079 2.541539 1.272789 c 0.282393 0.141421 2.259145 0.494973 2.541539 0.636394 c 0.282393 0.07071 2.117949 1.131368 2.541539 1.272789 c 0.282393 0.141421 3.388718 1.202079 3.812308 1.272789 c 0.423589 0.141421 3.459317 0.494973 3.812308 0.636394 c 0.423589 0.07071 2.823932 1.272789 3.176923 1.272789 c 0.352991 0.141421 2.89453 0 3.176923 0 c 0.352991 0 2.188547 0 2.541539 0 c 0.282393 0 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.89453 0 3.176923 0 c 0.352991 0 2.188547 0 2.541539 0 c 0.282393 0 2.753333 0.07071 3.176923 0 c 0.352991 0 3.388718 -0.494973 3.812308 -0.636394 c 0.423589 -0.07071 3.388718 -0.919237 3.812308 -1.272789 c 0.423589 -0.141421 3.600513 -2.61629 3.812308 -3.181974 c 0.423589 -0.353552 1.835555 -4.596185 1.906154 -5.091159 c 0.211794 -0.565684 0.635384 -3.889079 0.635384 -4.454764 c 0.070598 -0.494973 0.211794 -4.525474 0 -5.091159 c 0 -0.565684 -1.553162 -4.879027 -1.906154 -5.091159 c -0.211794 -0.565684 -2.47094 -1.979895 -3.176923 -1.909184 c -0.352991 -0.212131 -6.142052 0.353552 -6.353847 0.636394 c -0.705983 0.07071 -1.694359 2.192026 -1.906154 2.545579 c -0.211794 0.282842 -1.835555 2.757711 -1.906154 3.181974 c -0.211794 0.353552 -0.564786 3.323395 -0.635384 3.818369 c -0.070598 0.424263 -0.776581 4.030501 -0.635384 4.454764 c -0.070598 0.494973 1.058974 3.535527 1.270769 3.818369 c 0.141196 0.424263 1.482564 2.333447 1.906154 2.545579 c 0.211794 0.282842 3.600513 1.767763 3.812308 1.909184 c 0.423589 0.212131 1.482564 1.131368 1.906154 1.272789 c 0.211794 0.141421 3.31812 1.131368 3.812308 1.272789 c 0.423589 0.141421 4.024103 1.202079 4.447693 1.272789 c 0.494188 0.141421 3.459317 0.636394 3.812308 0.636394 c 0.423589 0.07071 2.682735 0 3.176923 0 c 0.352991 0 4.094701 0 4.447693 0 c 0.494188 0 2.89453 0 3.176923 0 c 0.352991 0 2.117949 0 2.541539 0 c 0.282393 0 3.459317 0 3.812308 0 c 0.423589 0 2.89453 0.141421 3.176923 0 c 0.352991 0 2.04735 -1.060658 2.541539 -1.272789 c 0.282393 -0.141421 4.024103 -1.626342 4.447693 -1.909184 c 0.494188 -0.212131 3.600513 -2.333447 3.812308 -2.545579 c 0.423589 -0.282842 1.623761 -1.484921 1.906154 -1.909184 c 0.211794 -0.212131 2.400342 -3.676948 2.541539 -3.818369 c 0.282393 -0.424263 1.270769 -1.272789 1.270769 -1.272789 c 0.141196 -0.141421 0 0 0 0m -261.143135 -114.551083 c 0 0 -0.352991 0.212131 0 0 c 0 0 2.823932 -1.767763 3.176923 -1.909184 c 0.352991 -0.212131 2.89453 -1.202079 3.176923 -1.272789 c 0.352991 -0.141421 2.259145 -0.424263 2.541539 -0.636394 c 0.282393 -0.07071 2.117949 -1.626342 2.541539 -1.909184 c 0.282393 -0.212131 3.600513 -2.262737 3.812308 -2.545579 c 0.423589 -0.282842 1.623761 -2.404158 1.906154 -2.545579 c 0.211794 -0.282842 2.188547 -0.848526 2.541539 -1.272789 c 0.282393 -0.141421 2.89453 -3.464816 3.176923 -3.818369 c 0.352991 -0.424263 2.47094 -2.828421 2.541539 -3.181974 c 0.282393 -0.353552 0.423589 -2.828421 0.635384 -3.181974 c 0.070598 -0.353552 1.764957 -2.969842 1.906154 -3.181974 c 0.211794 -0.353552 1.270769 -2.474869 1.270769 -1.909184 c 0.141196 -0.212131 0 4.737606 0 5.091159 c 0 0.565684 -0.141196 2.828421 0 3.181974 c 0 0.353552 1.129572 2.757711 1.270769 3.181974 c 0.141196 0.353552 1.129572 3.323395 1.270769 3.818369 c 0.141196 0.424263 1.058974 4.030501 1.270769 4.454764 c 0.141196 0.494973 1.553162 3.323395 1.906154 3.818369 c 0.211794 0.424263 2.89453 4.171922 3.176923 4.454764 c 0.352991 0.494973 2.117949 2.404158 2.541539 2.545579 c 0.282393 0.282842 3.459317 1.060658 3.812308 1.272789 c 0.423589 0.141421 2.753333 1.909184 3.176923 1.909184 c 0.352991 0.212131 3.31812 0.212131 3.812308 0 c 0.423589 0 4.235898 -1.767763 4.447693 -1.909184 c 0.494188 -0.212131 1.411966 -0.919237 1.906154 -1.272789 c 0.211794 -0.141421 4.1653 -2.828421 4.447693 -3.181974 c 0.494188 -0.353552 1.976752 -2.687 2.541539 -3.181974 c 0.282393 -0.353552 4.800684 -4.101211 5.083078 -4.454764 c 0.564786 -0.494973 2.400342 -2.899132 2.541539 -3.181974 c 0.282393 -0.353552 1.058974 -2.262737 1.270769 -2.545579 c 0.141196 -0.282842 1.623761 -2.121316 1.906154 -2.545579 c 0.211794 -0.282842 2.259145 -3.323395 2.541539 -3.818369 c 0.282393 -0.424263 2.329744 -4.737606 2.541539 -4.454764 c 0.282393 -0.494973 1.835555 2.192026 1.906154 2.545579 c 0.211794 0.282842 0.564786 2.757711 0.635384 3.181974 c 0.070598 0.353552 0.494188 3.323395 0.635384 3.818369 c 0.070598 0.424263 1.129572 3.95979 1.270769 4.454764 c 0.141196 0.494973 1.058974 3.95979 1.270769 4.454764 c 0.141196 0.494973 1.553162 4.101211 1.906154 4.454764 c 0.211794 0.494973 3.035727 2.969842 3.176923 3.181974 c 0.352991 0.353552 0.776581 1.767763 1.270769 1.909184 c 0.141196 0.212131 3.953505 1.272789 4.447693 1.272789 c 0.494188 0.141421 4.094701 0 4.447693 0 c 0.494188 0 2.753333 0 3.176923 0 c 0.352991 0 3.388718 0.141421 3.812308 0 c 0.423589 0 3.388718 -1.060658 3.812308 -1.272789 c 0.423589 -0.141421 3.529915 -1.555631 3.812308 -1.909184 c 0.423589 -0.212131 2.259145 -2.899132 2.541539 -3.181974 c 0.282393 -0.353552 2.329744 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 1.764957 -2.828421 1.906154 -3.181974 c 0.211794 -0.353552 1.129572 -2.969842 1.270769 -3.181974 c 0.141196 -0.353552 0.988376 -1.555631 1.270769 -1.909184 c 0.141196 -0.212131 2.188547 -3.040553 2.541539 -3.181974 c 0.282393 -0.353552 3.106325 -1.767763 3.176923 -1.272789 c 0.352991 -0.141421 0.494188 3.95979 0.635384 4.454764 c 0.070598 0.494973 1.200171 4.030501 1.270769 4.454764 c 0.141196 0.494973 0.494188 3.252685 0.635384 3.818369 c 0.070598 0.424263 1.058974 4.666895 1.270769 5.091159 c 0.141196 0.565684 1.694359 3.394106 1.906154 3.818369 c 0.211794 0.424263 1.623761 3.464816 1.906154 3.818369 c 0.211794 0.424263 2.117949 2.899132 2.541539 3.181974 c 0.282393 0.353552 3.388718 2.474869 3.812308 2.545579 c 0.423589 0.282842 3.31812 0.636394 3.812308 0.636394 c 0.423589 0.07071 4.024103 0 4.447693 0 c 0.494188 0 3.31812 0 3.812308 0 c 0.423589 0 4.024103 0.07071 4.447693 0 c 0.494188 0 3.31812 -0.353552 3.812308 -0.636394 c 0.423589 -0.07071 4.024103 -2.262737 4.447693 -2.545579 c 0.494188 -0.282842 3.388718 -2.192026 3.812308 -2.545579 c 0.423589 -0.282842 3.600513 -2.899132 3.812308 -3.181974 c 0.423589 -0.353552 1.623761 -2.333447 1.906154 -2.545579 c 0.211794 -0.282842 2.400342 -1.555631 2.541539 -1.909184 c 0.282393 -0.212131 0.917777 -2.828421 1.270769 -3.181974 c 0.141196 -0.353552 3.035727 -2.757711 3.176923 -3.181974 c 0.352991 -0.353552 0.988376 -3.889079 1.270769 -3.818369 c 0.141196 -0.424263 2.47094 0.282842 2.541539 0.636394 c 0.282393 0.07071 0.635384 2.757711 0.635384 3.181974 c 0.070598 0.353552 -0.070598 3.464816 0 3.818369 c 0 0.424263 0.564786 2.61629 0.635384 3.181974 c 0.070598 0.353552 0.564786 4.666895 0.635384 5.091159 c 0.070598 0.565684 0.494188 3.464816 0.635384 3.818369 c 0.070598 0.424263 0.988376 2.757711 1.270769 3.181974 c 0.141196 0.353552 1.976752 3.818369 2.541539 3.818369 c 0.282393 0.424263 4.800684 0 5.083078 0 c 0.564786 0 2.04735 0 2.541539 0 c 0.282393 0 4.094701 0 4.447693 0 c 0.494188 0 2.753333 0 3.176923 0 c 0.352991 0 3.388718 0.212131 3.812308 0 c 0.423589 0 3.459317 -1.697053 3.812308 -1.909184 c 0.423589 -0.212131 2.823932 -1.555631 3.176923 -1.909184 c 0.352991 -0.212131 2.89453 -2.969842 3.176923 -3.181974 c 0.352991 -0.353552 2.259145 -1.555631 2.541539 -1.909184 c 0.282393 -0.212131 2.259145 -2.899132 2.541539 -3.181974 c 0.282393 -0.353552 2.188547 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 2.89453 -2.828421 3.176923 -3.181974 c 0.352991 -0.353552 2.47094 -2.899132 2.541539 -3.181974 c 0.282393 -0.353552 0.635384 -2.545579 0.635384 -2.545579 c 0.070598 -0.282842 0 0 0 0 "/>
    </svg>
    

    Это около 20 КБ, если вы играете с порогами, вы можете значительно снизить количество очков. Это настроено в соответствии с моими потребностями.

    Вот пример того, как чувствует себя движение мыши во время рисования (снято в реальном времени во время рисования)

    спектр, нарисованный от руки

person Spektre    schedule 10.06.2015
comment
Я ненавижу просить больше информации, чем вы уже дали, но, если вы знаете, как это соотносится с моим предложенным решением? Исходный путь-›RDP-›Catmull-Rom? С точки зрения точности/счета очков/скорости. - person nicholaswmin; 10.06.2015
comment
@NicholasKyriakides Не знаю, я не использую BEZIER напрямую (ни Catmul-ROM), это кубы интерполяции, поэтому путь проходит через точки выборки, не приближающиеся к ним, и точки преобразуются в кубические контрольные точки SVG Безье, поэтому кривая не изменяется в любом случае, так что это должно быть достаточно точным. Единственное, что может быть хуже, это качество экстремального изменения направления, например, в винтах с малым радиусом или спиральными винтами, но этого достаточно для меня, я управляю многомерными станками с ЧПУ с траекториями SVG (отсюда дополнительные данные в траектории, такие как конфигурация инструмента.. .) - person Spektre; 10.06.2015
comment
@NicholasKyriakides скорость в реальном времени, преобразование точек O(1) использует две + две - и две * операции на куб и измерение, так что проблем нет. Никогда не измеряйте время для этого, так как оно вычисляется непосредственно в событии мыши... и измерение времени, вероятно, заняло бы больше времени, чем сам процесс - person Spektre; 10.06.2015
comment
У вас есть реализация этого в небольшом тестовом приложении, которое я мог бы протестировать сейчас? Кажется интересным - person nicholaswmin; 10.06.2015
comment
@NicholasKyriakides на самом деле не является частью моего редактора SVG (изображение взято из него), источник стал немного большим, около 4,7 МБ чистого кода C ++, ~ 3,9 МБ - это движок OpenGL, ~ 500 КБ - это SVG и другие векторные форматы (например, wmf ,emf,dxf и многое другое) сам редактор чуть меньше 200Кб кода но он будет бесполезен без стоящих за ним движков и теми которыми я не могу поделиться так как это корпоративный код. Остальное окна. Я мог бы взломать какой-нибудь простой редактор VCL/Canvas, но трудно сказать, поможет ли это вам. Если вам нужно только приложение, я могу поделиться им где-нибудь (оно все еще глючит) - person Spektre; 10.06.2015
comment
Нет, я бы доставил вам слишком много хлопот - я попытаюсь собрать небольшой HTML5 Canvas/JSFiddle того, что вы предлагаете, когда у меня будет время, и посмотрю, как он себя ведет. Я все еще жду еще нескольких ответов, предпочтительно в контексте Catmull-Rom, но в целом большое спасибо! - person nicholaswmin; 10.06.2015
comment
@Spektre: После проверки формулы вашей кубической интерполяции это на самом деле однородный сплайн Catmull Rom. - person fang; 14.06.2015
comment
@fang LOL приятно знать, что я использую его в течение десяти лет (не имея ни малейшего представления об этом). Это был результат простой линейной системы с условиями, в которых направление и положение начала и остановки совпадают с предыдущим/следующим сегментом. и шаг параметра 1.0 на сегмент - person Spektre; 14.06.2015
comment
@NicholasKyriakides только что закончил мою многопоточную реализацию захвата gif для ускорения кодирования в реальном времени, и во время тестирования также добавил его в мой редактор svg, поэтому см. Добавленное изображение внизу моего ответа, чтобы вы могли видеть, как кривые выглядят во время редактирования (для сравнения на свой двигатель) - person Spektre; 17.06.2015