Show a little, free crop in 3D-interface library for cooperation!

First look at the figure (the background is the desktop, and the head of the 3D tiger is beheaded by Wu Song ):

 

The crop shape can be freely defined. The XML definition of the crop path is saved for the moment, saving you the trouble to remember:

Clip: m (. 2 ,#. 2) B (0 ,. 2 )(. 2, 0 )(. 5 ,. 2) B (#. 2 ,. 2) (#0 ,#. 2 )(#. 2 ,#. 2) B (#. 2, #0 )(. 2, #0 )(. 2 ,#. 2 );

 

The rule of the crop path series is as follows: a path contains a series of operations. The format of each operation is as follows:

OPERATOR [position1 [position2 position3]

Operator indicates the operator, which can be a single letter:

• M indicates moveTo. A location parameter must be included.
• L indicates lineto, which must contain a location parameter
• B Indicates bezierto. Three location parameters must be included.
• C indicates that the path is disabled without the location parameter.

 

Position indicates the position parameter, which is a two-dimensional coordinate, used to indicate the position in the x/y direction. Two values are a group, for example, 12, 5 represents a position.

The value of the positional parameter is not an absolute coordinate, but a relative value. The default relative offset reference point is the upper left corner of the area. However, you can add a # symbol before the number to change the reference point to the opposite direction. For example, 2 and 3 represent the coordinates relative to the upper left corner, #2 and 2 represent the coordinates relative to the upper right corner, #3 represent the coordinates relative to the lower left corner, #2, #3 represent the coordinates relative to the lower right corner.

In addition to being an integer, percentages can also be used to represent the ratio of the width and length of the region. For example, 2, 50% indicates the offset relative to the upper left corner, and the horizontal direction of the offset point is 2 pixels, the vertical direction is half the height. The percentage can also be expressed as a floating point number. For example, 2, 50%, and 2, 0.5 are the same effect.

 

In addition to path-based free cropping, a fixed cropping scheme is built in. The entire window in the figure is a rounded rectangle. You can specify clip: roundrect in short form to define the rounded rectangle, the radius of the rounded corner is 10 pixels by default. If a new radius is specified, for example, the radius is 20, it is written as clip: roundrect 20.

 

It is really difficult to make general-purpose free crop in 3D.

 

=============================== The legendary separation line ====================== ===

 

Coverflow

The most original version is the XML description. The image in the photo frame comes from the 2D control, and there is an image in the middle or a GIF animation. Ugly pictures + ugly mirrors.

TV wall effect:

 

Coverflow improves the mirror reflection effect. This is a transparent window.

 

You have implemented a mouse click switching animation.

 

The scenario may contain Flash Animation:

 

The scenario may contain a video player:

 

 

=============================== The legendary separation line ====================== ===

 

Cooperation notice:

Due to time and energy constraints, I am unable to do anything other than technology. I hope to find partners with certain strength and Standard Stability (without personal discussion) and develop the UI library together, or develop desktop/Internet applications based on this library.

Please send an email to yuhanstudio@gmail.com