Как преобразовать путь VML к пути SVG?

Question

В настоящее время я работаю над приложением, для которого мне нужно преобразовать формы VML в формы SVG. Хотя я могу справиться со всеми остальными его аспектами, я сталкиваюсь с проблемой при правильном преобразовании формы из пути VML в путь SVG. Я использую комбинацию XSLT и Javascript для моих кодов.

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

Например, для простой формы это:

Путь VML является: m10800,qx21600,10800,10800,21600l,21600,,xe

Теперь, если я заменю m с M, l с L и qx с Q и сделать необходимое масштабирование координат. Я получаю следующую форму SVG:

SVG путь лечит первый набор координат в Q/qx в качестве контрольной точки и, следовательно, фактический путь не проходит через точку, тогда как VML предназначены эти координаты в качестве точки, по которой путь должен пройти. Я не понимаю, как я могу добиться этого с помощью SVG (т. Е. Убедиться, что путь проходит через определенную точку или точки).

В настоящее время я использую this и this для исследования SVG и VML соответственно. Я также попытался использовать Vector Converter 1.2, но это тоже не работает.

Может ли кто-нибудь предложить мне способ, библиотеку, любые учебные ссылки или учебные пособия, где я могу найти решение моей проблемы?

Спасибо заранее!

Answer 1

«qx» в VML - это «эллиптический квадрант», «Q» в SVG - квадратичная безье. Совершенно разные вещи.

Простейшим решением для преобразования «qx» является аппроксимация его кубической безье. Использование дуги было бы наиболее точным, но для определения правильного значения «флага развертки» будут задействованы некоторые сложные математики. Хотя кубический безье не является идеальным приближением к квадранту, он очень близок, и ошибка не будет достаточно заметной, чтобы повлиять на ваши рисунки.

Секрет построения круговых/эллиптических квадрантов - это константа 0.5522847498. Он определяет длительность линий контрольной точки для имитации эллиптической кривой. Вы можете найти объяснения того, как оно получается путем поиска в этом номере.

Таким образом, VML определяет «qx» как эллиптический квадрант, начинающийся в направлении X. Поэтому, учитывая, команда путь «qx21600,10800», алгоритм преобразования будет:

arcFactor = 0.5522847498; 
currentX = 10800; 
currentY = 0;  // start coords (from the move) 

x = 21600; 
y = 10800; // first coords in "qx" 

dx = x - currentX; 
dy = y - currentY; 

// Calculate first control point 
cp1x = currentX + dx * arcFactor; 
cp1y = currentY; // starts out horizontal 

// Calculate second control point 
cp2x = x; 
cp2y = y - dy * arcFactor; 

svgBezier = "C" + cp1x + "," + cp1y + "," + cp2x + "," + cp2y + "," + x + "," + y; 

Теперь ваша кривая имеет второй набор координат к QX. Спектр говорит, что это означает повторение команды «qx». Однако для второго набора нет никакого смысла вести себя точно так же, как qx (т. Е. Начать горизонтально). Поэтому я думаю, что они должны вести себя как «qy» (начать с вертикали). То есть. qx и qy чередуются.Если предположить, что это так, то расчет для Qy должно быть:

// Calculate first control point 
cp1x = currentX; // starts out vertical 
cp1y = currentY + dy * arcFactor; 

// Calculate second control point 
cp2x = x - dx * arcFactor; 
cp2y = y; 

Demo fiddle is here