如何从Objective-C中的SVG数据创建汉字(日文字母)动画？

Question

我见过几款展示动画汉字的iPhone/iPad应用程序.对于那些不熟悉汉字的人来说,笔画顺序是汉字研究的一个非常重要的部分,所以如果你正在做一个显示动画笔画顺序的应用程序是必不可少的部分.

我见过的所有应用程序都将KanjiVG项目作为笔划订单数据的来源.经过一番研究后,我发现KanjiVG项目为您提供了以XML编码的SVG格式的数据.

从来没有编程过图形(并且对iOS来说相对较新)我不知道在哪里继续寻找信息.

我想我需要:

1. 将XML解析为SVG.
2. 渲染SVG.

......但我不确定.我可以看到在我买的iPhone/iPad应用程序中如何做到这一点,动画看起来都非常相似所以必须有一个共同的库,这些人正在使用我没有找到(可能是因为我没有确切地知道我在找什么!)

任何人都可以给我的任何指示将不胜感激.

干杯!

Answer 1

这最终比我原先想象的要容易得多.KanjiVG项目提供的XML不仅包含所有汉字"部分",还包含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>

如果您仅path使用stroke节点的属性创建SVG文件,那么您将获得一个不错的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渲染器的问题.