Objective-C에서 SVG 데이터로 한자 (일본어 문자) 애니메이션을 어떻게 만들 수 있습니까?

Question

애니메이션 한자를 보여주는 여러 iPhone/iPad 앱을 보았습니다. 한자에 익숙하지 않은 사용자의 경우 스트로크 주문은 간지 공부의 중요한 부분이므로 애니메이션 스트로크 주문을 보여주는 앱을 작성하는 것이 필수적입니다.

나는 이것을 한 모든 앱에 뇌졸중 주문 데이터의 출처로 KanjiVG project을 넣었다. 몇 가지 연구를 한 후에 KanjiVG 프로젝트가 XML로 인코딩 된 SVG 형식의 데이터를 제공한다는 것을 알았습니다.

이전에 그래픽을 프로그래밍 한 적이 없었기 때문에 (iOS에 비교적 익숙하지 않았습니다.) 정보를 찾는 위치를 잃어 버렸습니다. 내가 생각

내가 수행해야합니다

1. 는 SVG로 XML을 구문 분석합니다.
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> 

을 그리고 당신이 stroke 노드 만 path 속성에서 당신의 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 렌더러를 찾는 데 문제가 있습니다.

Answer 2

나는 이것에 대해서도 관심이있다. 당신은 더 이상 얻었습니까? UIwebview를 작성하여 svg 파일에서 한자를 표시 할 수 있습니다. 이 예제에서 내 파일은 k1.svg이며 이미지는 단추 (보낸 사람)를 누른 후 그려집니다. 나는 점점에서 일하고 있어요 당신이 kanjiVG에서 XML 파일에서 모든 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]; 

} 

내 질문 이제 애니메이션?

Answer 3

나는 javascript renderer for KanjiVG data을 썼다. 당신이하고 싶은 일에 따라 당신이나 심지어 해결책을위한 실례로 작용할 수도 있습니다.

KanjiVG 스트로크 데이터를 자바 스크립트 데이터 파일로 분해하고, 입방 및 이차 곡선 그리기에 대한 내 자신의 코드를 작성한 다음 한자를 사용하는 이벤트 대기열 기능을 작성하고이를 조회하여 배열의 각 스트로크 렌더링.

소스는 어떤 방식 으로든 난독 화되지 않으며 이상한 주석이 포함되어 있습니다. 행운을 빌어 요!

Answer 4

KanjiVG 데이터는 이미 SVG 데이터이므로 SVG 데이터로 변환 할 필요가 없습니다. their wiki :

모든 KanjiVG 파일은 SVG와 100 % 호환되며 좋아하는 SVG 뷰어/편집기에서 열어서있는 그대로 볼 수 있습니다.

데이터가 너무 다른 이유는 추가 정보를 저장하기 위해 SVG Groups을 사용하고 있기 때문입니다. 그러나 KanjiVG 데이터 자체는 여전히 표준 호환 SVG 라이브러리를 사용하여 잘 렌더링되어야합니다.

Answer 5

"AnimCJK 프로젝트"(https://github.com/parsimonhi/animCJK)를 한자 svg 데이터 원본으로 간주 할 수도 있습니다. 원칙은 "KanjiVG 프로젝트"(http://kanjivg.tagaini.net/)와 약간 다르며 기본 글꼴이 다른 스타일이지만 경로 데이터 추출은 간단합니다. # < 경로 [^>] + id = "z [0-9] + d [0-9] +"[^]] + d = "([^"] +) "와 같은 정규식 사용"[^ ] +> # 작업을 수행합니다