Question

有没有办法调整WPF textBlock或GlyphRun元素中某些字符的宽度？

我不想增加字符之间的空间，而是增加字符本身的宽度，如图所示：

以下代码在屏幕上打印字母'ABC abc'，我应该怎样做才能使某些字母的宽度达到200％或300％？

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow" Height="200" Width="300">
    <Grid>
        <Image Stretch="None" SnapsToDevicePixels="True">
            <Image.Source>
                <DrawingImage x:Name="drawingImage" />
            </Image.Source>
        </Image>
    </Grid>
</Window>

public partial class MainWindow : Window
{

    GlyphTypeface glyphTypeface;
    double renderingEmSize, advanceWidth, advanceHeight;
    Point baselineOrigin;

    public MainWindow()
    {
        InitializeComponent();

        new Typeface("segoe ui").TryGetGlyphTypeface(out glyphTypeface);

        renderingEmSize = 12;

        advanceWidth = glyphTypeface.AdvanceWidths[0] * renderingEmSize;
        advanceHeight = glyphTypeface.Height * renderingEmSize;
        baselineOrigin = new Point(0, glyphTypeface.Baseline * renderingEmSize);

        drawingImage.Drawing = Render();

    }

    private Drawing Render()
    {
        var line = "ABC abc";

        var drawing = new DrawingGroup();
        using (var drawingContext = drawing.Open())
        {
            var glyphRun = ConvertTextToGlyphRun(
                glyphTypeface, renderingEmSize,
                advanceWidth, advanceHeight,
                baselineOrigin, line);

            var guidelines = new GuidelineSet();
            guidelines.GuidelinesX.Add(baselineOrigin.X);
            guidelines.GuidelinesY.Add(baselineOrigin.Y);
            drawingContext.PushGuidelineSet(guidelines);
            drawingContext.DrawGlyphRun(Brushes.Black, glyphRun);
            drawingContext.Pop();
        }

        return drawing;
    }

    static GlyphRun ConvertTextToGlyphRun(
        GlyphTypeface glyphTypeface, 
        double renderingEmSize, 
        double advanceWidth, 
        double advanceHeight,
        Point baselineOrigin,
        string line)
    {
        var glyphIndices = new List<ushort>();
        var advanceWidths = new List<double>();
        var glyphOffsets = new List<Point>();

        var y = baselineOrigin.Y;
        var x = baselineOrigin.X;

        for (int j = 0; j < line.Length; ++j)
        {
            var glyphIndex = glyphTypeface.CharacterToGlyphMap[line[j]];
            glyphIndices.Add(glyphIndex);
            advanceWidths.Add(0);
            glyphOffsets.Add(new Point(x, y));
            x += glyphTypeface.AdvanceWidths[glyphIndex] * renderingEmSize;
        }

        return new GlyphRun(
            glyphTypeface,
            0,
            false,
            renderingEmSize,
            glyphIndices,
            baselineOrigin,
            advanceWidths,
            glyphOffsets,
            null, null, null, null, null);
    }
}

Answer 1

在代码中添加两行以进行转换：

drawingContext.PushGuidelineSet(guidelines);
drawingContext.PushTransform(new ScaleTransform(2, 1)); // <= new line
drawingContext.DrawGlyphRun(Brushes.Black, glyphRun);
drawingContext.Pop();                                   // <= new line
drawingContext.Pop();

来自here。

Answer 2

我认为，这应该有帮助

<StackPanel>
    <TextBox x:Name="originalABC">ABC</TextBox>
    <TextBlock x:Name="transformedABC">
        <TextBlock.RenderTransform>
            <ScaleTransform CenterX="0" CenterY="0" ScaleX="3" ScaleY="1" />
        </TextBlock.RenderTransform>
        ABC
    </TextBlock>
</StackPanel>

screenshot

设置字符宽度

2 个答案: