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>