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

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

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

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

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

  1. проанализируйте XML в SVG.
  2. визуализация SVG.

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

любые указатели, которые кто-нибудь может мне дать, будут очень признательны.

Ура!

9
ios kanjivg objective-c svg

5 ответов

это оказалось намного проще, чем я первоначально думал. 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.

12

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

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

источник никоим образом не запутывается и содержит нечетный комментарий. Удачи вам!

4

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

-(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?

0

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

любой файл KanjiVG является 100% SVG-совместимым и может быть открыт любимым SVG viewer/editor, чтобы рассматриваться как есть.

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

0

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

0