703 lines
23 KiB
Dart
703 lines
23 KiB
Dart
import 'dart:io';
|
|
import 'dart:math' show min, sqrt, pow;
|
|
|
|
import '../svg/parser.dart';
|
|
import '../common/point.dart';
|
|
|
|
import 'bezier_cubic.dart' as bezier_cubic;
|
|
import 'package:xml/xml.dart';
|
|
import 'package:path/path.dart';
|
|
|
|
double _computePathLength(String path) =>
|
|
parsePath(path).size(error: 1e-8).toDouble();
|
|
|
|
String _shescape(String path) =>
|
|
"'${path.replaceAll(RegExp(r"(?=['\\\\])"), "\\\\")}'";
|
|
|
|
extension _Dedent on String {
|
|
String get dedented {
|
|
final withoutEmptyLines =
|
|
this.split('\n').where((l) => l.isNotEmpty).toList();
|
|
final whitespaceAmounts = [
|
|
for (final line in withoutEmptyLines)
|
|
line.split('').takeWhile((c) => c == ' ').length
|
|
];
|
|
final whitespaceToRemove = whitespaceAmounts.reduce(min);
|
|
return withoutEmptyLines
|
|
.map((l) => l.replaceRange(0, whitespaceToRemove, ''))
|
|
.join('\n');
|
|
}
|
|
}
|
|
|
|
class JsAnimationElement {
|
|
final XmlDocumentFragment bg;
|
|
final XmlDocumentFragment anim;
|
|
final XmlDocumentFragment? brush;
|
|
final XmlDocumentFragment? brushBorder;
|
|
|
|
/// the time set (as default) for each animation
|
|
final num time;
|
|
|
|
const JsAnimationElement({
|
|
required this.bg,
|
|
required this.anim,
|
|
required this.time,
|
|
this.brush,
|
|
this.brushBorder,
|
|
});
|
|
}
|
|
|
|
// ease, ease-in, etc:
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#ease
|
|
const pt1 = Point(0, 0);
|
|
const easeCt1 = Point(0.25, 0.1);
|
|
const easeCt2 = Point(0.25, 1.0);
|
|
const easeInCt1 = Point(0.42, 0.0);
|
|
const easeInCt2 = Point(1.0, 1.0);
|
|
const easeInOutCt1 = Point(0.42, 0.0);
|
|
const easeInOutCt2 = Point(0.58, 1.0);
|
|
const easeOutCt1 = Point(0.0, 0.0);
|
|
const easeOutCt2 = Point(0.58, 1.0);
|
|
const pt2 = Point(1, 1);
|
|
|
|
// class {
|
|
// }
|
|
|
|
enum TimingFunction {
|
|
linear,
|
|
ease,
|
|
easeIn,
|
|
easeInOut,
|
|
easeOut,
|
|
}
|
|
|
|
extension Funcs on TimingFunction {
|
|
double Function(double) get func => {
|
|
TimingFunction.linear: (double x) => x,
|
|
TimingFunction.ease: (double x) =>
|
|
bezier_cubic.value(pt1, easeCt1, easeCt2, pt2, x),
|
|
TimingFunction.easeIn: (double x) =>
|
|
bezier_cubic.value(pt1, easeInCt1, easeInCt2, pt2, x),
|
|
TimingFunction.easeInOut: (double x) =>
|
|
bezier_cubic.value(pt1, easeInOutCt1, easeInOutCt2, pt2, x),
|
|
TimingFunction.easeOut: (double x) =>
|
|
bezier_cubic.value(pt1, easeOutCt1, easeOutCt2, pt2, x),
|
|
}[this]!;
|
|
|
|
String get name => {
|
|
TimingFunction.linear: 'linear',
|
|
TimingFunction.ease: 'ease',
|
|
TimingFunction.easeIn: 'ease-in',
|
|
TimingFunction.easeInOut: 'ease-in-out',
|
|
TimingFunction.easeOut: 'ease-out',
|
|
}[this]!;
|
|
}
|
|
|
|
// we will need this to deal with svg
|
|
const namespaces = {
|
|
'n': 'http://www.w3.org/2000/svg',
|
|
'xlink': 'http://www.w3.org/1999/xlink'
|
|
};
|
|
// etree.register_namespace("xlink","http://www.w3.org/1999/xlink")
|
|
// final parser = etree.XMLParser(remove_blank_text=true);
|
|
|
|
// gif settings
|
|
// const DELETE_TEMPORARY_FILES = false;
|
|
const GIF_SIZE = 150;
|
|
const GIF_FRAME_DURATION = 0.04;
|
|
const GIF_BACKGROUND_COLOR = '#ddf';
|
|
// set to true to allow transparent background, much bigger file!
|
|
// const GIF_ALLOW_TRANSPARENT = false;
|
|
|
|
// edit here to decide what will be generated
|
|
const GENERATE_SVG = true;
|
|
const GENERATE_JS_SVG = true;
|
|
const GENERATE_GIF = true;
|
|
|
|
/// sqrt, ie a stroke 4 times the length is drawn
|
|
/// at twice the speed, in twice the time.
|
|
double strokeLengthToDuration(double length) => sqrt(length) / 8;
|
|
|
|
/// global time rescale, let's make animation a bit
|
|
/// faster when there are many strokes.
|
|
double timeRescale(interval) => pow(2 * interval, 2.0 / 3).toDouble();
|
|
|
|
/// clear all extra elements this program may have previously added
|
|
void clearPreviousElements(XmlDocument doc) {
|
|
for (final XmlNode el in doc
|
|
.getElement('svg', namespace: namespaces['n'])
|
|
?.getElement('style', namespace: namespaces['n'])
|
|
?.children ??
|
|
[]) {
|
|
if (RegExp(r'-Kanimaji$').hasMatch(el.getAttribute('id') ?? '')) {
|
|
el.parent!.children.remove(el);
|
|
}
|
|
}
|
|
for (final XmlNode g in doc
|
|
.getElement('svg', namespace: namespaces['n'])
|
|
?.getElement('g', namespace: namespaces['n'])
|
|
?.children ??
|
|
[]) {
|
|
if (RegExp(r'-Kanimaji$').hasMatch(g.getAttribute('id') ?? '')) {
|
|
g.parent!.children.remove(g);
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Note: setting any color to transparent will result in a much bigger
|
|
/// filesize for GIFs.
|
|
void createAnimation({
|
|
required String inputFile,
|
|
String? outputFile,
|
|
TimingFunction timingFunction = TimingFunction.easeInOut,
|
|
double strokeBorderWidth = 4.5,
|
|
double strokeUnfilledWidth = 3,
|
|
double strokeFilledWidth = 3.1,
|
|
bool showBrush = true,
|
|
bool showBrushFrontBorder = true,
|
|
double brushWidth = 5.5,
|
|
double brushBorderWidth = 7,
|
|
double waitAfter = 1.5,
|
|
String strokeBorderColor = '#666',
|
|
String strokeUnfilledColor = '#EEE',
|
|
String strokeFillingColor = '#F00',
|
|
String strokeFilledColor = '#000',
|
|
String brushColor = '#F00',
|
|
String brushBorderColor = '#666',
|
|
}) {
|
|
print('processing $inputFile');
|
|
final String filenameNoext = inputFile.replaceAll(RegExp(r'\.[^\.]+$'), '');
|
|
outputFile ??= '${filenameNoext}_anim.svg';
|
|
final String baseid = basename(filenameNoext);
|
|
|
|
// load xml
|
|
final XmlDocument doc = XmlDocument.parse(File(inputFile).readAsStringSync());
|
|
|
|
// for xlink namespace introduction
|
|
doc.rootElement.setAttribute('xmlns:xlink', namespaces['xlink']);
|
|
doc.rootElement.setAttribute('xlink:used', '');
|
|
|
|
clearPreviousElements(doc);
|
|
|
|
/// create groups with a copies (references actually) of the paths
|
|
XmlDocumentFragment pathCopyGroup({
|
|
required String id,
|
|
required String color,
|
|
required double width,
|
|
}) {
|
|
final builder = XmlBuilder();
|
|
builder.element(
|
|
'g',
|
|
attributes: {
|
|
'id': 'kvg:$baseid-$id-Kanimaji',
|
|
'style': 'fill:none;'
|
|
'stroke:$color;'
|
|
'stroke-width:$width;'
|
|
'stroke-linecap:round;'
|
|
'stroke-linejoin:round;',
|
|
},
|
|
isSelfClosing: false,
|
|
);
|
|
return builder.buildFragment();
|
|
}
|
|
|
|
final bgGroup = pathCopyGroup(
|
|
id: 'bg',
|
|
color: strokeUnfilledColor,
|
|
width: strokeUnfilledWidth,
|
|
);
|
|
final animGroup = pathCopyGroup(
|
|
id: 'anim',
|
|
color: strokeFilledColor,
|
|
width: strokeFilledWidth,
|
|
);
|
|
|
|
late final XmlDocumentFragment brushGroup;
|
|
late final XmlDocumentFragment brushBrdGroup;
|
|
if (showBrush) {
|
|
brushGroup = pathCopyGroup(
|
|
id: 'brush',
|
|
color: brushColor,
|
|
width: brushWidth,
|
|
);
|
|
brushBrdGroup = pathCopyGroup(
|
|
id: 'brush-brd',
|
|
color: brushBorderColor,
|
|
width: brushBorderWidth,
|
|
);
|
|
}
|
|
|
|
// compute total length and time, at first
|
|
double totlen = 0;
|
|
double tottime = 0;
|
|
|
|
// for (final g in doc.xpath("/n:svg/n:g", namespaces=namespaces) {
|
|
for (final XmlNode g in doc
|
|
.getElement('svg', namespace: namespaces['n'])
|
|
?.getElement('g', namespace: namespaces['n'])
|
|
?.children ??
|
|
[]) {
|
|
if (RegExp(r'^kvg:StrokeNumbers_').hasMatch(g.getAttribute('id') ?? '')) {
|
|
continue;
|
|
}
|
|
|
|
for (final p in g.findAllElements('path', namespace: namespaces['n'])) {
|
|
final pathlen = _computePathLength(p.getAttribute('d')!);
|
|
final duration = strokeLengthToDuration(pathlen);
|
|
totlen += pathlen;
|
|
tottime += duration;
|
|
}
|
|
}
|
|
|
|
double animationTime = timeRescale(tottime); // math.pow(3 * tottime, 2.0/3)
|
|
tottime += waitAfter * tottime / animationTime;
|
|
final double actualAnimationTime = animationTime;
|
|
animationTime += waitAfter;
|
|
|
|
final Map<int, String> staticCss = {};
|
|
late String animatedCss;
|
|
|
|
/// collect the ids of animating elements
|
|
final List<JsAnimationElement> jsAnimationElements = [];
|
|
|
|
String jsAnimatedCss = '';
|
|
|
|
const String cssHeader =
|
|
'\n/* CSS automatically generated by kanimaji.py, do not edit! */\n';
|
|
if (GENERATE_SVG) animatedCss = cssHeader;
|
|
if (GENERATE_JS_SVG) {
|
|
jsAnimatedCss += cssHeader +
|
|
'''
|
|
.backward {\n
|
|
animation-direction: reverse !important;\n
|
|
}
|
|
''';
|
|
}
|
|
late final int lastFrameIndex;
|
|
late final double lastFrameDelay;
|
|
if (GENERATE_GIF) {
|
|
// final static_css = {};
|
|
lastFrameIndex = actualAnimationTime ~/ GIF_FRAME_DURATION + 1;
|
|
for (int i = 0; i < lastFrameIndex + 1; i++) {
|
|
staticCss[i] = cssHeader;
|
|
}
|
|
lastFrameDelay = animationTime - lastFrameIndex * GIF_FRAME_DURATION;
|
|
}
|
|
double elapsedlen = 0;
|
|
double elapsedtime = 0;
|
|
|
|
// add css elements for all strokes
|
|
for (final XmlNode g in doc
|
|
.getElement('svg', namespace: namespaces['n'])!
|
|
.findElements('g', namespace: namespaces['n'])) {
|
|
// for (final g in doc.xpath("/n:svg/n:g", namespaces=namespaces)){
|
|
final groupid = g.getAttribute('id') ?? '';
|
|
if (RegExp(r'^kvg:StrokeNumbers_').hasMatch(groupid)) {
|
|
final String rule = '''
|
|
#${groupid.replaceAll(':', '\\3a ')} {
|
|
display: none;
|
|
}
|
|
'''
|
|
.dedented;
|
|
if (GENERATE_SVG) animatedCss += rule;
|
|
if (GENERATE_JS_SVG) jsAnimatedCss += rule;
|
|
if (GENERATE_GIF) {
|
|
for (final k in staticCss.keys) {
|
|
staticCss[k] = staticCss[k]! + rule;
|
|
}
|
|
}
|
|
continue;
|
|
}
|
|
|
|
final gidcss = groupid.replaceAll(':', '\\3a ');
|
|
final rule = '''
|
|
#$gidcss {
|
|
stroke-width: ${strokeBorderWidth.toStringAsFixed(1)}px !important;
|
|
stroke: $strokeBorderColor !important;
|
|
}
|
|
'''
|
|
.dedented;
|
|
|
|
if (GENERATE_SVG) animatedCss += rule;
|
|
if (GENERATE_JS_SVG) jsAnimatedCss += rule;
|
|
if (GENERATE_GIF) {
|
|
for (final k in staticCss.keys) {
|
|
staticCss[k] = staticCss[k]! + rule;
|
|
}
|
|
}
|
|
|
|
for (final p in g.findAllElements("path", namespace: namespaces['n'])) {
|
|
final pathid = p.getAttribute('id') as String;
|
|
final pathidcss = pathid.replaceAll(':', '\\3a ');
|
|
|
|
XmlDocumentFragment addHref(String suffix, XmlDocumentFragment parent) {
|
|
final builder = XmlBuilder();
|
|
builder.element(
|
|
'use',
|
|
attributes: {'id': '$pathid-$suffix', 'xlink:href': '#$pathid'},
|
|
);
|
|
final ref = builder.buildFragment();
|
|
parent.firstElementChild!.children.add(ref);
|
|
return ref;
|
|
}
|
|
|
|
final String bgPathidcss = '$pathidcss-bg';
|
|
final String animPathidcss = '$pathidcss-anim';
|
|
final String brushPathidcss = '$pathidcss-brush';
|
|
final String brushBorderPathidcss = '$pathidcss-brush-brd';
|
|
|
|
final bgGroupElement = addHref('bg', bgGroup);
|
|
final animGroupElement = addHref('anim', animGroup);
|
|
XmlDocumentFragment? brushGroupElement;
|
|
XmlDocumentFragment? brushBorderGroupElement;
|
|
if (showBrush) {
|
|
brushGroupElement = addHref('brush', brushGroup);
|
|
brushBorderGroupElement = addHref('brush-brd', brushBrdGroup);
|
|
}
|
|
|
|
final pathname = pathid.replaceAll(RegExp(r'^kvg:'), '');
|
|
final pathlen = _computePathLength(p.getAttribute('d') as String);
|
|
final duration = strokeLengthToDuration(pathlen);
|
|
final relativeDuration =
|
|
duration * tottime / animationTime; // unscaled time
|
|
|
|
if (GENERATE_JS_SVG) {
|
|
jsAnimationElements.add(
|
|
JsAnimationElement(
|
|
bg: bgGroupElement,
|
|
anim: animGroupElement,
|
|
brush: brushGroupElement,
|
|
brushBorder: brushBorderGroupElement,
|
|
time: relativeDuration,
|
|
),
|
|
);
|
|
}
|
|
|
|
final newelapsedlen = elapsedlen + pathlen;
|
|
final newelapsedtime = elapsedtime + duration;
|
|
final animStart = elapsedtime / tottime * 100;
|
|
final animEnd = newelapsedtime / tottime * 100;
|
|
|
|
if (GENERATE_SVG) {
|
|
// animation stroke progression
|
|
animatedCss += '''
|
|
@keyframes strike-$pathname {
|
|
0% { stroke-dashoffset: ${pathlen.toStringAsFixed(3)}; }
|
|
${animStart.toStringAsFixed(3)}% { stroke-dashoffset: ${pathlen.toStringAsFixed(3)}; }
|
|
${animEnd.toStringAsFixed(3)}% { stroke-dashoffset: 0; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
@keyframes showhide-$pathname {
|
|
${animStart.toStringAsFixed(3)}% { visibility: hidden; }
|
|
${animEnd.toStringAsFixed(3)}% { stroke: $strokeFillingColor; }
|
|
}
|
|
#$animPathidcss {
|
|
stroke-dasharray: ${pathlen.toStringAsFixed(3)} ${pathlen.toStringAsFixed(3)};
|
|
stroke-dashoffset: 0;
|
|
animation: strike-$pathname ${animationTime.toStringAsFixed(3)}s ${timingFunction.name} infinite,
|
|
showhide-$pathname ${animationTime.toStringAsFixed(3)}s step-start infinite;
|
|
}
|
|
'''
|
|
.dedented;
|
|
|
|
if (showBrush) {
|
|
// brush element visibility
|
|
animatedCss += '''
|
|
@keyframes showhide-brush-$pathname {
|
|
${animStart.toStringAsFixed(3)}% { visibility: hidden; }
|
|
${animEnd.toStringAsFixed(3)}% { visibility: visible; }
|
|
100% { visibility: hidden; }
|
|
}
|
|
#$brushPathidcss, #$brushBorderPathidcss {
|
|
stroke-dasharray: 0 ${pathlen.toStringAsFixed(3)};
|
|
animation: strike-$pathname ${animationTime.toStringAsFixed(3)}s ${timingFunction.name} infinite,
|
|
showhide-brush-$pathname ${animationTime.toStringAsFixed(3)}s step-start infinite;
|
|
}
|
|
'''
|
|
.dedented;
|
|
}
|
|
}
|
|
|
|
if (GENERATE_JS_SVG) {
|
|
jsAnimatedCss += '\n/* stroke $pathid */\n';
|
|
|
|
// brush and background hidden by default
|
|
if (showBrush) {
|
|
jsAnimatedCss += '''
|
|
#$brushPathidcss, #$brushBorderPathidcss, #$bgPathidcss {
|
|
visibility: hidden;
|
|
}
|
|
'''
|
|
.dedented;
|
|
}
|
|
|
|
// hide stroke after current element
|
|
const afterCurrent = '[class *= "current"]';
|
|
jsAnimatedCss += '''
|
|
$afterCurrent ~ #$animPathidcss {
|
|
visibility: hidden;
|
|
}
|
|
$afterCurrent ~ #$bgPathidcss, #$bgPathidcss.animate {
|
|
visibility: visible;
|
|
}
|
|
@keyframes strike-$pathname {
|
|
0% { stroke-dashoffset: ${pathlen.toStringAsFixed(3)}; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
#$animPathidcss.animate {
|
|
stroke: $strokeFillingColor;
|
|
stroke-dasharray: ${pathlen.toStringAsFixed(3)} ${pathlen.toStringAsFixed(3)};
|
|
visibility: visible;
|
|
animation: strike-$pathname ${relativeDuration.toStringAsFixed(3)}s ${timingFunction.name} forwards 1;
|
|
}
|
|
'''
|
|
.dedented;
|
|
if (showBrush) {
|
|
jsAnimatedCss += '''
|
|
@keyframes strike-brush-$pathname {
|
|
0% { stroke-dashoffset: ${pathlen.toStringAsFixed(3)}; }
|
|
100% { stroke-dashoffset: 0.4; }
|
|
}
|
|
#$brushPathidcss.animate.brush, #$brushBorderPathidcss.animate.brush {
|
|
stroke-dasharray: 0 ${pathlen.toStringAsFixed(3)};
|
|
visibility: visible;
|
|
animation: strike-brush-$pathname ${relativeDuration.toStringAsFixed(3)}s ${timingFunction.name} forwards 1;
|
|
}
|
|
'''
|
|
.dedented;
|
|
}
|
|
}
|
|
|
|
if (GENERATE_GIF) {
|
|
for (final k in staticCss.keys) {
|
|
final time = k * GIF_FRAME_DURATION;
|
|
final reltime = time * tottime / animationTime; // unscaled time
|
|
|
|
staticCss[k] = staticCss[k]! + '\n/* stroke $pathid */\n';
|
|
|
|
String rule = '';
|
|
|
|
// animation
|
|
if (reltime < elapsedtime) {
|
|
// just hide everything
|
|
rule += "#$animPathidcss";
|
|
|
|
if (showBrush) {
|
|
rule += ", #$brushPathidcss, #$brushBorderPathidcss";
|
|
}
|
|
|
|
staticCss[k] = staticCss[k]! +
|
|
'''
|
|
%$rule {
|
|
visibility: hidden;
|
|
}
|
|
'''
|
|
.dedented;
|
|
} else if (reltime > newelapsedtime) {
|
|
// just hide the brush, and bg
|
|
rule += "#$bgPathidcss";
|
|
|
|
if (showBrush) {
|
|
rule += ", #$brushPathidcss, #$brushBorderPathidcss";
|
|
}
|
|
|
|
staticCss[k] = staticCss[k]! +
|
|
'''
|
|
$rule {
|
|
visibility: hidden;
|
|
}
|
|
'''
|
|
.dedented;
|
|
} else {
|
|
final intervalprop =
|
|
((reltime - elapsedtime) / (newelapsedtime - elapsedtime));
|
|
final progression = timingFunction.func(intervalprop);
|
|
|
|
staticCss[k] = staticCss[k]! +
|
|
'''
|
|
#$animPathidcss {
|
|
stroke-dasharray: ${pathlen.toStringAsFixed(3)} ${(pathlen + 0.002).toStringAsFixed(3)};
|
|
stroke-dashoffset: ${(pathlen * (1 - progression) + 0.0015).toStringAsFixed(4)};
|
|
stroke: $strokeFillingColor;
|
|
}
|
|
'''
|
|
.dedented;
|
|
if (showBrush) {
|
|
staticCss[k] = staticCss[k]! +
|
|
'''
|
|
#$brushPathidcss, #$brushBorderPathidcss {
|
|
stroke-dasharray: 0.001 ${(pathlen + 0.002).toStringAsFixed(3)};
|
|
stroke-dashoffset: ${(pathlen * (1 - progression) + 0.0015).toStringAsFixed(4)};
|
|
}
|
|
'''
|
|
.dedented;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
elapsedlen = newelapsedlen;
|
|
elapsedtime = newelapsedtime;
|
|
}
|
|
}
|
|
|
|
void addGroup(XmlDocumentFragment g) =>
|
|
doc.root.firstElementChild?.children.add(g);
|
|
|
|
// insert groups
|
|
if (showBrush && !showBrushFrontBorder) addGroup(brushBrdGroup);
|
|
addGroup(bgGroup);
|
|
if (showBrush && showBrushFrontBorder) addGroup(brushBrdGroup);
|
|
addGroup(animGroup);
|
|
if (showBrush) addGroup(brushGroup);
|
|
|
|
if (GENERATE_SVG) {
|
|
print(animatedCss);
|
|
final builder = XmlBuilder();
|
|
final style = (builder
|
|
..element(
|
|
'style',
|
|
attributes: {'id': "style-Kanimaji", 'type': 'text/css'},
|
|
nest: animatedCss,
|
|
))
|
|
.buildFragment();
|
|
doc.root.firstElementChild!.children.insert(0, style);
|
|
File(outputFile).writeAsStringSync(doc.toXmlString(pretty: true));
|
|
doc.root.children.removeAt(0);
|
|
print('written $outputFile');
|
|
}
|
|
|
|
if (GENERATE_GIF) {
|
|
// svgframefiles = []
|
|
// pngframefiles = []
|
|
// svgexport_data = []
|
|
// for k in static_css:
|
|
// svgframefile = filename_noext_ascii + ("_frame%04d.svg"%k)
|
|
// pngframefile = filename_noext_ascii + ("_frame%04d.png"%k)
|
|
// svgframefiles.append(svgframefile)
|
|
// pngframefiles.append(pngframefile)
|
|
// svgexport_data.append({"input": [abspath(svgframefile)],
|
|
// "output": [[abspath(pngframefile),
|
|
// "%d:%d"% (GIF_SIZE, GIF_SIZE)]]})
|
|
|
|
// style = E.style(static_css[k], id="style-Kanimaji")
|
|
// doc.getroot().insert(0, style)
|
|
// doc.write(svgframefile, pretty_print=True)
|
|
// doc.getroot().remove(style)
|
|
// print 'written %s' % svgframefile
|
|
|
|
// // create json file
|
|
// svgexport_datafile = filename_noext_ascii+"_export_data.json"
|
|
// with open(svgexport_datafile,'w') as f:
|
|
// f.write(json.dumps(svgexport_data))
|
|
// print 'created instructions %s' % svgexport_datafile
|
|
|
|
// // run svgexport
|
|
// cmdline = 'svgexport %s' % shescape(svgexport_datafile)
|
|
// print cmdline
|
|
// if os.system(cmdline) != 0:
|
|
// exit('Error running external command')
|
|
|
|
// if DELETE_TEMPORARY_FILES:
|
|
// os.remove(svgexport_datafile)
|
|
// for f in svgframefiles:
|
|
// os.remove(f)
|
|
|
|
// // generate GIF
|
|
// giffile_tmp1 = filename_noext + '_anim_tmp1.gif'
|
|
// giffile_tmp2 = filename_noext + '_anim_tmp2.gif'
|
|
// giffile = filename_noext + '_anim.gif'
|
|
// escpngframefiles = ' '.join(shescape(f) for f in pngframefiles[0:-1])
|
|
|
|
// if GIF_BACKGROUND_COLOR == 'transparent':
|
|
// bgopts = '-dispose previous'
|
|
// else:
|
|
// bgopts = "-background '%s' -alpha remove" % GIF_BACKGROUND_COLOR
|
|
// cmdline = ("convert -delay %d %s -delay %d %s "+
|
|
// "%s -layers OptimizePlus %s") % (
|
|
// int(GIF_FRAME_DURATION*100),
|
|
// escpngframefiles,
|
|
// int(last_frame_delay*100),
|
|
// shescape(pngframefiles[-1]),
|
|
// bgopts,
|
|
// shescape(giffile_tmp1))
|
|
// print(cmdline);
|
|
// if os.system(cmdline) != 0:
|
|
// exit('Error running external command')
|
|
|
|
// if DELETE_TEMPORARY_FILES:
|
|
// for f in pngframefiles:
|
|
// os.remove(f)
|
|
// print 'cleaned up.'
|
|
|
|
// cmdline = ("convert %s \\( -clone 0--1 -background none "+
|
|
// "+append -quantize transparent -colors 63 "+
|
|
// "-unique-colors -write mpr:cmap +delete \\) "+
|
|
// "-map mpr:cmap %s") % (
|
|
// shescape(giffile_tmp1),
|
|
// shescape(giffile_tmp2))
|
|
// print cmdline
|
|
// if os.system(cmdline) != 0:
|
|
// exit('Error running external command')
|
|
// if DELETE_TEMPORARY_FILES:
|
|
// os.remove(giffile_tmp1)
|
|
|
|
// cmdline = ("gifsicle -O3 %s -o %s") % (
|
|
// shescape(giffile_tmp2),
|
|
// shescape(giffile))
|
|
// print cmdline
|
|
// if os.system(cmdline) != 0:
|
|
// exit('Error running external command')
|
|
// if DELETE_TEMPORARY_FILES:
|
|
// os.remove(giffile_tmp2)
|
|
}
|
|
|
|
// if (GENERATE_JS_SVG) {
|
|
// final f0insert = [bg_g, anim_g];
|
|
// if (SHOW_BRUSH) f0insert += [brush_g, brush_brd_g];
|
|
// for g in f0insert:
|
|
// el = E.a()
|
|
// el.set("data-stroke","0")
|
|
// g.insert(0, el)
|
|
|
|
// for i in range(0, len(js_anim_els)):
|
|
// els = js_anim_els[i]
|
|
// for k in els:
|
|
// els[k].set("data-stroke",str(i+1))
|
|
// els["anim"].set("data-duration", str(js_anim_time[i]))
|
|
|
|
// doc.getroot().set('data-num-strokes', str(len(js_anim_els)))
|
|
|
|
// style = E.style(js_animated_css, id="style-Kanimaji")
|
|
// doc.getroot().insert(0, style)
|
|
// svgfile = filename_noext + '_js_anim.svg'
|
|
// doc.write(svgfile, pretty_print=True)
|
|
// doc.getroot().remove(style)
|
|
// print('written $svgfile');
|
|
// }
|
|
}
|
|
|
|
void main(List<String> args) {
|
|
// createAnimation('assets/kanjivg/kanji/0f9b1.svg');
|
|
|
|
const kanji = '実例';
|
|
final fileList = [];
|
|
for (int k = 0; k < kanji.length; k++) {
|
|
createAnimation(
|
|
inputFile: 'assets/kanjivg/kanji/${kanji.codeUnits[k].toRadixString(16).padLeft(5, '0')}.svg',
|
|
outputFile: '${k+1}.svg',
|
|
);
|
|
fileList.add('${k+1}.svg');
|
|
}
|
|
|
|
File('index.html').writeAsStringSync(
|
|
'<html>' +
|
|
fileList.map((e) => File(e).readAsStringSync().replaceAll(']>', '')).join('\n') +
|
|
'</html>'
|
|
);
|
|
// createAnimation(
|
|
// inputFile: 'assets/kanjivg/kanji/060c5.svg',
|
|
// outputFile: 'test.svg',
|
|
// );
|
|
}
|