如何从目标C中的SVG数据创建日本字母动画？

Question

我看过几款iPhone/iPad应用程序，它们都是动画动画。对于那些不熟悉汉字的人来说，笔划顺序是汉字学习的一个非常重要的部分，所以如果你正在做一个显示动画笔划顺序的应用程序是必不可少的一部分。

我见过的所有这样做的应用程序，都把KanjiVG项目作为它们的笔划顺序数据的来源。经过一些研究，我发现KanjiVG项目为您提供了以XML编码的SVG格式的数据。

以前从未对图形进行过编程(而且对iOS来说也是比较新的)，我不知道该在哪里继续寻找信息。

我想我需要：

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

...but我不确定。在我购买的iPhone/iPad应用程序中，我可以看到这是如何实现的，动画看起来都惊人地相似，所以这些人使用的公共库肯定是我找不到的(可能是因为我不知道我到底在找什么！)

任何人给我的任何建议都会受到极大的感谢。

干杯!

Answer 1

结果这比我原先想的要容易得多。KanjiVG项目提供的XML不仅包含所有kanji“部件”，而且还包含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并将其粘贴到一个纯文本文件中。将这个文件命名为以.svg结尾的文件，并将其拖到Firefox中。这就是，一个汉字的图形表示！

所以现在我有了所有的“原始”SVG信息，这只是一个找到合适的SVG渲染器的问题。

Answer 2

几年前，我写了一个用于KanjiVG数据的javascript呈现程序，它是斯托克斯的动画。它可以作为您的工作示例，甚至是解决方案，这取决于您想要做什么。

我采取的方法是将KanjiVG笔画数据分解为一组javascript数据文件，编写我自己的绘制立方曲线和二次曲线的代码，然后编写一个事件队列函数，该函数采用kanji，查找它们，并在数组中对每一笔的呈现进行排队。

源不以任何方式混淆，并包含奇怪的注释。祝你好运！

Answer 3

我也对此感兴趣。你还有更多线索吗？通过创建一个UIwebview，我能够以这种方式显示svg文件中的kanji。在本例中，我的文件是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];  

}

我的问题是，您找到了一种从kanjiVG获取所有svg信息的简单方法吗？