WPF特效-绘图
原文: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特效-绘图的更多相关文章
- WPF特效-绘制实时2D激光雷达图
原文:WPF特效-绘制实时2D激光雷达图 接前两篇: https://blog.csdn.net/u013224722/article/details/80738619 https://blog.cs ...
- WPF 在绘图控件(Shape)中添加文字 [2018.7.15]
原文:WPF 在绘图控件(Shape)中添加文字 [2018.7.15] Q:使用Shape的子类Ellipse画一个圆,如何在圆中添加文字? A:Shape类中不包含Text属性.可使用Shape类 ...
- WPF特效-实现弧形旋转轮播图
原文:WPF特效-实现弧形旋转轮播图 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/77004 ...
- WPF特效-拼图游戏
原文:WPF特效-拼图游戏 此文主要描述我实现碎片化的便捷过程. 步骤1: 选取参考图如下(百度图库搜的): 步骤2: 根据效果图或者模型构建贝塞尔曲线,为了方便查看效果,可以设置控制点, ...
- WPF特效-粒子动画
原文:WPF特效-粒子动画 WPF实现泡泡龙小游戏效果. /// -Ball to Ball Collision - Detection and Handling /// http:// ...
- WPF特效-鱼游动动画3
原文:WPF特效-鱼游动动画3 WPF不支持骨骼,故使用3DMax导出了序列模型文件(.mtl;.obj). 方法1: 使用Blend 2013打开所有obj文件,拖动排列一下即可在usercontr ...
- WPF特效-鱼游动动画
原文:WPF特效-鱼游动动画 实现思路: 通过VisualBrush Binding方式获取鱼局部图像,在Viewport3D中创建ModelVisual3D块并把获取到的局部 ...
- WPF特效-鱼游动动画2
原文:WPF特效-鱼游动动画2 纯代码撸动画实践2: 原图:(png格式) ...
- WPF特效-实现3D足球效果
原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果,效果图如下: 每个面加载不同贴图. <UserControl x:Class="MediaBalll.Model3Ds ...
随机推荐
- 学习Numpy
1.什么是numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多( ...
- [Compose] 11. Use Task for Asynchronous Actions
We refactor a standard node callback style workflow into a composed task-based workflow. For example ...
- 利用Powershell获取公司内部机器的资源信息,作为企业兴许资产管理的基本途径!
今天一个哥们问我是否用Powershell 实现.我好久没有写脚本,脚本的协作和调试还是费了一些时间,兴许调试了下.运作没有问题,大家能够參考以下的脚本来丰富您企业须要做的一些事情,脚本代码例如以下: ...
- 最新国内外可用SVN托管仓库有哪些
最新国内外可用SVN托管仓库哪些 一.总结 一句话总结:用SVNBucket和SourceForge 二.最新国内外可用SVN托管仓库推荐 这几年很多SVN托管平台都基本不维护或者直接关闭了,我翻遍了 ...
- JavaStuNote 4
装箱(inbox)和拆箱(outbox) 代表了类类型和基本类型之间的转换行为. 手动版本号: Integer b = new Integer(10); Int a = b.intValue; 自己主 ...
- 【u225】最优分解方案
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 经过第一轮的游戏,不少同学将会获得圣诞特别礼物,但这时细心的数学课代表发现了一个问题: 留下来的人太多 ...
- redis持久化,主从及数据备份
http://blog.csdn.net/lang_man_xing/article/details/38386113 现在在项目里已经大量使用redis了,为了提高redis的性能和可靠性我们需要知 ...
- SQL SERVER CHARINDEX功能
CHARINDEX功能经常用于通过在字符或字符串中的字符范围搜索. 假定被搜索的字符包括字符搜索,然后该函数返回一个非零整数,的字符在被搜索的字符中的開始位数.即CHARINDEX函数返回字符或者字符 ...
- Leetcode--easy系列1
近期開始刷Leetcode题目.花了一个星期先完毕了easy难度级别的题目,easy级别的题目思路比較简单,但不一定就直接AC了,主要是问题要考虑全然.特别是对特殊情况的处理. #6 ZigZag C ...
- 你的服务器没有正确响应Token验证的解决方法
你的服务器没有正确响应Token验证,请阅读消息接口使用指南 微信 微信公众平台开发模式 平台 消息 接口 启用 URL Token作者:http://txw1958.cnblogs.com/ 原文: ...