WPF特效-拼图游戏

简介: 原文:WPF特效-拼图游戏 此文主要描述我实现碎片化的便捷过程。步骤1:   选取参考图如下(百度图库搜的):步骤2:   根据效果图或者模型构建贝塞尔曲线,为了方便查看效果,可以设置控制点,Console.WriteLine或直接UI上显示的方式记录最终坐标,效果图如:  上图中的红线,为两条贝塞尔曲线,左侧的位置我已经通过控制点的方式调好。
原文: WPF特效-拼图游戏

此文主要描述我实现碎片化的便捷过程。

步骤1:

   选取参考图如下(百度图库搜的):


步骤2

   根据效果图或者模型构建贝塞尔曲线,为了方便查看效果,可以设置控制点,Console.WriteLine或直接UI上显示的方式记录最终坐标,效果图如:

 

 上图中的红线,为两条贝塞尔曲线,左侧的位置我已经通过控制点的方式调好。 上图Gif为我调整上方第二条贝塞尔的示意。

步骤3:

 当上方右侧的第二条贝塞尔曲线也调整好后,就已经相当于调整好了所有的四条边。

  具体原理为:最上方的一条线绕着最右边的顶点逆时针旋转90度即可得到右侧的线。右侧的线以最下方的点逆时针旋转90度就是下方的线。左侧的线也通过旋转下方的线得到。唯一需要做的就是抽一个某个点围绕中心点逆时针旋转90度后得到新点的函数。

 <Canvas Width="448" Height="448" HorizontalAlignment="Left" VerticalAlignment="Top"
                    Margin="160" x:Name="CvMainZm" Background="Transparent">
                <Path Stroke="Red" StrokeThickness="1" Fill="Blue" x:Name="Path1Zm">
                    <Path.Data>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigureCollection>
                                    <PathFigure StartPoint="96, 96">
                                        <PathFigure.Segments>
                                            <PathSegmentCollection>
                                                <BezierSegment x:Name="Bezier1Zm" Point1="286 62" Point2="96 176" Point3="224 192"/>
                                                <BezierSegment x:Name="Bezier2Zm" Point1="352 176" Point2="162 62" Point3="352 96"/>
                                                <BezierSegment x:Name="Bezier3Zm" Point3="448 224"/>
                                                <BezierSegment x:Name="Bezier4Zm" Point3="352 352"/>
                                                <BezierSegment x:Name="Bezier5Zm" Point3="224 266"/>
                                                <BezierSegment x:Name="Bezier6Zm" Point3="96 352"/>
                                                <BezierSegment x:Name="Bezier7Zm" Point3="0 224"/>
                                                <BezierSegment x:Name="Bezier8Zm" Point3="96 96"/>
                                            </PathSegmentCollection>
                                        </PathFigure.Segments>
                                    </PathFigure>
                                </PathFigureCollection>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </Path.Data>
                </Path>
            </Canvas>
如我的示例代码,我通过步骤1得到了 上方线的两条Bezier线的值,直接写入xaml中。(注:我提前根据步骤一的示例图,给出了每条Bezier的终点,即Point3)
   <BezierSegment x:Name="Bezier1Zm" Point1="286 62" Point2="96 176" Point3="224 192"/>
   <BezierSegment x:Name="Bezier2Zm" Point1="352 176" Point2="162 62" Point3="352 96"/>

旋转设置右侧线操作:

   private void SetRightFirstBezier()
        {
            Point oPoint1 = this.Bezier2Zm.Point1;
            Point oPoint2 = this.Bezier2Zm.Point2;
            Point oOrigin = this.Bezier2Zm.Point3;

            Point oNew = this.CarouselPointAnticlockwise(oPoint1, oOrigin);
            Point oNew2 = this.CarouselPointAnticlockwise(oPoint2, oOrigin);

            this.Bezier3Zm.Point1 = oNew2;
            this.Bezier3Zm.Point2 = oNew;
        }

        private void SetRightSecondBezier()
        {
            Point oPoint1 = this.Bezier1Zm.Point1;
            Point oPoint2 = this.Bezier1Zm.Point2;
            Point oOrigin = this.Bezier2Zm.Point3;

            Point oNew = this.CarouselPointAnticlockwise(oPoint1, oOrigin);
            Point oNew2 = this.CarouselPointAnticlockwise(oPoint2, oOrigin);

            this.Bezier4Zm.Point1 = oNew2;
            this.Bezier4Zm.Point2 = oNew;
}
// 绕顶点旋转得到新点坐标
private Point CarouselPointAnticlockwise(Point oPoint, Point oOrigin)
{
    double dY = oOrigin.Y - oPoint.Y;
    double dX = oOrigin.X - oPoint.X;


    double dXAdd = dX - dY;
    double dYAdd = dX + dY;


    double dNewX = oPoint.X + dXAdd;
    double dNewY = oPoint.Y + dYAdd;
    return new Point(dNewX, dNewY);
}
下方和左方以此类推。 这样通过后台点旋转的旋转计算处理就可得到所有的Bezier。实现效果如下图。


