UWP 图片剪切翻转工具

好久没撸随笔了，明天终于放假休息了。。准备去进行信仰充值，看《魔兽》去（话说surface phone 好久出，让我这个做UWP的也充点信仰。。）

先上下效果图：

在设计中，遇到一个问题，就是如果添加了剪切蒙版之后会挡住后面的ScrollViewer里面的Image，一些事件将无法监听。

后面想了个办法，把ScrollViewer的模板给修改了。

开源有益，先上代码

下面是Theme

<Style x:Key="ImageToolScrollViewerStyle" TargetType="ScrollViewer">
        <Setter Property="HorizontalScrollMode" Value="Enabled"/>
        <Setter Property="VerticalScrollMode" Value="Enabled"/>
        <!--<Setter Property="IsHorizontalRailEnabled" Value="False"/>
        <Setter Property="IsVerticalRailEnabled" Value="False"/>-->
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="ZoomMode" Value="Enabled"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ScrollingIndicatorStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="MouseIndicator" To="NoIndicator">
                                        <Storyboard>
                                            <FadeOutThemeAnimation BeginTime="0:0:3" TargetName="ScrollBarSeparator"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="TouchIndicator" To="NoIndicator">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="NoIndicator">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="TouchIndicator">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseIndicator">
                                    <Storyboard>
                                        <FadeInThemeAnimation TargetName="ScrollBarSeparator"/>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan="2"/>
                            <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                            <ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                            <Border x:Name="ScrollBarSeparator" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" Grid.Column="1" Grid.Row="1"/>
                            <Canvas x:Name="CropSelectionCanvas"  Grid.ColumnSpan="2" Visibility="{Binding CropSelectionVisibility}">
                                <Path x:Name="nonselectRegion" Fill="#88FFFFFF"  >
                                    <Path.Data>
                                        <GeometryGroup>
                                            <RectangleGeometry Rect="{Binding OuterRect}">
                                            </RectangleGeometry>
                                            <RectangleGeometry Rect="{Binding SelectedRect}">
                                            </RectangleGeometry>
                                        </GeometryGroup>
                                    </Path.Data>
                                </Path>
                                <Path x:Name="selectRegion" Fill="Transparent" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="1">
                                    <Path.Data>
                                        <RectangleGeometry Rect="{Binding SelectedRect}"/>
                                    </Path.Data>
                                </Path>
                                <Rectangle x:Name="horizontalLine" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLineCanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
                                <Rectangle x:Name="verticalLine" Canvas.Left="{Binding VerticalLineCanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
                                <Rectangle x:Name="horizontalLine1" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLine1CanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
                                <Rectangle x:Name="verticalLine1" Canvas.Left="{Binding VerticalLine1CanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
                            </Canvas>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:ImageTool">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:ImageTool">
                    <Grid >
                        <Grid.Resources>
                            <Style TargetType="Ellipse">
                                <Setter Property="Height" Value="30"/>
                                <Setter Property="Width" Value="30"/>
                                <Setter Property="Fill" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
                                <Setter Property="Stroke" Value="{ThemeResource ApplicationForegroundThemeBrush}"/>
                                <Setter Property="StrokeThickness" Value="1"/>
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <CompositeTransform TranslateX="-15" TranslateY="-15" />
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Grid.Resources>
                        <Image x:Name="sourceImage"  Visibility="Visible" Opacity="0"/>
                        <Canvas x:Name="imageCanvas"  HorizontalAlignment="Stretch" IsHitTestVisible="{Binding CropSelectionVisibility,Converter={StaticResource InversedBooleanToVisibilityConverter}}"  VerticalAlignment="Stretch">
                            <ScrollViewer x:Name="scrollViewer" MinZoomFactor="1" MaxZoomFactor="2" Style="{StaticResource ImageToolScrollViewerStyle}">
                                <Grid x:Name="imageGrid" >
                                    <Image x:Name="editImage"  HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Grid>
                            </ScrollViewer>
                            <Ellipse x:Name="topLeftThumb"  Visibility="{Binding CropSelectionVisibility}" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding SelectedRect.Top}"/>
                            <Ellipse x:Name="topRightThumb" Visibility="{Binding CropSelectionVisibility}" Canvas.Left="{Binding SelectedRect.Right}" Canvas.Top="{Binding SelectedRect.Top}"/>
                            <Ellipse x:Name="bottomLeftThumb" Visibility="{Binding CropSelectionVisibility}"  Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding SelectedRect.Bottom}"/>
                            <Ellipse x:Name="bottomRightThumb" Visibility="{Binding CropSelectionVisibility}"  Canvas.Left="{Binding SelectedRect.Right}" Canvas.Top="{Binding SelectedRect.Bottom}"/>
                        </Canvas>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

