Bitmap graphics

This sample shows how Moscrif bitmap graphics work.

Show screenshots (3)

Bitmap graphics

Moscrif supports two different types of image processing, bitmap and vector. This article describes how to define bitmap object and how to display it at the mobile device screen in Moscrif. Bitmap is kept as image file and represents complex picture, which is hard to create in vector format. By using bitmap it is much easier to create the appearance of “natural” media, such as areas of watercolours bleeding into each other. Bitmaps can be read and modified by any bitmap-based software and stored in certain file formats.

Moscrif supports the most popular graphic formats:

.jpeg - format uses lossy compression but does not support alpha channel. Frequently used for digital photography.
.png - bitmap format of image that employs loss less data compression. This format also supports alpha channel

Bitmaps cannot be rescaled up to an arbitrary resolution without loss of apparent quality.

Bitmap definition

To define a bitmap object from an image file in Moscrif we use Bitmap.fromFile. Once bitmap object is created, basic properties such as width and height are available.
To get image size without loading an image file we use Bitmap.getSize. Method returns pair of values. The first value is width and second is height.

Bitmap drawing

Moscrif native Canvas class supports four different ways of how to drawn Bitmap object at the mobile device screen.

drawBitmap
drawBitmapMatrix
drawBitmapRect
drawBitmapNine

Canvas.drawBitmap is general function for drawing a picture from an image file anchored at the defined position in origin resolution of the image.

Canvas.drawBitmapMatrix function draws bitmap object with transformation (rotation, skew, scale etc.) defined by instance of Matrix class.

include "lib://uix/application.ms" var app = new Application();
app.onStart = function(sender)
{
    //load bitmap into memory
    this.bitmap = Bitmap.fromFile("app://logo.png");
    this.matrix = new Matrix();
    //move bitmap to the middle of screen
    var cx = System.width / 2 - this.bitmap.width / 2;
    var cy = System.height / 2 - this.bitmap.height / 2;
    this.matrix.setTranslate(cx, cy);
    //rotate bitmap to 90° cw around the image center
    this.matrix.postRotate(90, cx, cy);
}
app.onDraw = function(sender, canvas)
{
    //draw bitmap to the center of the window
    canvas.drawBitmapMatrix(this.bitmap, this.matrix);
} app.run();

Example of the picture rotated 90° CW:

Canvas.drawBitmapRect function allows to place more images into one target object at the screen, mostly used at the game development. It loads only part of the image, defined as source rectangle and displays it into defined target rectangle.

include "lib://uix/application.ms" var app = new Application();
app.onStart = function(sender)
{
    // loads bitmap into memory
    this.bitmap = Bitmap.fromFile("app://logo.png");
    // define source rectangle
    // loads only left half of the image
    this.sourceRect = {
        left: 0,
        top: 0,
        right: this.bitmap.width / 2,
        bottom: this.bitmap.height
    }
    // define target rectangle in the center of screen
    // and loads only left half of the image
    this.targetRect = {
        left: System.width / 2 - this.bitmap.width / 4,
        top: System.height / 2 - this.bitmap.height / 2,
        right: System.width / 2 + this.bitmap.width / 4,
        bottom: System.height / 2 + this.bitmap.height / 2
    }
}
app.onDraw = function(sender, canvas)
{
    // draw only left half of source image
    canvas.drawBitmapRect(this.bitmap,
        this.sourceRect.left, this.sourceRect.top,
        this.sourceRect.right, this.sourceRect.bottom,
        this.targetRect.left, this.targetRect.top,
        this.targetRect.right, this.targetRect.bottom);
} app.run();

Example of the picture in target rectange:

Canvas.drawBitmapNine function draws the whole image to target rectangle. This function expands only the centre of the image, which is useful to draw some objects, e.g. button.

Object rendered by Canvas.drawBitmapNine does not need to adjust an appearance of the graphics in the corners. Function defines source bitmap object and the position on the screen.

Example of the buttons. One normal size and the other one from the same source, but stretched to expected width:

include "lib://uix/application.ms" var app = new Application();
app.onStart = function(sender)
{
    // loads bitmap into memory
    this.bitmap = Bitmap.fromFile("app://logo.png");
    // calculate image position on the screen
    this.targetRect = {
        left: 0,
        top: System.height / 2 - this.bitmap.height / 2,
        right: System.width,
        bottom: System.height / 2 + this.bitmap.height / 2,
    }
}
app.onDraw = function(sender, canvas)
{
    //draw bitmap stretched to the width
    canvas.drawBitmapNine(this.bitmap,
        this.targetRect.left, this.targetRect.top,
        this.targetRect.right, this.targetRect.bottom);
} app.run();

Using of Canvas.drawBitmapNine function with an instance of the Paint class (what defines Paint.maskFilter and Paint.colorFilter) we can create some effects like convert to grey scale , blur effect etc.

Example of using Canvas.drawBitmapNine function with an instance of the Paint class: