原文:WPF特效-绘图

 

 

    

 

      WPF玩起来还是挺炫酷的。我实现的效果:不同色块交叉,交叉部分颜色叠加显示。(叠加部分暂时用随机颜色代替)。单独色块点击弹出以色块颜色为主的附属面板。踩了一些坑,从简单一步步完善。

      判断是否交叉,并创建交叉区域的算法比较费事。

      完整过程代码较复杂,算法也从初始简单到复杂再到简单。

      交汇区域:  主要使用Path绘制,根据色块获取交汇区域的Intersect geometry获得。  

      判断交叉:实现了可判断任意多个色块交叉,并绘制出所有叠加区域的算法,但是色块越多,判断过程越占用资源。造成程序卡顿。最终修改为最多三个色块可进行叠加组合。

      算法描述起来比较复杂,可复用性不高,就不费文字阐述了。

      最后一个模块比较有趣,仅用简单的Ellipse, Rectangle,Line等教简单的Shape即可随意绘制出炫酷的UI效果,部分源码如下:

 <Ellipse x:Name="EllipseLoadZm" Stroke="{Binding Path=Brush}" StrokeThickness="60" Margin="-98"
StrokeDashArray="0.4 0.12" StrokeDashCap="Flat"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="#33FFFFFF" Offset="0.466"/>
<GradientStop Color="#FFFBFBFB" Offset="0.871"/>
<GradientStop Color="Transparent" Offset="1"/>
<GradientStop Color="#4EFFFFFF" Offset="0.778"/>
<GradientStop Color="#FFF1EDED" Offset="0.281"/>
<GradientStop Color="#19FFFFFF" Offset="0.003"/>
</RadialGradientBrush>
</Ellipse.OpacityMask>
</Ellipse> <Grid Margin="-818,-99,0,-99" HorizontalAlignment="Left"
Width="927" RenderTransformOrigin="1,0.5">
<Path HorizontalAlignment="Right"
Data="{StaticResource KeyPathDataColorDescript}">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
<GradientStop Color="{Binding Path=Fill}"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Line Y2="418" StrokeThickness="25" StrokeDashArray="1 0.2">
<Line.Stroke>
<LinearGradientBrush EndPoint="0.5,1.2" StartPoint="0.5,0">
<GradientStop Color="{Binding Path=Fill}" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Line.Stroke>
</Line>
<Canvas Margin="21,0,206,0" >
<Canvas.Background>
<SolidColorBrush Color="{Binding Path=Fill}" Opacity="0.3"/>
</Canvas.Background>
</Canvas>
</Grid>
  <CombinedGeometry x:Key="KeyPathDataColorDescript" GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Intersect">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="0,0,200,418">
<RectangleGeometry.Transform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="18"/>
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</RectangleGeometry.Transform>
</RectangleGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry Rect="0,0,200,418">
<RectangleGeometry.Transform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="-18"/>
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</RectangleGeometry.Transform>
</RectangleGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="145" RadiusY="145"
Center="195,209"/>
</CombinedGeometry.Geometry2>
</CombinedGeometry>

WPF特效-绘图的更多相关文章

  1. WPF特效-绘制实时2D激光雷达图

    原文:WPF特效-绘制实时2D激光雷达图 接前两篇: https://blog.csdn.net/u013224722/article/details/80738619 https://blog.cs ...

  2. WPF 在绘图控件(Shape)中添加文字 [2018.7.15]

    原文:WPF 在绘图控件(Shape)中添加文字 [2018.7.15] Q:使用Shape的子类Ellipse画一个圆,如何在圆中添加文字? A:Shape类中不包含Text属性.可使用Shape类 ...

  3. WPF特效-实现弧形旋转轮播图

    原文:WPF特效-实现弧形旋转轮播图 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/77004 ...

  4. WPF特效-拼图游戏

    原文:WPF特效-拼图游戏 此文主要描述我实现碎片化的便捷过程. 步骤1:    选取参考图如下(百度图库搜的): 步骤2:    根据效果图或者模型构建贝塞尔曲线,为了方便查看效果,可以设置控制点, ...

  5. WPF特效-粒子动画

    原文:WPF特效-粒子动画 WPF实现泡泡龙小游戏效果.     /// -Ball to Ball Collision - Detection and Handling    /// http:// ...

  6. WPF特效-鱼游动动画3

    原文:WPF特效-鱼游动动画3 WPF不支持骨骼,故使用3DMax导出了序列模型文件(.mtl;.obj). 方法1: 使用Blend 2013打开所有obj文件,拖动排列一下即可在usercontr ...

  7. WPF特效-鱼游动动画

    原文:WPF特效-鱼游动动画   实现思路:           通过VisualBrush Binding方式获取鱼局部图像,在Viewport3D中创建ModelVisual3D块并把获取到的局部 ...

  8. WPF特效-鱼游动动画2

    原文:WPF特效-鱼游动动画2           纯代码撸动画实践2:           原图:(png格式)                                            ...

  9. WPF特效-实现3D足球效果

    原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果,效果图如下:  每个面加载不同贴图. <UserControl x:Class="MediaBalll.Model3Ds ...

随机推荐

  1. 学习Numpy

    1.什么是numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多( ...

  2. [Compose] 11. Use Task for Asynchronous Actions

    We refactor a standard node callback style workflow into a composed task-based workflow. For example ...

  3. 利用Powershell获取公司内部机器的资源信息,作为企业兴许资产管理的基本途径!

    今天一个哥们问我是否用Powershell 实现.我好久没有写脚本,脚本的协作和调试还是费了一些时间,兴许调试了下.运作没有问题,大家能够參考以下的脚本来丰富您企业须要做的一些事情,脚本代码例如以下: ...

  4. 最新国内外可用SVN托管仓库有哪些

    最新国内外可用SVN托管仓库哪些 一.总结 一句话总结:用SVNBucket和SourceForge 二.最新国内外可用SVN托管仓库推荐 这几年很多SVN托管平台都基本不维护或者直接关闭了,我翻遍了 ...

  5. JavaStuNote 4

    装箱(inbox)和拆箱(outbox) 代表了类类型和基本类型之间的转换行为. 手动版本号: Integer b = new Integer(10); Int a = b.intValue; 自己主 ...

  6. 【u225】最优分解方案

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 经过第一轮的游戏,不少同学将会获得圣诞特别礼物,但这时细心的数学课代表发现了一个问题: 留下来的人太多 ...

  7. redis持久化,主从及数据备份

    http://blog.csdn.net/lang_man_xing/article/details/38386113 现在在项目里已经大量使用redis了,为了提高redis的性能和可靠性我们需要知 ...

  8. SQL SERVER CHARINDEX功能

    CHARINDEX功能经常用于通过在字符或字符串中的字符范围搜索. 假定被搜索的字符包括字符搜索,然后该函数返回一个非零整数,的字符在被搜索的字符中的開始位数.即CHARINDEX函数返回字符或者字符 ...

  9. Leetcode--easy系列1

    近期開始刷Leetcode题目.花了一个星期先完毕了easy难度级别的题目,easy级别的题目思路比較简单,但不一定就直接AC了,主要是问题要考虑全然.特别是对特殊情况的处理. #6 ZigZag C ...

  10. 你的服务器没有正确响应Token验证的解决方法

    你的服务器没有正确响应Token验证,请阅读消息接口使用指南 微信 微信公众平台开发模式 平台 消息 接口 启用 URL Token作者:http://txw1958.cnblogs.com/ 原文: ...