pivotX pivotY

[Ben Nur]

Hello, I like DroidScript alot:-)
I have a problem. Where I find pivotX and pivotY in canvas.DrawImage?


//Initialise some variables. 
var angle = 0; 
var pivotX = 0.5;
var pivotY = 0.6;

//Called when application is started. 
function OnStart() 
{ 
//Create a layout with objects vertically centered. 
lay = app.CreateLayout( "Linear", "VCenter,FillXY" );  
 
//Create a frame layout so we can put one image over another. 
layFrame = app.CreateLayout( "Frame", "" );  

//Create first image. 
img = app.CreateImage( "/Sys/Img/Droid1.png", 0.5, -1 ); 
layFrame.AddChild( img ); 
 
//Create second image. 
img = app.CreateImage( "/Sys/Img/Hello.png", 0.5, -1 ); 
img.Scale( 0.3, 0.3 ); 
img.Move( 0, 0.15 ); 
layFrame.AddChild( img ); 
 
//Add layouts to app.  
lay.AddChild( layFrame ); 
app.AddLayout( lay ); 
 
//Start timer to rotate top image. 
setInterval( "RotateImage()", 10 ); 
} 

function RotateImage( ev ) 
{ 
img.Rotate( angle,pivotX, pivotY ); 
angle += 3; 
} 


I want to rotate like this script, but a image inside a canvas around pivotX and pivotY
How can I do this
?

Please excause bad english.

Ben

[Dave Smart]

Hi Ben,

If you load your character image into memory using a app.CreateImage() but don't add it to a layout, then you can rotate your source image in memory using the img.Rotate( angle, pivX, pivY ) method using a timer and then copy it to the canvas using the img.DrawImage() method.

If you want to do more exotic transformations, then you will probably need to use the DrawImageMtx() method.  You should be able to combine translation and rotation to get what you want.  

Here is an example of using matrix transforms on a canvas:- 

function DrawFrame()

{

    //Clear the canvas.

    canvas.Clear();

    

    //Draw two copies of the background image with one drawn off screen 

    //above the other in the Y direction.

    canvas.DrawImage( imgBackground, 0, -1.0 + backGroundY, 1.0, 1.0 );

    canvas.DrawImage( imgBackground, 0, backGroundY, 1.0, 1.0 );

    

    //Shift the background images down slightly each frame

    //until the lower image is off screen, then we start again.

    backGroundY += backGroundShift;

    if( backGroundY >= 1.0 ) backGroundY -= 1.0;

    

    //Uncomment the lines below to test the vairous

    //types of transform.

    

    //See here for a nice matrix description:-

    // http://apike.ca/prog_svg_transform.html

    

    //Identity.

    //var mtx = [ 1,0,0, 0,1,0, 0,0,1 ];

    

    //Translate.

    //var mtx = [ 1,0,0.3, 0,1,0.3, 0,0,1 ];

    

    //SkewX.

    //var a = Math.PI/4;

    //var mtx = [ 1,Math.tan(a),0, 0,1,0, 0,0,1 ];

    

    //Scale.

    //var mtx = [ 2.5,0,0, 0,2.5,0, 0,0,1 ];

    

    //Rotate 45 degrees.

    var a = 45 * Math.PI/180;

    var mtx = [ Math.cos(a),-Math.sin(a),0, Math.sin(a),Math.cos(a),0, 0,0,1 ];

    

    //Draw image with matrix transform.

    canvas.DrawImageMtx( imgChar, mtx );

    

    //Update the canvas.

    canvas.Update();

}