10

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

我见过的所有执行此操作的应用程序都将KanjiVG 项目作为笔画顺序数据的来源。经过一番研究，我发现 KanjiVG 项目为您提供了以 XML 编码的 SVG 格式的数据。

以前从未编程过图形（并且对 iOS 来说相对较新），我不知道在哪里继续寻找信息。

我想我需要：

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

...但我不确定。对于我在我购买的 iPhone/iPad 应用程序中可以看到这是如何完成的，动画看起来都非常相似，所以肯定有这些家伙正在使用的公共库，但我找不到（可能是因为我没有确切地知道我在寻找什么！）

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

干杯!

4

5 回答 5

13

这最终比我最初想象的要容易得多。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属性创建你的 SVG 文件，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 渲染器即可。

于 2011-05-07T21:31:25.387 回答
4

几年前，我为 KanjiVG 数据编写了一个javascript 渲染器，用于为 stoke设置动画。它可以作为您的工作示例，甚至可以作为解决方案，具体取决于您想要做什么。

我采用的方法是将 KanjiVG 笔画数据分解为一组 javascript 数据文件，编写我自己的代码来绘制三次曲线和二次曲线，然后编写一个事件队列函数，该函数采用汉字，查找它们并将每个笔画的渲染排入队列在一个数组中。

源没有以任何方式混淆，并且包含奇怪的评论。祝你好运！

于 2012-09-09T03:15:57.440 回答
0

我也对这个感兴趣。你有没有更进一步？我可以通过创建 UIwebview 以这种方式从 svg 文件中显示汉字。在这个例子中，我的文件是 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 的 xml 文件中获取所有 svg 信息？

于 2011-06-20T13:59:30.183 回答
0

无需将 KanjiVG 数据转换为 SVG 数据，因为它已经是 SVG 数据。从他们的维基：

任何 KanjiVG 文件都是 100% 兼容 SVG 的，并且可以由自己喜欢的 SVG 查看器/编辑器打开以按原样查看。

数据看起来如此不同的原因是他们使用SVG 组来存储额外的信息。但是使用任何符合标准的 SVG 库，KanjiVG 数据本身仍然可以很好地呈现。

于 2015-05-26T21:42:32.100 回答
0

您还可以考虑将“AnimCJK 项目”（https://github.com/parsimonhi/animCJK）作为 kanji svg 数据的来源。原理与“KanjiVG project”（ http://kanjivg.tagaini.net/ ）略有不同，底层字体不同（kaisho风格），但提取路径数据很简单。使用正则表达式，例如 #<path[^>]+id="z[0-9]+d[0-9]+"[^>]+d="([^"]+)"[^> ]+># 完成这项工作。

于 2017-12-05T18:28:05.197 回答