如何從Objective-C的SVG數據創建漢字（日文字母）動畫？

我見過很多顯示動畫漢字的iPhone/iPad應用程序。對於那些不熟悉漢字的人來說，筆順是漢字學習的一個非常重要的部分，所以如果你正在做一個應用程序來顯示動畫筆順是一個重要部分。如何從Objective-C的SVG數據創建漢字（日文字母）動畫？

我已經看到了這樣做的所有的應用程序，信貸KanjiVG project作爲其來源的筆畫順序數據。經過一番研究，我發現KanjiVG項目爲您提供了以XML格式編碼的SVG格式的數據。

從未接觸過編程之前圖形（與相對較新於iOS）我不知所措地在那裏繼續尋找信息。

我認爲我需要：

解析XML到SVG。
呈現SVG。

...但我不知道。對於我可以看到這是如何在我購買的iPhone/iPad應用程序中完成的，動畫都看起來非常相似，所以必須有一個共用庫，這些人正在使用，我找不到（可能是因爲我沒有確切地知道我在找！）

任何指針，任何人都可以給我將不勝感激。

乾杯！

來源

2011-05-04 Julian

這最終比我原先想象的要容易得多。 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>

如果您創建SVG文件只輸出stroke節點的path屬性，那麼你得到一個不錯的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-07 21:31:25 Julian

你是如何解析xml的？這是一個巨大的文件 – 2016-10-24 06:00:07

@MrD我使用了PHP，如果你沒有足夠的RAM來讀取它，那麼你必須這樣做用一種方法逐位讀取文件 – Julian 2016-10-24 14:27:59

我對這種感興趣。你有沒有進一步？通過創建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]; 

}

我的問題給你的是，你有沒有發現一個簡單的方法來獲取所有SVG信息出來，從kanjiVG的XML文件？

來源

2011-06-20 13:59:30

爲了得到所有的SVG信息，我寫了一個PHP腳本，通過簡單的XML解析來解決這個問題，我只是爲每個節點提供了「路徑」屬性，。我並不真的需要剩下的信息，所以我放棄了它。然後我將數據存儲在一個與CoreData一起使用的sqlite數據庫中。爲了動畫筆畫，我遵循這個問題：http://stackoverflow.com/questions/ 5924238 /你怎麼做 - 動畫 - svg-path-in-ios。我還沒有完成這個，因爲我在業餘時間做這個，但是這個想法發佈了在迄今爲止我所做的測試中工作得很好。 – Julian 2011-06-20 21:03:42

謝謝。我會嘗試類似的東西。必須瞭解數據庫！ – 2011-06-22 15:40:26

不需要數據庫。你可以編寫一個腳本將每個漢字編譯成它自己的svg文件，然後渲染它。事實上，這就是這個項目所做的，儘管它在Ruby中：https：//github.com/Kimtaro/kanjivg2svg。祝你好運！ – Julian 2011-06-23 01:04:27

我寫了javascript renderer for KanjiVG data幾年前那個動畫斯托克斯。它可能會作爲您的一個工作示例，甚至取決於您想要做什麼解決方案。

我採取的方法是將KanjiVG筆畫數據分解成一組javascript數據文件，編寫我自己的代碼繪製三次曲線和二次曲線，然後編寫一個事件隊列函數，接收漢字，查找它們並將它們排入隊列渲染數組中的每個筆畫。

來源不以任何方式混淆幷包含奇數註釋。祝你好運！

來源

2012-09-09 03:15:57 Aaron

亞倫，謝謝分享。你認爲你可以提供一個帶有所有必要js文件的zip文件的鏈接嗎？ – Julian 2012-09-09 04:59:43

您可以使用' 2015-05-26 21:43:34

無需將KanjiVG數據轉換爲SVG數據，因爲它已經是SVG數據。從their wiki：

任何KanjiVG文件是100％SVG兼容，並可以打開一個人最喜歡的SVG查看器/編輯器被視爲是。

數據看起來如此不同的原因是他們使用SVG Groups來存儲額外的信息。但是，使用任何符合標準的SVG庫，KanjiVG數據本身仍然應該可以正常顯示。

來源

2015-05-26 21:42:32

您還可以考慮「AnimCJK項目」（https://github.com/parsimonhi/animCJK）作爲漢字SVG數據的來源。原理與「KanjiVG項目」（http://kanjivg.tagaini.net/）略有不同，底層字體不同（kaisho風格），但提取路徑數據很簡單。使用正則表達式如＃< path [^>] + id =「z [0-9] + d [0-9] +」[^>] + d =「（[^」] +）「[^> ] +>＃做這個工作

來源

2017-12-05 18:28:05

如何從Objective-C的SVG數據創建漢字（日文字母）動畫？

回答

相關問題