Существует ли не Win2D текстовое решение для UWP Composition API - PullRequest
0 голосов
/ 19 января 2019

Чтобы избежать вопроса XY, сначала Y: Есть ли способ создать текст на SpriteVisual, который не требует Win2D?

Теперь X: проблема, которую я пытаюсь решить, состоит в том, чтоМне нужен текст в SpriteVisual (вместо TextBlock), чтобы применить к нему анимацию 3D-выражений с перспективным поворотом.Текст на SpriteVisual можно сделать с помощью Win2D.Вот пример примера кода Microsoft :

using (var ds = CanvasComposition.CreateDrawingSession(_drawingSurface))
{
     ds.Clear(Colors.Transparent);
     var rect = new Rect(new Point(2, 2), (_drawingSurface.Size.ToVector2() - new Vector2(4, 4)).ToSize());
     ds.FillRoundedRectangle(rect, 15, 15, Colors.LightBlue);
     ds.DrawRoundedRectangle(rect, 15, 15, Colors.Gray, 2);
     ds.DrawText("This is a composition drawing surface", rect, Colors.Black, new CanvasTextFormat()
     {
          FontFamily = "Comic Sans MS",
          FontSize = 32,
          WordWrapping = CanvasWordWrapping.WholeWord,
          VerticalAlignment = CanvasVerticalAlignment.Center,
          HorizontalAlignment = CanvasHorizontalAlignment.Center
     }
);

_drawingBrush.Surface = _drawingSurface;

_drawingVisual = _compositor.CreateSpriteVisual();
_drawingVisual.Brush = _drawingBrush;

Чтобы раскрасить текст, требуется Win2D ICanvasBrush.Но я хочу анимировать цвет в Expression Animation, поэтому мне нужно, чтобы цвет текста пришел из CompositionBrush.Теперь я могу создать CompositionMaskBrush с текстовой кистью в качестве маски и CompositionBrush в качестве источника.Но с CompositionMaskBrush я не могу добавить к ней дополнительную маску или любые другие эффекты композиции, что проблематично для меня.

Есть ли альтернативный подход или, возможно, расширение API композиции в инсайдерской сборке, которое я 'я не знаком с?

1 Ответ

0 голосов
/ 21 января 2019

Y-ответ: Нет, вы можете рисовать текст только на CompositionDrawingSurface, используя Win2d CanvasDrawingSession.Но вы можете получить Visual из XAML TextBlock с ElementCompositionPreview.GetElementVisual(yourTextBlock) и анимировать его с помощью выражений API композиции + цветных раскадровок XAML.

X-answer: Вы можете создать альфа-маску из вашего текста CompositionDrawingSurfaceи примените его к CompositionColorBrush:

    private void CreateColoredText(string text)
    {
        var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
        var graphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(compositor, CanvasDevice.GetSharedDevice());

        var spriteTextVisual = compositor.CreateSpriteVisual();
        spriteTextVisual.Size = new Vector2(512, 512);

        var maskDrawingSurface = graphicsDevice.CreateDrawingSurface(new Size(512, 512), DirectXPixelFormat.B8G8R8A8UIntNormalized, DirectXAlphaMode.Premultiplied);

        using (var ds = CanvasComposition.CreateDrawingSession(maskDrawingSurface))
        {
            ds.Clear(Colors.Transparent);
            ds.DrawText(text, new Rect(0, 0, 512, 512), Colors.Lime, new CanvasTextFormat
            {
                FontSize = 32,
                FontWeight = FontWeights.Bold,
                VerticalAlignment = CanvasVerticalAlignment.Center,
                HorizontalAlignment = CanvasHorizontalAlignment.Center,
                LineSpacing = 32
            });
        }

        var maskSurfaceBrush = compositor.CreateSurfaceBrush(maskDrawingSurface);
        var surfaceTextBrush = compositor.CreateColorBrush(Colors.DeepPink);
        var maskBrush = compositor.CreateMaskBrush();
        maskBrush.Mask = maskSurfaceBrush;
        maskBrush.Source = surfaceTextBrush;

        var colorAnimation = compositor.CreateColorKeyFrameAnimation();
        colorAnimation.InsertKeyFrame(0.5f, Colors.DeepSkyBlue);
        colorAnimation.InsertKeyFrame(1, Colors.DeepPink);
        colorAnimation.Duration = TimeSpan.FromMilliseconds(1500);
        colorAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

        surfaceTextBrush.StartAnimation("Color", colorAnimation);

        spriteTextVisual.Brush = maskBrush;

        ElementCompositionPreview.SetElementChildVisual(Grid, spriteTextVisual);
    }

Теперь вы можете анимировать цвет и перспективу для ваших целей.

...