本来是应该用InkCanvas,但是InkCanvas在生成新图片的时候会不带背景。
所以可以用Canvas,自己在.cs代码里写轨迹。
这个例子是,图上用textblock添加文字,或者是在canvas中手动绘制图形。
xaml:
<Grid> <StackPanel Orientation="Vertical"> <TextBlock Text="Add your text here:" FontSize="20" Margin="0,20,0,0"/> <TextBox x:Name="textbox" Margin="0,20,0,0"/> <Canvas x:Name="inkCanvas"> <Grid x:Name="newimg" Width="400" > <Image Source="Assets/1.png" x:Name="image" Margin="0,100,0,0" /> <TextBlock FontSize="40" x:Name="textblock" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black"/> </Grid> </Canvas> <StackPanel Orientation="Horizontal"> <Button Content="Add text to image" Margin="10,20,0,0" Click="Button_Click"/> <Button Content="Draw on the image" HorizontalAlignment="Center" Margin="10,20,0,0" Click="Button_Click_1" /> </StackPanel> </StackPanel> <StackPanel VerticalAlignment="Bottom"> <Image x:Name="newimage"/> </StackPanel> </Grid>
.cs
public MainPage() { this.InitializeComponent(); this.NavigationCacheMode = NavigationCacheMode.Required; inkCanvas.PointerPressed += inkCanvas_PointerPressed; inkCanvas.PointerMoved += inkCanvas_PointerMoved; inkCanvas.PointerReleased += inkCanvas_PointerReleased; inkCanvas.PointerExited += inkCanvas_PointerReleased; } /// <summary> /// Invoked when this page is about to be displayed in a Frame. /// </summary> /// <param name="e">Event data that describes how this page was reached. /// This parameter is typically used to configure the page.</param> protected override void OnNavigatedTo(NavigationEventArgs e) { // TODO: Prepare page for display here. // TODO: If your application contains multiple pages, ensure that you are // handling the hardware Back button by registering for the // Windows.Phone.UI.Input.HardwareButtons.BackPressed event. // If you are using the NavigationHelper provided by some templates, // this event is handled for you. } private async void Button_Click(object sender, RoutedEventArgs e) { string text = textbox.Text.ToString(); textblock.Text = text; RenderTargetBitmap renderbmp = new RenderTargetBitmap(); await renderbmp.RenderAsync(newimg); newimage.Source = renderbmp; } private async void Button_Click_1(object sender, RoutedEventArgs e) { RenderTargetBitmap renderbmp = new RenderTargetBitmap(); await renderbmp.RenderAsync(inkCanvas); newimage.Source = renderbmp; } Windows.UI.Xaml.Shapes.Path _Current; private void inkCanvas_PointerReleased(object sender, PointerRoutedEventArgs e) { _Current = null; } private void inkCanvas_PointerMoved(object sender, PointerRoutedEventArgs e) { var pointer = e.GetCurrentPoint(inkCanvas); if (!pointer.Properties.IsLeftButtonPressed || _Current == null) return; var segments = (_Current.Data as PathGeometry).Figures.First().Segments.First() as PolyLineSegment; segments.Points.Add(pointer.Position); } private void inkCanvas_PointerPressed(object sender, PointerRoutedEventArgs e) { var pointer = e.GetCurrentPoint(inkCanvas); if (!pointer.Properties.IsLeftButtonPressed) return; _Current = new Windows.UI.Xaml.Shapes.Path { Data = new PathGeometry { Figures = {new PathFigure { StartPoint = pointer.Position,Segments = { new PolyLineSegment() } } } }, Stroke = new SolidColorBrush(Colors.Black), StrokeThickness = 4d, }; inkCanvas.Children.Add(_Current); }