WPF特效-绘图

Posted 2020-12-29 lonelyxmas

原文: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>