A few days ago suddenly want to do a lens effect, suddenly thought of this effect, so find the Year "collection" code decided to taste the wish.
Objective:
This program is mainly divided into three parts: the layer of drag and drop, layer scaling, picture cutting (including preview).
One of the layers of drag-and-drop is a very common effect, the scale of the layer is a bit difficult, picture cutting look at the fact that the principle is very simple.
However, in the process of implementation also learned a lot of things that have not been known before, the following will be explained, I hope you can learn something from it.
Principle:
"Drag and Drop program"
The basic principle is very simple, do not know to look at the code to understand, which refers to the rabbit and Bluedestiny related articles.
Here are some more useful places to talk about:
"Scope Limit"
First of course there is a drag-and-drop range parameter, which is the mxleft (left minimum), the mxright (left-hand maximum on the right), the mxtop (top minimum), the mxbottom (bottom maximum).
Then in the drag program move () see if there is more than, more than the set back limit on the line:
Copy Code code as follows:
if (this. Limit) {
Get exceeded length
var iright = ILeft + this._obj.offsetwidth-this.mxright, Ibottom = Itop + this._obj.offsetheight-this.mxbottom;
This is to set the right bottom and then set the top left, may not be accurate
if (IRight > 0) ileft-= IRight;
if (Ibottom > 0) itop-= Ibottom;
if (This.mxleft > ILeft) ileft = This.mxleft;
if (This.mxtop > Itop) itop = This.mxtop;
}
"Release Selection"
The way I used to do this is to set up IE's onselectstart and FF's Mozuserselect,
But Bluedestiny said, "Using user-select will be the equivalent of Event.preventdefault." Blocking the default action causes MouseUp to be lost in certain operations. ”，
The best way is IE with document.selection.empty (), FF with Window.getselection (). Removeallranges ().
So you can add in Move ():
Window.getselection && window.getselection (). Removeallranges (); This type of writing is learned from the rabbit program.
Because IE mouse capture by default (said below) with this, so IE is not necessary.
"Mouse capture"
Previously did not know that JS has this thing, the use is very simple:
Set capture: this. Drag.setcapture ();
Cancel capture: this. Drag.releasecapture ().
It works by setting the mouse capture to the specified object. This object receives all mouse input for the current application or for the entire system.
Do not understand, try to drag and drop the mouse to drag and drop to the outside of the browser, you will find that the drag continues,
If this mouse capture does not occur, it will fail.
But outside the browser is not trigger MouseUp, but can also use the Losecapture event instead:
addEventHandler (this. Drag, "Losecapture", THIS._FS);
This. Drag.setcapture ();
In the program to the FF window to add blur to stop the event, Yue Rabbit said is to be able to detect the ALT + TAB caused by MouseUp lost, perfect point, also added to the.
Such a drag-and-drop program is complete.
Current 1/4 page
1234 Next read the full text
