Как создать анимацию кандзи (японские буквы) из данных SVG в Objective-C?

Question

Я видел несколько приложений для iPhone / iPad, которые показывают анимированные кандзи.Для тех из вас, кто не знаком с кандзи, порядок штрихов является очень важной частью изучения кандзи, поэтому, если вы создаете приложение, показывающее анимированный порядок штрихов, это важная часть.

Все приложения, которые я виделдля этого укажите проект KanjiVG в качестве их источника для данных порядка штрихов.После некоторых исследований я обнаружил, что проект KanjiVG предоставляет вам данные в формате SVG, закодированные в XML.

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

Я думаю Мне нужно:

1. Анализ XML в SVG.
2. Визуализация SVG.

... но я не уверен.Что я мог видеть, как это делается в приложениях для iPhone / iPad, которые я купил, все анимации выглядят удивительно похожими, поэтому должна быть общая библиотека, которую используют эти парни, которую я не могу найти (вероятно, потому что я неточно знаю, что я ищу!)

Любые указатели, которые каждый может дать мне, будет принята с благодарностью.

Ура!

Answer 1

Это оказалось НАМНОГО проще, чем я думал.XML, предоставленный проектом KanjiVG, содержит не только все «части» кандзи, но также и данные SVG!

Итак, вы получите следующее:

<kanji midashi="会" id="4f1a">
<strokegr element="会">
    <strokegr element="人" position="top" radical="general">
        <stroke type="㇒" path="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88"/>
        <stroke type="㇏" path="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59"/>
    </strokegr>
    <strokegr element="云" position="bottom">
        <strokegr element="二">
            <stroke type="㇐" path="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0"/>
            <stroke type="㇐" path="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29"/>
        </strokegr>
        <strokegr element="厶">
            <stroke type="㇜" path="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95"/>
            <stroke type="㇔" path="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82"/>
        </strokegr>
    </strokegr>
</strokegr>
</kanji>

И если вы создадите свой файл SVG изтолько из path атрибутов stroke узлов, вы получите хороший рисунок SVG!Например:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1"  baseProfile="full"> 
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2" />
<path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" style="fill:none;stroke:black;stroke-width:2" />
<path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" style="fill:none;stroke:black;stroke-width:2" />
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" style="fill:none;stroke:black;stroke-width:2" />
<path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" style="fill:none;stroke:black;stroke-width:2" />
</svg>

Скопируйте приведенный выше SVG XML и вставьте его в простой текстовый файл.Назовите этот файл как-нибудь, заканчивающийся на .svg, и перетащите его в Firefox.Вот оно, графическое представление кандзи!

Так что теперь, когда у меня есть вся «сырая» информация о SVG, осталось только найти подходящий рендерер SVG.

Answer 2

Несколько лет назад я написал рендеринг JavaScript для данных KanjiVG , который оживляет стоксы.Это может послужить вам рабочим примером или даже решением в зависимости от того, что вы хотите сделать.

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

Источник не запутан каким-либо образом и содержит нечетный комментарий,Желаем удачи!

Answer 3

Вы также можете рассматривать «проект AnimCJK» (https://github.com/parsimonhi/animCJK) в качестве источника данных кандзи SVG. Принцип немного отличается от «проекта KanjiVG» (http://kanjivg.tagaini.net/), а основной шрифт другой (kaisho) стиль), но извлечь данные пути просто. Используя регулярное выражение, такое как # ] + id = "z [0-9] + d [0-9] +" [^>] + d = " ([^ "] +)" [^>] +> # выполняет работу.

Answer 4

Нет необходимости переводить данные KanjiVG в данные SVG, потому что это уже данные SVG.Из их вики :

Любой файл KanjiVG на 100% совместим с SVG и может быть открыт любимым просмотрщиком / редактором SVG, чтобы его можно было увидеть как есть.

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

Answer 5

Меня это тоже интересует.Вы получили еще дальше?Я могу отображать кандзи из SVG-файла, создав UIwebview.В этом примере мой файл k1.svg, и изображение было нарисовано после нажатия кнопки (отправитель).Сейчас я работаю над его анимацией

-(void) doSVG:(id)sender {

    NSString *filePath = [[NSBundle mainBundle]
                          pathForResource:@"k1" ofType:@"svg"];

    NSURL *fileURL = [[NSURL alloc] initFileURLWithPath:filePath];
    NSURLRequest *req = [NSURLRequest requestWithURL:fileURL];
    //[kanjiView setScalesPageToFit:YES];
    [yourWebView loadRequest:req];  

}

Мой вопрос к вам: вы нашли простой способ получить всю информацию svg из xml-файла от kanjiVG?