World War I Windows 10 (60) and World War I 60

Source: Internet
Author: User

World War I Windows 10 (60) and World War I 60

[Download source code]


Backwater world war I Windows 10 (60)-Controls (media class): Pointer graffiti and InkCanvas graffiti



Author: webabcd


Introduction
Controls for Windows 10 (Media)

  • Implement a simple graffiti by handling Pointer related events
  • Basic InkCanvas knowledge



Example
1. demonstrate how to handle Pointer-related events to implement a simple graffiti
Controls/MediaControl/InkSimple. xaml

<Page x: Class = "Windows10.Controls. mediaControl. inkSimple "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: local =" using: Windows10.Controls. mediaControl "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: ignorable = "d"> <Grid Background = "Transparent"> <StackPanel Margin = "10 0 10"> <Button Name = "btnClear" Content = "clear" Click =" btnClear_Click "Margin =" 5 "/> <Canvas Name =" canvas "Background =" Blue "Width =" 800 "Height =" 480 "HorizontalAlignment =" Left "Margin =" 5 "/> </StackPanel> </Grid> </Page>

Controls/MediaControl/InkSimple. xaml. cs

/** This example shows how to implement a simple graffiti System */using System; using System by handling Pointer related events. collections. generic; using Windows. foundation; using Windows. UI; using Windows. UI. input; using Windows. UI. xaml; using Windows. UI. xaml. controls; using Windows. UI. xaml. input; using Windows. UI. xaml. media; using Windows. UI. xaml. shapes; namespace Windows10.Controls. mediaControl {public sealed partial class InkSimple: Page {// used to save a touch Point (Point ErId-Point) private Dictionary <uint, Point?> _ DicPoint; public InkSimple () {this. initializeComponent (); canvas. pointerPressed + = canvas_PointerPressed; canvas. pointerMoved + = canvas_PointerMoved; canvas. pointerReleased + = canvas_PointerReleased; canvas. pointerExited + = canvas_PointerExited; _ dicPoint = new Dictionary <uint, Point?> ();} Void canvas_PointerPressed (object sender, PointerRoutedEventArgs e) {// After the pointer is pressed, save this touch point PointerPoint pointerPoint = e. getCurrentPoint (canvas); _ dicPoint [pointerPoint. pointerId] = pointerPoint. position;} void canvas_PointerMoved (object sender, PointerRoutedEventArgs e) {PointerPoint pointerPoint = e. getCurrentPoint (canvas); if (_ dicPoint. containsKey (pointerPoint. pointerId) & _ dicPoint [pointerPoint. pointerId]. hasValue) {Point currentPoint = pointerPoint. position; Point previousPoint = _ dicPoint [pointerPoint. pointerId]. value; // if the distance between two points exceeds 4 during pointer movement, draw a straight line between the two points to complete graffiti if (ComputeDistance (currentPoint, previousPoint)> 4) {Line line = new Line () {X1 = previousPoint. x, Y1 = previousPoint. y, X2 = currentPoint. x, Y2 = currentPoint. y, StrokeThickness = 5, Stroke = new SolidColorBrush (Colors. orange), StrokeEndLineCap = PenLineCap. round}; _ dicPoint [pointerPoint. pointerId] = currentPoint; canvas. children. add (line) ;}} void canvas_PointerReleased (object sender, PointerRoutedEventArgs e) {// Delete the PointerPoint pointerPoint = e from the dictionary after the pointer is released. getCurrentPoint (canvas); if (_ dicPoint. containsKey (pointerPoint. pointerId) _ dicPoint. remove (pointerPoint. pointerId);} void notify (object sender, PointerRoutedEventArgs e) {// pointer exit is equivalent to releasing canvas_PointerReleased (sender, e);} // clear graffiti private void btnClear_Click (object sender, routedEventArgs e) {canvas. children. clear (); _ dicPoint. clear () ;}// calculate the distance between two points (Point). private double ComputeDistance (Point point1, Point point2) {return Math. sqrt (Math. pow (point1.X-point2.X, 2) + Math. pow (point1.Y-point2.Y, 2 ));}}}


2. demonstrate basic InkCanvas knowledge
Controls/MediaControl/InkCanvasDemo1.xaml

<Page x: Class = "Windows10.Controls. MediaControl. InkCanvasDemo1" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.Controls. MediaControl "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: ignorable = "d"> <Grid Background = "Transparent"> <StackPanel Margin = "10 0 10"> <Border Background = "White" Width = "480" Height =" 320 "Margin =" 5 "HorizontalAlignment =" Left "> <! -- InkCanvas-graffiti control --> <InkCanvas Name = "inkCanvas"/> </Border> <ComboBox Name = "drawingColor" Header = "Color" SelectedIndex = "0" SelectionChanged =" updatedefadradrawingattributes_handler "Margin =" 5 "> <x: string> Red </x: String> <x: String> Green </x: String> <x: String> Blue </x: string> </ComboBox> <Slider Name = "drawingSize" Foreground = "Orange" Background = "Red" Style = "{StaticResource MySliderStyle}" Header = "Size" Minimum = "1 "Maximum =" 20 "Value =" 5 "ValueChanged =" comment "Margin =" 5 "/> <CheckBox Name =" drawingdraw.ighlighter "Content =" draw.ighlighter "IsChecked =" False" checked = "success" Unchecked = "success" Margin = "5"/> <CheckBox Name = "drawingFitToCurve" Content = "FitToCurve" IsChecked = "True" Checked = "success" Unchecked = "updatedefadradrawingattributes_handler" Margin = "5"/> <ToggleSwitch Name = "drawingPenTip" Style = "{StaticResource MyToggleSwitchStyle}" OnContent = "PenTipShape. circle "OffContent =" PenTipShape. rectangle "IsOn =" True "Toggled =" updatedefadradrawingattributes_handler "Margin =" 5 "/> <CheckBox Name =" drawingPenTipTransform "Content =" PenTipTransform converts PenTip to customize pen tip shapes "IsChecked =" False "Checked =" updatedefadradrawingattributes_handler "Unchecked =" writable "Margin =" 5 "/> <CheckBox Name =" chkErasing "Content =" specify the input as the erasure mode" isChecked = "False" Checked = "success" Unchecked = "success" Margin = "5"/> <CheckBox Name = "chkIsInputEnabled" Content = "IsInputEnabled" IsChecked = "True" Checked = "success" Unchecked = "updatedefadefadrawingattributes_handler" Margin = "5"/> <Button Name = "buttonClear" Content = "Clear all" Click = "buttonClear_Click"/> </StackPanel> </Grid> </Page>

Controls/MediaControl/InkCanvasDemo1.xaml. cs

/** InkCanvas-graffiti control (inherited from FrameworkElement, see/Controls/BaseControl/FrameworkElementDemo /) * InkPresenter-get the InkPresenter object ** InkPresenter-graffiti Board * IsInputEnabled-enable graffiti Board * InputDeviceTypes-type of the input device (None, Touch, Pen, Mouse) * InputProcessingConfiguration. mode-input Mode (None, Inking, Erasing) * copydefadradrawingattributes ()-Get the InkDrawingAttributes object * updatedefadradrawingattributes (InkDra WingAttributes value)-set the InkDrawingAttributes object ** InkDrawingAttributes-graffiti pen tip attribute * IgnorePressure-whether to ignore touch pressure * Color-pen tip Color * Size-pen tip Size (width and height) * draw.ighlighter-overwrite the previous graffiti (false-overwrite directly; true-highlight the Covered Area) * FitToCurve-graffiti (true-generate graffiti using the besell curve; false-generate graffiti using a straight line) * PenTip-pen tip shape (Circle, Rectangle) * PenTipTransform-Matrix3x2 affined conversion matrix for converting PenTip (Matrix3x2 provides some easy methods: CreateRotation, createScal E, CreateSkew, CreateTranslation, etc ). You can use it to customize the pen tip shape */using System. numerics; using Windows. foundation; using Windows. UI; using Windows. UI. core; using Windows. UI. input. inking; using Windows. UI. xaml; using Windows. UI. xaml. controls; namespace Windows10.Controls. mediaControl {public sealed partial class InkCanvasDemo1: Page {private InkPresenter _ inkPresenter; public InkCanvasDemo1 () {this. initializeComponent (); _ inkPresenter = inkCanvas. inkPr Esenter; _ inkPresenter. inputDeviceTypes = CoreInputDeviceTypes. mouse | CoreInputDeviceTypes. pen | CoreInputDeviceTypes. touch; invoke ();} private void initialize (object sender, RoutedEventArgs e) {updatedefadradrawingattributes ();} private void buttonClear_Click (object sender, RoutedEventArgs e) {_ inkPresenter. strokeContainer. clear ();} privat E void updatedefadradrawingattributes () {if (_ inkPresenter! = Null) {InkDrawingAttributes drawingAttributes = _ inkPresenter. copyDefaultDrawingAttributes (); drawingAttributes. ignorePressure = true; switch (drawingColor. selectedValue. toString () {case "Red": drawingAttributes. color = Colors. red; break; case "Green": drawingAttributes. color = Colors. green; break; case "Blue": drawingAttributes. color = Colors. blue; break;} drawingAttributes. size = new Size (d RawingSize. Value, drawingSize. Value); drawingAttributes? PenTipShape. circle: PenTipShape. rectangle; if (drawingPenTipTransform. isChecked = true) drawingAttributes. penTipTransform = Matrix3x2. createSkew (4, 4); else drawingAttributes. penTipTransform = Matrix3x2. identity; _ inkPresenter. updatedefadradrawingattributes (drawingAttributes); if (chkErasing. isChecked = true) _ inkPresenter. inputProcessingConfiguration. mode = InkInputProcessingMode. erasing; else _ inkPresenter. inputProcessingConfiguration. mode = InkInputProcessingMode. inking; _ inkPresenter. isInputEnabled = chkIsInputEnabled. isChecked. value ;}}}}



OK
[Download source code]

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.