GLView context error while line drawing.

[Andy Leedy]

Not sure if something is wrong in my code or the method is not implemented.

Hopefully someone can point me in the right direction.

Screenshot attached and code is below:

//Called when application is started.

function OnStart()

{

    //Create a layout with objects vertically centered.

    //Set full screen mode.

    app.SetScreenMode( "Full ");

    

    //Create the main layout.

    lay = app.CreateLayout( "Linear", "FillXY" );

    //Create a GLView and add it to main layout.

    glview = app.CreateGLView( 1, 1, "Fast2d" );

    lay.AddChild( glview );

    

    //Add the main layout to app.

    app.AddLayout( lay );

    app.SetDebugEnabled(false);

    

    StartRendering();

    

}

function StartRendering()

{

    //Render at 30 frames per second

    setInterval( DrawFrame, 1000/30 );

}

function DrawFrame()

{

    //DrawFrameAdvanced uses the GLView context

    DrawFrameAdvanced();

    

    //Render the graphics

    glview.Render();

}

function DrawFrameAdvanced()

{

    //DrawFrameAdvanced uses GLView context - this will allow us to perform 

    //more advanced drawing operations, very similar to HTML5 Canvas

    var context = glview.GetContext();

    

    //Save the current GLView transform so we can restore 

    //it later once we have finished drawing

    context.save();

    

    // code goes here...

    context.strokeStyle  = "white";

    context.lineWidth  = 10;

    context.lineCap  = 'square';

    context.beginPath();   // This is where is it errors out.

    context.moveTo(20, 0);

    context.lineTo(100, 0);

    context.stroke();

    context.closePath();

    

    //Restore the previous GLView transform that we saved earlier. 

    //This means that any transforms we applied while drawing will 

    //now be discarded.

    context.restore();    

    

}

[Dave Smart]

Hi Andy,

The comment in the sample is perhaps a bit misleading because you can't do any drawing in the "Fast2d" version of the GLView.  It is designed for high performance image manipulation only.  This means you will need to stick to using .png images an sprite sheets only inside the canvas.  You can however draw text and lines etc in a transparent layout containing a blank image positioned above the GLView or even put a transparent WebView above it.  

If you want to do canvas drawing like you are attempting to do, you will have to use the standard HTML5 canvas inside a WebView control.  

Regards

David

[Dave Smart]

These are the context methods supported by the GLView in "Fast2D" mode:-

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

context.globalAlpha;

context.resetTransform();

context.restore();

context.rotate(angle);

context.save();

context.scale(x, y);

context.setTransform(a, b, c, d, e, f);

context.transform(a, b, c, d, e, f);

context.translate(x, y);

[Andy Leedy]

Thanks for the reply Dave!

I'll play around with both.

-Andy