片鱗懐古のブログ: wpf : 文字列の形からsvgのパスを作成

試しに文字列からsvgのパスを作成するコードを作ってみました。やり方は簡単で、

System.Windows.Media.FormattedTextに文字列を渡す。
FormattedText.BuildGeometryで文字の形を現すジオメトリを作る。
ジオメトリを再帰で探索して、PathGeometryならToStringする。それを連結。
svgのpath要素のd属性にできた文字列を格納する。

コレだけです。

PathGeometry.ToStringはジオメトリグループの階層をsvgのpathとよく似た構文で表現してくれるようです。

MSDNライブラリ ... パスマークアップ構文

これは少なくとも今回試した範囲では、先頭にF1などのfillRuleが入っている以外はsvgのpathと同じのようですね。なのでPathGeometry.ToString().Substring(2)でF1を削ればそのまま使えそうな気配です(詳細未確認)。そのままだとノードの座標を表す数字の小数点以下の桁数が多すぎるので、これも正規表現で削ります。単純に切り捨てです。

そんな事をするコードはこんな感じ。

// Text2SvgPath.cs
using System;
using System.Globalization;
using System.Text;
using System.Text.RegularExpressions;
using System.Windows;
using System.Windows.Media;

namespace Text2SvgPathTest
{
    class Text2SvgPath
    {
        public double TextWidth { get; private set; }
        public double TextHeight { get; private set; }
        public double GeometryWidth { get; private set; }
        public double GeometryHeight { get; private set; }
        public double GeometryOffsetX { get; private set; }
        public double GeometryOffsetY { get; private set; }
        public string Text { get; private set; }
        public string SvgText { get; private set; }
        public int NumericPrecision { get; private set; }
        public string Id { get; private set; }
        public string SvgClass { get; private set; }
        public int FontSize { get; private set; }
        public FlowDirection FlowDirection { get; private set; }
        private Regex _regexTriflingNumber;
        //private string _numericFromat = "F2";

public Text2SvgPath(string text, string id, string svgClass, int numericPrecision, FontFamily fontFamily, int fontSize = 20, FlowDirection flowDirection = FlowDirection.LeftToRight)
        {
            Text = text;
            Id = id;
            SvgClass = svgClass;
            NumericPrecision = numericPrecision;
            //_numericFromat = "F" + numericPrecision;
            _regexTriflingNumber = new Regex(@"(?<=\.\d{" + numericPrecision + @"})\d+");
            FontSize = fontSize;
            this.FlowDirection = flowDirection;
            
            var formattedText = new FormattedText(
                    text,
                    CultureInfo.CurrentCulture,
                    flowDirection,
                    new Typeface(fontFamily, FontStyles.Normal, FontWeights.Normal, FontStretches.Normal),
                    fontSize,
                    Brushes.Black);
            TextWidth = formattedText.Width;
            TextHeight = formattedText.Height;
            var gg = formattedText.BuildGeometry(new Point()) as GeometryGroup;
            var bounds = gg.Bounds;
            GeometryOffsetX = bounds.X;
            GeometryOffsetY = bounds.Y;
            GeometryWidth = bounds.Width;
            GeometryHeight = bounds.Height;

var sb = new StringBuilder();
            Geometry2Path(sb, gg);

SvgText = string.Format(
                    "<path {0}{1}d='{2}' />",
                    (Id != null ? string.Format("id='{0}' ", Id) : ""),
                    (SvgClass != null ? string.Format("class='{0}' ", SvgClass) : ""),
                    sb.ToString() // 自前でSegmentを読む場合はsb.Append('Z').ToString()
            );
        }

private void Geometry2Path(StringBuilder sb, Geometry g)
        {
            if (g is GeometryGroup)
            {
                var gg = g as GeometryGroup;
                foreach(var child in gg.Children)
                {
                    Geometry2Path(sb, child);
                }
            }
            else if (g is PathGeometry)
            {
                sb.Append(_regexTriflingNumber.Replace(g.ToString().Substring(2), "")); //最初の2文字はfillRule(wpf独自の塗りつぶし方)なので飛ばす。
                //PathGeometry2Path(sb, g as PathGeometry);
            }
            else
            {
                throw new NotImplementedException("Geometry2Path : 未確認のジオメトリ");
            }
        }

/*
        private void PathGeometry2Path(StringBuilder sb, PathGeometry g)
        {
            foreach (var f in g.Figures)
            {
                sb.Append("M ");
                sb.Append(f.StartPoint.X.ToString(_numericFromat));
                sb.Append(',');
                sb.Append(f.StartPoint.Y.ToString(_numericFromat));
                sb.Append(' ');

bool? isOldLine = null;
                foreach (var s in f.Segments)
                {
                    if (s is PolyBezierSegment)
                    {
                        PolyBezierSegment2Path(sb, s as PolyBezierSegment, isOldLine == false);
                        isOldLine = false;
                    }
                    else if (s is BezierSegment)
                    {
                        BezierSegment2Path(sb, s as BezierSegment, isOldLine == false);
                        isOldLine = false;
                    }
                    else if (s is PolyLineSegment)
                    {
                        PolyLineSegment2Path(sb, s as PolyLineSegment, isOldLine == true);
                        isOldLine = true;
                    }
                    else if (s is LineSegment)
                    {
                        LineSegment2Path(sb, s as LineSegment, isOldLine == true);
                        isOldLine = true;
                    }
                    else
                    {
                        throw new NotImplementedException("PathGeometry2Path : 未確認のセグメント");
                    }
                }
            }
        }

private void PolyBezierSegment2Path(StringBuilder sb, PolyBezierSegment s, bool isOldCurve)
        {
            if (!isOldCurve)
                sb.Append("C ");

foreach(var p in s.Points)
            {
                sb.Append(p.X.ToString(_numericFromat));
                sb.Append(',');
                sb.Append(p.Y.ToString(_numericFromat));
                sb.Append(' ');
            }
        }

private void BezierSegment2Path(StringBuilder sb, BezierSegment s, bool isOldCurve)
        {
            if (!isOldCurve)
                sb.Append("C ");

sb.Append(s.Point1.X.ToString(_numericFromat));
            sb.Append(',');
            sb.Append(s.Point1.Y.ToString(_numericFromat));
            sb.Append(' ');
            sb.Append(s.Point2.X.ToString(_numericFromat));
            sb.Append(',');
            sb.Append(s.Point2.Y.ToString(_numericFromat));
            sb.Append(' ');
            sb.Append(s.Point3.X.ToString(_numericFromat));
            sb.Append(',');
            sb.Append(s.Point3.Y.ToString(_numericFromat));
            sb.Append(' ');
        }

private void PolyLineSegment2Path(StringBuilder sb, PolyLineSegment s, bool isOldLine)
        {
            if (!isOldLine)
                sb.Append("L ");

foreach (var p in s.Points)
            {
                sb.Append(p.X.ToString(_numericFromat));
                sb.Append(',');
                sb.Append(p.Y.ToString(_numericFromat));
                sb.Append(' ');
            }
        }

private void LineSegment2Path(StringBuilder sb, LineSegment s, bool isOldLine)
        {
            if (!isOldLine)
                sb.Append("L ");

sb.Append(s.Point.X.ToString(_numericFromat));
            sb.Append(',');
            sb.Append(s.Point.Y.ToString(_numericFromat));
            sb.Append(' ');
        }
        */
    }
}

