WPF effects-Puzzle games

Original: WPF effects-Puzzle games

This article mainly describes the convenient process for me to achieve fragmentation.

Step 1:

?? Select the reference image as follows (Baidu Image Library search):

Step 2:

In order to make it easier to see the effect, you can set the control point to record the final coordinates in a way that is displayed on the Console.WriteLine or direct UI, such as:

?

In the red line, for two Bezier curves, the left side of the position I have been adjusted by the way control points. GIF adjusts for me the second Bezier signal above.

Step 3:

? When the second Bezier curve on the right side of the top is also adjusted, it is equivalent to adjusting all four edges.

? The exact principle is that the top line is rotated 90 degrees counterclockwise around the rightmost vertex to get the right line. The line on the right is rotated 90 degrees counterclockwise at the bottom point, which is the line below. The left line is also obtained by rotating the line below. The only thing that needs to be done is to pump a point around the center point counterclockwise 90 degrees to get the new point function.

 <canvas width= "448" height= "448" horizontalalignment= "left" verticalalignment= "Top" margin= "x": Name= "CVMAINZM" background= "Transparent" > <path stroke= "Red" strokethickness= "1" fill= "Blue" X:name= " Path1zm "> <Path.Data> <PathGeometry> & Lt Pathgeometry.figures> <PathFigureCollection> &L T                                            PathFigure startpoint= "," > <PathFigure.Segments> <PathSegmentCollection> <beziersegment X:na Me= "BEZIER1ZM" point1= "286" point2= "[] 176" point3= "224 192"/> <be                                                Ziersegment x:name= "Bezier2zm" point1= "352 176" point2= "162" point3= "352"/> <bezieRsegment x:name= "Bezier3zm" point3= "448 224"/> <beziersegment x:name= "Bezier4zm" point3= "352 352"/> <beziersegment x:name= "Bezier5zm" Poin                                                 t3= "224 266"/> <beziersegment x:name= "Bezier6zm" point3= "all 352"/>                                                <beziersegment x:name= "Bezier7zm" point3= "0 224"/>                                            <beziersegment x:name= "Bezier8zm" point3= "/>                                    </PathSegmentCollection> </PathFigure.Segments>                            </PathFigure> </PathFigureCollection>                </PathGeometry.Figures> </PathGeometry> </Path.Data> </path> </Canvas>

As in my example code, I get the value of the two Bézier lines of the upper line through step 1 and write directly to XAML. (Note: I have given an example of step one in advance, giving the end point of each Bézier, i.e. 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"/>

Rotate to set the right line operation:

  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);}

Below and left, etc. In this way, all the Bezier can be obtained by the rotation calculation of the background point rotation. The implementation effect is as follows.

Step 4:

By combining the path obtained in step 3 with the RectangleGeometry, the clip property is set to different fragments to get all the fragments used, as follows:

During the combination, the clip of some fragments can be directly flipped through the clip of other fragments, or clockwise, counterclockwise rotation. Such as:

? <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>

Step 5:

You can get all the slices by setting the fixed mode of the matrix fragment style in advance, or you can randomly generate each fragment, and the shape of each slice is obtained by retrieving whether the left-to-right side is concave or convex or not. My fragmentation effect is like.

WPF effects-Puzzle games