原文: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. HDU4268 Alice and Bob 【贪心】

    Alice and Bob Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  2. Lucene学习总结之八:Lucene的查询语法,JavaCC及QueryParser 2014-06-25 14:25 722人阅读 评论(1) 收藏

    一.Lucene的查询语法 Lucene所支持的查询语法可见http://lucene.apache.org/java/3_0_1/queryparsersyntax.html (1) 语法关键字 + ...

  3. jquery-9 京东和酒仙网左侧导航如何实现

    jquery-9 京东和酒仙网左侧导航如何实现 一.总结 一句话总结:布局的话多用定位,由底往上一层层的来布. 1.如何实现导航向div的平滑滑动? 右侧div和左侧的li一定要放在一起 127 &l ...

  4. 【机器学习实战】第3章 决策树(Decision Tree)

    第3章 决策树 <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/ ...

  5. vue相关网站资源收集

    因为接了一个使用VUE + ES6 + Webpack的项目,所以在工作之余,也加紧了对这些知识的学习,这里放上遇到的觉得不错的网站链接: 1 vue官网 https://cn.vuejs.org 2 ...

  6. HPE Comware Lab - Simulator

    http://h20565.www2.hpe.com/hpsc/swd/public/readIndex?sp4ts.oid=7107838&ac.admitted=1405352934644 ...

  7. SQLite单表4亿订单,大数据测试

    [转载] SQLite单表4亿订单,大数据测试 http://www.cnblogs.com/nnhy/p/BigData.html

  8. javax.servlet.WriteListener

    http://www.programcreek.com/java-api-examples/index.php?api=javax.servlet.WriteListener

  9. python3 numpy基本用法归纳总结

    安装numpy : pip install numpy numpy数组生成方法总结 In [4]: import numpy as np #使用列表生成一个一维数组 data = [1,2,3,4,5 ...

  10. php课程 6-22 字符串格式化函数有哪些(精问)

    php课程 6-22 字符串格式化函数有哪些(精问) 一.总结 一句话总结: 1.猜测一下$_GET()怎么来的? 函数赋值给变量的操作:$_YZM=get();   这样就可以很好的解释哪些全局变量 ...