2013-03-06 10 views
3

SVG를 사용하여 일련의 이미지를 만들고 비디오 파일로 변환하는 비디오 애니메이션을 생성하고 있습니다. 내가 필요한 한 가지 효과는 텍스트를 부드럽게 팬/확대/축소 할 수 있다는 것입니다. 텍스트를 포함하는 그래픽 컨텍스트에 변환을 적용하여이 작업을 시도하고 있습니다. 각 프레임은 스케일/변환에서 작은 부분 변화가 있습니다. 이 기술은 정적 이미지에 효과적입니다. 그러나 텍스트가 아닙니다. 내가 보는 것은 당신이 기대하는 것처럼 부드러운 효과가 아닙니다. 프레임마다 텍스트의 예리함/반짝임이 있습니다. 글꼴 렌더링 규칙이 변환 후 (사전 변환이 아닌)에 적용되는 것과 같습니다.애니메이션 용 SVG 텍스트 크기 조정 문제

그래서 질문 : 텍스트로 부드러운 스케일/팬 효과를 얻는 방법은 무엇입니까?

예 하나의 프레임의

: http://www.youtube.com/watch?v=TrEjDeGlPhA&list=UUfWuDb3rpD5OInqUpNivjdA&index=1

아니면 처음부터 만들 수는 : 나는이 프레임을 생성하는 작은 자바 프로그램을 작성 여기

<svg width='320' height='180'> 
<rect x='0' y='0' width='320' height='180' fill='white' /> 
<g transform='scale(5.999999999999893)'><text x='50' y='50'>Hello World!</text> 
</g></svg> 

무슨 뜻인지 보여주는 비디오 클립입니다 (Linux, mencoder, rsvg-convert를 사용할 수 있다고 가정)을 시연 할 AVI 파일을 만듭니다.

import java.io.File; 
import java.io.Writer; 
import java.io.FileWriter; 
import java.io.IOException; 

public class MakeTextScaleAnimation { 

public static void main (String[] arg) throws Exception { 

    double s; 

    int frame = 0; 
    for (s=1.0; s < 8.0; s+=0.005) { 
     String framePrefix = "frame" + String.format("%04d", frame); 
     File frameFile = new File (framePrefix + ".svg"); 
     FileWriter w = new FileWriter(frameFile); 
     writeFrame(w,s); 
     w.close(); 

     frame++; 

     System.out.println ("rsvg-convert " + frameFile.getName() + " > " + framePrefix + ".png"); 
    } 
} 

private static void writeFrame(Writer w, double s) throws IOException { 
    w.write ("<svg width='320' height='180'>\n"); 
    w.write ("<rect x='0' y='0' width='320' height='180' fill='white' />\n"); 
    w.write ("<g transform='scale(" + s + ")'>"); 
    w.write ("<text x='50' y='50'>Hello World!</text>\n"); 
    w.write ("</g></svg>"); 
} 
} 

그리고이 스크립트를 실행하려면 다음

#!/bin/bash 
javac MakeTextScaleAnimation.java 

# Make SVG animation frames and generate script to convert to PNG 
java MakeTextScaleAnimation > svgtopng.sh 

# Convert SVG frames into PNG images 
. svgtopng.sh 

# Convert the PNG images into a movie file 
mencoder mf://frame*.png -mf fps=24:type=png \ 
-ovc lavc -lavcopts vcodec=mpeg4:vbitrate=3200 \ 
-o output.avi 
+1

텍스트 렌더링을 설정해보십시오. geometricPrecision이 필요한 것 같습니다. (http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty) 물론 UA가이 속성을 지원하지 않을 수도 있습니다. –

+0

텍스트 렌더링 속성이 유망한 해결책으로 보였지만 librsvg2에서는 아무런 차이가 없었습니다. 팁 고마워. – jdesbonnet

답변

1

내가 찾은 가장 좋은 방법은 경로로 텍스트를 설정하는 것입니다. 나는 'path to path'기능을 가진 Inkscape를 사용합니다. 디자인 파일을 모두 텍스트로 유지하여 변경하기 쉽고 표시 할 경로 버전을 만듭니다. 찾을 수있는 최선의 방법이었으며 시스템 글꼴에 의존하지 않는다는 것을 의미합니다. 텍스트가 많으면 거대한 파일을 만들 것입니다!