Текстовый объект в путь: как удалить один путь из двойного пути, созданного при использовании метода печати в Raphael js с использованием шрифтов cambam?
Когда я использую метод print в Raphael js для преобразования текста в путь, он создает двойной путь (контур) для каждого символа. Я искал в Интернете и заметил, что есть некоторые шрифты, такие как: camBam шрифты, которые кажутся настоящими шрифтами, но на самом деле они обманывают создателей шрифтов, чтобы они выглядели как контур символов, в то время как они помещают 2 одинаковые линии друг на друга. Мне было интересно, если есть какой-либо способ программно (с помощью js) разделить эти линии (пути) друг на друга и удалить одну из них?
Вот код svg для файла svg, который содержит пути друг над другом и одинаковые для буквы s (например):
Обновить К сожалению, здесь я обновил правильный код SVG:
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, 600,600"><desc>Created with Snap</desc><defs></defs><path d="M79.5111111111111,59.87405972222222C79.89444444444443,66.13517083333333,70.94999999999999,63.32405972222222,65.45555555555555,63.96294861111111C70.94999999999999,63.451837499999996,79.89444444444443,66.00739305555555,79.5111111111111,59.87405972222222C79,52.84628194444444,66.09444444444443,56.67961527777778,65.58333333333333,49.77961527777778C65.19999999999999,44.15739305555556,73.24999999999999,46.457393055555556,78.48888888888888,45.94628194444444C73.24999999999999,46.329615277777776,65.19999999999999,44.15739305555556,65.58333333333333,49.77961527777778C66.09444444444443,56.67961527777778,79,52.84628194444444,79.5111111111111,59.87405972222222C79.5111111111111,59.87405972222222,79.5111111111111,59.87405972222222,79.5111111111111,59.87405972222222" fill="#ff0000" stroke="#0000ff"></path><rect x="0" y="30" width="330" height="51" fill="none" stroke="#000000"></rect></svg>
Update2:
А также Вот это пути, созданные из обоих шрифтов
И если вы манипулировали им вручную в inkscape или illustrator, вы можете видеть, что буква s имеет 2 строки друг над другом, которые составляют эту букву:
Как я могу удалить одну из 2 строк (путей), используя js? И если у меня есть весь текст, который был преобразован в пути, подобные символу s, как я могу применить эту функцию удаления ко всему тексту, чтобы сделать его текстами с одним путем?
Update3:
У меня есть следующий код, который пытается разделить путь s пополам:
var sTotalpx = textpaths.getTotalLength();
var sSinglepath = Snap.path.getSubpath(textpaths, (sTotalpx/2), sTotalpx);
console.log(sSinglepath.toString());
И результат пути показывает половину s и удвоенную линию (пути) вместо целых s с одной строкой (путь). Любые обходные идеи, пожалуйста ?!
Обновление 4:
Я где-то читал, что когда вы используете редакторы svg: «при использовании перекрывающихся путей используйте параметры« объединение »или« объединение », чтобы объединить фигуры и удалить перекрытия».
Как это возможно программно с помощью JS, пожалуйста?
Решение
Кажется, есть проблема в этом определении (я добавил разрывы строк, чтобы лучше видеть):
M
79.5111111111111,59.87405972222222
C79.89444444444443,66.13517083333333,70.94999999999999,63.32405972222222,65.45555555555555,63.96294861111111
C70.94999999999999,63.451837499999996,79.89444444444443,66.00739305555555,79.5111111111111,59.87405972222222
C79,52.84628194444444,66.09444444444443,56.67961527777778,65.58333333333333,49.77961527777778
C65.19999999999999,44.15739305555556,73.24999999999999,46.457393055555556,78.48888888888888,45.94628194444444
C73.24999999999999,46.329615277777776,65.19999999999999,44.15739305555556,65.58333333333333,49.77961527777778
C66.09444444444443,56.67961527777778,79,52.84628194444444,79.5111111111111,59.87405972222222
C79.5111111111111,59.87405972222222,
79.5111111111111,59.87405972222222,
79.5111111111111,59.87405972222222
Последнее определение, начинающееся с C, просто неверно. Это может быть то, откуда ваша проблема. Вы могли бы попробовать без этой последней части …?
Это Документация W3C для путей SVG это полезно прочитать 😉
Дайте мне знать, если это работает для вас
Другие решения
Чтобы сгруппировать два пути, вы хотите соединить их под родительским <g> тег.
Я знаю, что это устаревший вопрос, но выглядит это довольно редко … Я нашел эту тему во время поиска решения с очень похожей проблемой.
Мне нужен был однострочный шрифт и шрифт CamBam. Я использовал text-to-svg, чтобы получить пути SVG (вероятно, те же результаты, что и в Raphael.js).
После некоторых тестов и чтения я выяснил, что эти шрифты «зациклены», чтобы создать [выглядящие как] заполняемые (закрытые) пути, будучи более совместимыми со строго системами. Это делается путем рисования пути в обратном порядке.
Для простых, открытых символов эта проблема не так сложна — ПРОСТО достаточно, чтобы найти «центральную точку симметрии» в середине последовательности путей svg и отбросить остальные. Но это тоже не тривиальная проблема.
В данном случае это последняя точка средней (4-й) команды C [urve] (78.48888888888888,45.94628194444444). С этого момента вы можете увидеть зеркально симметрично в позициях контрольной точки … но исключая первый пункт первой команды C рядом с «точкой реверса». Посередине может быть и команда L [ine].
Чтобы избавиться от ошибок заполнения, svg path должен иметь атрибут fill = «none».
Как упоминалось ранее, это довольно легко с простыми символами — во многих случаях результат зацикливания может быть разным! Там может быть один, два или более замкнутых циклов с точно (или почти?) те же самые циклы, но сохраняющие последовательность [оригинальный рисунок] (‘1a, 1b, 1a, 1b’ или ‘1a, 1b, 1c, 1a, 1b, 1c’), а не копия 1 на 1 (‘1a, 1a, 1b, 1b’) … и, вероятно, (не сделал) t проверил это) смешанный с «симметричными зацикленными» путями (которые будут разделены) между ними!
PS. Это теория … У меня пока нет готового, дополненного решения. Я сделаю это в ближайшее время.