svgのpathにはidとclassを埋め込めるようにしています。 pathをdefsに書いておけばuse要素で簡単にずらせます。 classの埋め込みは文字の修飾をまとめて扱えるようにするためです。

pathのノードの座標は入力文字列を(0,0)に描画したときの座標です。 pathのサイズはTextWidth、TextHeightのプロパティで取得できます。これは標準的な余白を含んだサイズです。普通はコチラを使うといいでしょう。それに対してGeometryOffsetX、GeometryOffsetY、GeometryWidth、GeometryHeightのプロパティはノードの上下左右の最も外側の座標を元に計算されています。余白の一切無いデータを使いたい場合はコチラを使うことになりそうですね。どちらもpathのストロークについて考慮していないので注意。例えば太字にするときなどは一工夫いりそうです。

PathGeometry2Pathメソッド以下、コードの大部分がコメントアウトされていますが、これは自分でSegmentを読むときのコードです。長い割りにたいしたことはやってません。正規表現で有効桁数以下を切り捨てるより速いかと思ったんですが、気のせいかも? まぁ性能問題にぶち当たるようなネタは無いので放置で。

動作チェック用の適当なMainWindow.xaml

適当なMainWindow.xaml.cs

using System.Windows;
using System.Windows.Media;

namespace Text2SvgPathTest
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

private void Button_Click(object sender, RoutedEventArgs e)
        {
            /*
            string fontFamilyName = "ＭＳ 明朝"; // "ＭＳ ゴシック";
            var fontFamily = new FontFamily(fontFamilyName);
            */

// 標準的な余白のsvg画像を出力
            textBoxOutput.Text = string.Format(
                    "<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='{0}px' height='{1}px'><defs><style type='text/css'><![CDATA[.str{{fill:black;stroke:none;}}]]></style>{2}</defs><use x='0' y='0' xlink:href='#t0'/></svg>",
                    text2SvgPath.TextWidth,
                    text2SvgPath.TextHeight,
                    text2SvgPath.SvgText
            );
        }
    }
}

textBoxOutputへの出力をsvgという拡張子のテキストファイルに保存すれば、結果が見れます。例えば「動作テスト!」という文字列をpathにするとこうなります。

なんでこんなのを作ったかというと、ブログのネタとして簡単な図表(出力はsvg)を書くスクリプトを思いついたからなんですよね。 svgのtextはブラウザによって全然見た目が違います。あるブラウザでちょうどいいtextが別のブラウザではみ出しているとか、よくあること。なので色んな環境で見れる物を作るならtextではなく、textをpathに変換したものを使う必要があります。

ホントはjavascriptで同じ事をできればよかったんですけど、検索してもそれっぽい情報はありませんでした。というわけで思いついた単語はsilverlight。共通するライブラリも多いという事でまずwpfで作ってみたんですけど、silverlight、どうなんでしょうね? silverlightが使われていた例ってのは、以前Gyaoで使われていたのを見ただけなんですけど、今はflashになっちゃってるし。やっぱりMFCと同じ運命に...?

まぁ、個人ブログのネタで使うんならいいんでしょうけど、無駄なことをしようとしてるような気がします。

================

2013/09/02 追記。 System.Windows.Media.FormattedTextがsilverlightでは使えないことを確認。というわけで図表ネタはボツに。まぁ、小さなネタなんでいいんですけどね。

片鱗懐古のブログ

2013年8月30日金曜日

wpf : 文字列の形からsvgのパスを作成

閲覧数が多い投稿

ラベル

広告

投稿した動画

ブログアーカイブ