步骤4:

通过步骤3得到的Path与RectangleGeometry进行组合,设置成不同碎片的Clip属性即可得到所有用到的碎片,效果图如下:



组合过程中,部分碎片的Clip可通过其他碎片的Clip直接翻转或者顺时针、逆时针旋转直接得到。如:

 <CombinedGeometry x:Key="KeyPieceType4" 
                          Geometry1="{StaticResource KeyPieceType1}">
            <CombinedGeometry.Transform>
                <TransformGroup>
                    <ScaleTransform ScaleX="-1" CenterX="224" ScaleY="-1" CenterY="224" />
                    <RotateTransform Angle="-90" CenterX="224" CenterY="224"/>
                </TransformGroup>
            </CombinedGeometry.Transform>

        </CombinedGeometry>

步骤5:

可以通过提前设定矩阵碎片样式的固定模式得到所有切图,也可以随机生成每个碎片,每个片的形状通过检索左侧右边是否凹凸和上侧碎片下边是否凹凸获得。我的碎片化效果如下图。


目录
相关文章
|
C# Windows
WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效
原文:WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效 不管在消费者的心中腾讯是一个怎么样的模仿者抄袭者的形象,但是腾讯在软件交互上的设计一直是一流的.正如某位已故的知名产品经理所说的:设计并非外观怎样,感觉如何.
1217 0
|
C#
WPF特效-实现3D足球效果
原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果,效果图如下:  每个面加载不同贴图。                                                          ...
863 0
|
算法 C# 容器
WPF特效-实现弧形旋转轮播图
原文:WPF特效-实现弧形旋转轮播图        项目遇到,琢磨并实现了循环算法,主要处理循环替换显示问题       (如:12张图组成一个圆弧,但总共有120张图需要呈现,如何在滑动中进行显示块的替换,并毫无卡顿)        处理的自己感觉比较满意,记录一下。
2050 0
|
C#
WPF特效-鱼游动动画2
原文:WPF特效-鱼游动动画2           纯代码撸动画实践2:           原图:(png格式)                                                添加Effect以及Effect动画处理后Gif效果:                                     处理: 眼部放大缩小动画; 嘴缩放动画; 尾部收缩动画;  颜色变化效果动画。
1021 0
|
C# 图形学
WPF特效-鱼游动动画
原文:WPF特效-鱼游动动画   实现思路:           通过VisualBrush Binding方式获取鱼局部图像,在Viewport3D中创建ModelVisual3D块并把获取到的局部图通过VisualBrush Binding方式赋值。
934 0
|
C# C++ 图形学
WPF特效-鱼游动动画3
原文:WPF特效-鱼游动动画3 WPF不支持骨骼,故使用3DMax导出了序列模型文件(.mtl;.obj)。 方法1: 使用Blend 2013打开所有obj文件,拖动排列一下即可在usercontrol中显示,使用RenderTargetBitmap生成png的序列图,使用Timer播放序列图即可。
1074 0
|
算法 C#
WPF特效-绘图
原文:WPF特效-绘图                  WPF玩起来还是挺炫酷的。我实现的效果:不同色块交叉,交叉部分颜色叠加显示。
1222 0
|
C#
WPF特效-粒子动画
原文:WPF特效-粒子动画 WPF实现泡泡龙小游戏效果。     /// -Ball to Ball Collision - Detection and Handling    /// http://stackoverflow.
1424 0
|
C# C++ 计算机视觉
WPF特效-绘制实时2D激光雷达图
原文:WPF特效-绘制实时2D激光雷达图 接前两篇: https://blog.csdn.net/u013224722/article/details/80738619 https://blog.csdn.net/u013224722/article/details/80738995 除了c# GDI 、Opencv(c++)、 c# Emgu绘图外,其实c#  WPF绘图功能也很强大。
1835 0
|
C# 前端开发
WPF编游戏系列 之二 图标效果
原文:WPF编游戏系列 之二 图标效果        本篇将要实现图标的两个效果:1. 显示图标标签,2. 图标模糊效果。在上一篇中提到Image没有HTML 的Title属性(在MSDN中也没找到类似的属性),所以本篇将自行制作一个标签,它的功能是当鼠标移动到图标上方时会显示该图标的Tag说明,并且该图标模糊显示,如下图对比所示。
731 0