Customize titlewindow-max. Min button-Drag and Drop Scaling

Source: Internet
Author: User

We will explain in two steps
1. How to add custom buttons and how to make them work
2. How to drag and zoom, and how to define the mouse cursor
First, we need to generate these buttons, which is not difficult. Take the close button as an example:
Private var btnclose: button;
[Embed ("/assets/images/buttonclose.png")] private var iconclose: Class; // load the picture of the close button

Then we will override the createchildren method of the component to create and close the button.
Protected override function createchildren (): void
Btnclose = new button ();
// Set the button style
Btnclose. setstyle ("upicon", iconclose );
Btnclose. setstyle ("downicon", iconclose );
Btnmax. setstyle ("upicon", iconmax );
Btnclose. setstyle ("overicon", iconclose );
// Load button
Rawchildren. addchild (btnclose );
// Listen to the close button event
Btnclose. addeventlistener (mouseevent. Click, oncloseclick );

Finally, we need to override the updatedisplaylist (unscaledwidth: Number, unscaledheight: Number) method to control the button position.
You can set the button position through the unscaledwidth and unscaledheight parameters, which are the boundaries of the component. I think it can be understood as the building width and height.
VaR thex: Int = The unscaledWidth-20;
VaR they: Int = 10
Btnclose. Move (thex, They );

OK. Now we have finished the placement button process. Similarly, it is not difficult to create personalized minimization and maximization buttons.

Next, let's talk about how to drag and drop.
First, let's take a look at how to simulate the changes of the mouse cursor when the mouse is placed on the edge of the window?
Let's take a look.
The red part is the sensing area, and the four-corner green block is the sensing area that scales the height and width at the same time.
We can provide a thickness for the sensing area, such as 5 pixels.
Let's take a look at all the cursors.
These two types are used in the green response area.
These two types are used in the red response area.
We only need to listen to the mouseevent. mouse_move event to obtain the current coordinates of the mouse. In the X and Y coordinates of the component, the height and width can be used to determine the area in which the mouse is located.
When the mouseevent. mouse_down event is triggered, the component size is changed by calculation to achieve drag and drop scaling.
For example, the mouse can be written in this way when you drag the right of the component, this. width = mouseX-this.x;
Note that I have listened on the current component and application respectively. application. the mouseevent of the parent. the mouse_move event. Why not use only the mouseevent of the component. what about the mouse_move event? This question is left for everyone to think about. You can modify it by yourself.

The idea is over. You can check out my code.
In this example, I adapted resizemanage. If you are interested, you can study it.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.