可以看到我把蒙版加到了ScrollViewer的模板里面。这样就不会阻止一些事件了。

需要的朋友可以在这里下载代码。

有啥问题，或者更好的想法可以跟我讲，大家一起进步。

放假几天有空把另外2个控件也写了。先放图给大家see see。

VirtualizedVariableSizedGridView 主要给平板，PC写的，phone上面跟ListView一样。

DataGrid, Touch模式支持下拉刷新，行列锁定，sort等功能

时间： 2024-12-25 20:48:09

UWP 图片剪切翻转工具的相关文章

java图片裁剪处理工具类代码

剪切前:  原文:java图片裁剪处理工具类代码 源代码下载地址:http://www.zuidaima.com/share/1550463351786496.htm 剪切后:  package com.zuidaima.zhangjun.image; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import

图片上传，图片剪切jquery.imgareaselect

---恢复内容开始--- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&q

CSS3之图片3D翻转效果(网页效果--每日一更)

今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:http://localhost:63342/webfront/PC/rotate.html 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性.这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果.详情请看代码. HTML结构: 1 <div id="content"> 2 <div

iOS开发UI篇—Quartz2D使用（图片剪切）

iOS开发UI篇-Quartz2D使用(图片剪切) 一.使用Quartz2D完成图片剪切 1.把图片显示在自定义的view中 先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: 1 - (void)drawRect:(CGRect)rect 2 { 3 UIImage *image2=[UIImage imageNamed:@"me"]; 4 [image2 drawAtPoint:CGPointMake(100, 100)]; 5 } 显示: 2.剪切图片让图片圆

图片剪切效果

第一篇博文,把今天写的一个实现图片剪切效果的JS脚本发上来 基本思路: 三层结构,第一层为透明度是0.7的图片,第二层为正常的图片,第三层使用一个DIV作为选取框,采用CSS中的绝对定位进行覆盖 HTML代码 <div id="box"> <img id="img-1" src="imgs/cat-1.jpg"/> <img id="img-2" src="imgs/cat-2.jpg&

在iOS开发的Quartz2D使用中实现图片剪切和截屏功能

原文  http://www.jb51.net/article/75671.htm 图片剪切一.使用Quartz2D完成图片剪切1.把图片显示在自定义的view中先把图片绘制到view上.按照原始大小,把图片绘制到一个点上.代码: 复制代码代码如下: - (void)drawRect:(CGRect)rect{    UIImage *image2=[UIImage imageNamed:@"me"];    [image2 drawAtPoint:CGPointMake(100, 1

tesseract-ocr图片识别开源工具

tesseract-ocr图片识别开源工具 今天看同事的ppt,提到了图片识别,又tesseract-ocr,觉得不错,试一下,如果效果好可以用来做验证码的识别 http://code.google.com/p/tesseract-ocr/ tesseract是一款开源工具,我安装了Windows版试水先 1.首先登录首页在‘下载’页面下载 Java代码   tesseract-ocr-setup-xx.xx.exe chi_sim.traineddata.gz   中文语言包 2.双击即可安装

css3图片3D翻转效果

点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src="images/img_01.jpg" alt=""> </div> <div class="back"> <img src="images/img_03.jpg" alt="&quo

PHP 图片上传工具类（支持多文件上传）

====================ImageUploadTool======================== <?php class ImageUploadTool { private $file; //文件信息 private $fileList; //文件列表 private $inputName; //标签名称 private $uploadPath; //上传路径 private $fileMaxSize; //最大尺寸 private $uploadFiles; //上传文件