Text MaskInvert

Animated MaskInvert

Compositor _compositor;
SurfaceFactory _surfaceFactory;
CompositionEffectFactory _effectFactory;

SpriteVisual _visual;
TextSurface _textSurface;
CompositionDrawingSurface _colorSurface;


_compositor = new Compositor();
_surfaceFactory = SurfaceFactory.GetSharedSurfaceFactoryForCompositor(_compositor);

_textSurface = _surfaceFactory.CreateTextSurface("Hello, World!");
_textSurface.FontSize = 72;
var surfaceBrush = _compositor.CreateSurfaceBrush(_textSurface.Surface);

_colorSurface = _surfaceFactory.CreateSurface(Size.Empty);
// This helper will resize our surface to 1x1. NOTE that if the device encounters a device lost 
// scenario (https://msdn.microsoft.com/en-us/library/windows/desktop/bb324479(v=vs.85).aspx),
// the color surface won't be redrawn. We'll have to do that ourselves. The TextSurface class
// above handles device lost, so we don't have to worry about that. Getting this to work using
// a CompositionColorBrush or a ColorSourceEffect is probably prefferable, but this is the first
// thing I came up with.
SurfaceUtilities.FillSurfaceWithColor(_surfaceFactory, _colorSurface, Colors.Black);
var colorBrush = _compositor.CreateSurfaceBrush(_colorSurface);
colorBrush.HorizontalAlignmentRatio = 0;

_visual = _compositor.CreateSpriteVisual();
_visual.Size = _textSurface.Size.ToVector2();
_visual.AnchorPoint = new Vector2(0.5f);
_visual.RelativeOffsetAdjustment = new Vector3(0.5f);

var effectDescription = new CompositeEffect
{
    Mode = CanvasComposite.MaskInvert,
    Sources =
    {
        new CompositionEffectSourceParameter("text"),
        new CompositionEffectSourceParameter("color")
    }
};

_effectFactory = _compositor.CreateEffectFactory(effectDescription);
var effectBrush = _effectFactory.CreateBrush();
effectBrush.SetSourceParameter("text", surfaceBrush);
effectBrush.SetSourceParameter("color", colorBrush);

_visual.Brush = effectBrush;
_rootVisual.Children.InsertAtTop(_visual);

var min = 0.0f;
// Our 1x1 color surface will be scaled until the height of the size matches
// the height of the text (the smaller value).
var max = (float)(_textSurface.Size.Width - _textSurface.Size.Height);

var animation = _compositor.CreateScalarKeyFrameAnimation();
animation.InsertKeyFrame(0.0f, min);
animation.InsertKeyFrame(0.5f, max);
animation.InsertKeyFrame(1.0f, min);
animation.Duration = TimeSpan.FromSeconds(2.5);
animation.IterationBehavior = AnimationIterationBehavior.Forever;

colorBrush.StartAnimation("Offset.X", animation);

Code

private Compositor _compositor;
private SurfaceFactory _surfaceFactory;
private CompositionEffectFactory _effectFactory;

private SpriteVisual _visual;
private TextSurface _textSurface;
private CompositionDrawingSurface _colorSurface;

_compositor = new Compositor();
_surfaceFactory = SurfaceFactory.GetSharedSurfaceFactoryForCompositor(_compositor);

_textSurface = _surfaceFactory.CreateTextSurface("Hello, World!");
_textSurface.FontSize = 72;
var surfaceBrush = _compositor.CreateSurfaceBrush(_textSurface.Surface);

_colorSurface = _surfaceFactory.CreateSurface(Size.Empty);
// This helper will resize our surface to 1x1. NOTE that if the device encounters a device lost 
// scenario (https://msdn.microsoft.com/en-us/library/windows/desktop/bb324479(v=vs.85).aspx),
// the color surface won't be redrawn. We'll have to do that ourselves. The TextSurface class
// above handles device lost, so we don't have to worry about that. Getting this to work using
// a CompositionColorBrush or a ColorSourceEffect is probably prefferable, but this is the first
// thing I came up with.
SurfaceUtilities.FillSurfaceWithColor(_surfaceFactory, _colorSurface, Colors.Black);
var colorBrush = _compositor.CreateSurfaceBrush(colorSurface);

_visual = _compositor.CreateSpriteVisual();
_visual.Size = _textSurface.Size.ToVector2();
_visual.AnchorPoint = new Vector2(0.5f);
_visual.RelativeOffsetAdjustment = new Vector3(0.5f);

var effectDescription = new CompositeEffect
{
    Mode = CanvasComposite.MaskInvert,
    Sources =
    {
        new CompositionEffectSourceParameter("text"),
        new CompositionEffectSourceParameter("color")
    }
};

_effectFactory = _compositor.CreateEffectFactory(effectDescription);
var effectBrush = _effectFactory.CreateBrush();
effectBrush.SetSourceParameter("text", surfaceBrush);
effectBrush.SetSourceParameter("color", colorBrush);

_visual.Brush = effectBrush;
_root.Children.InsertAtTop(_visual);

Static

Animated