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
텍스트 렌더링을 설정해보십시오. geometricPrecision이 필요한 것 같습니다. (http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty) 물론 UA가이 속성을 지원하지 않을 수도 있습니다. –
텍스트 렌더링 속성이 유망한 해결책으로 보였지만 librsvg2에서는 아무런 차이가 없었습니다. 팁 고마워. – jdesbonnet