In the last two days there is a Lufylegend game engine group of friends need to do a project, wherein the need to solve is: Get the picture taken by the camera, according to the image Exif information to show the picture as "normal" situation, and need to add some events to listen to the picture. What is normal? It is when we take pictures, because the picture that is taken by a camera or a cell phone sideways or vertically, it will eventually show up when it is taken, such as:
"My Mold" orz
I'll take you as a lufylegend. So we know bitmap the default rotation center for this layer is its content center, which is: Bitmap.getwidth () *0.5,bitmap.getheight () *0.5, and the default zoom center is its upper-left corner.
The default rotation center and default Zoom center of the sprite layer are the upper left corner, such as:
：
Bitmap and Sprite Zoom Center is the upper left corner, to the lower right corner of the direction of deformation;
The center of rotation of bitmap is the center of content, which rotates all the points around a circle in the circumscribed circle;
The center of rotation of the sprite is still in the upper left corner, so it rotates when it is on that great circle;
So, what if we need a bitmap or a sprite that doesn't rotate or zoom to its content center?
The answer is: combine the two above to form a new layer, the principle is very simple, as follows:
The code is this:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Rotateandscale</title></Head><Body> <DivID= "Mylegend"></Div> <Scriptsrc=".. /lufylegend-1.9.10.min.js "></Script> <Scripttype= "Text/javascript">Init ( the,"Mylegend", -,480, main);varloader;functionMain () {loader= NewLloader (); Loader.addeventlistener (Levent.complete,loadbitmapdata); //loading a picture, you can replace it with your own pictureLoader.load ("./images/backg.png",'BitmapData');}functionLoadbitmapdata (event) {//turn the picture into a BitmapData object, but you can also experiment with a solid color block . //but for solid color blocks, please note lbitmapdata ("#ff0000", 20,20,100,100) //The resulting color block size is 80*80, and if it's a picture, it's 100*100. //specific Why there are differences, please look at the engine source code ... varBMD= NewLbitmapdata (Event.target,0,0, $, $); varBM= NewLbitmap (BMD); varSP= NewLsprite (); //Move the target we want to rotate or scale as follows //The object moves the center of its contents to the upper-left corner of the lsprite to which we have wrapped the object .bm.x= -bm.getwidth ()*0.5; Bm.y= -bm.getheight ()*0.5; //the layer of the wrapped target object can be set any point for the final Zoom rotation Center //set here as the center of the entire canvassp.x=Lglobal.width/2;sp.y=Lglobal.height/2; //add into CanvasSp.addchild (BM); AddChild (SP); //make an animation to see the actual effect varI=0, J=1; SetInterval (function() {sp.rotate=I++; Sp.scalex+= 0.01; Sp.scaley+= 0.01; }, -) //and draw a circle center as a reference. varPPP= NewLsprite (); PPP.GRAPHICS.DRAWARC (1,"#000000",[ -, -, Ten, 0, 2*Math.PI],true); AddChild (PPP);} </Script></Body></HTML>
In fact, the above thing, the engine author Lufy has been here to understand: about the object's rotation center and the Zoom Center settings
Because the content of the picture does not know what the reason (the server in Japan), not shown, and Lufy example is too troublesome to write, but it is not easy to see why ...
So this principle is written here, only for the reference of the small friends! O (∩_∩) o
Finally, congratulations Lufylegend HTML5 game engine just released a new version: 1.9.11
How to set the zoom and Rotate center of bitmap or sprite in Lufylegend
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
