ImagePaint

ImagePaint is typically used for tileable images. A tileable image is one that can be repeated as a pattern over a surface.

If set as a background of a Container the paint will fill the area occupied by the container. Depending on the specified repeat pattern the image will either be repeated in particular direction or stretched to fill the available area. The anchor point of the repeat is the top left corner of the fillable area.

This class uses RepeatPattern to specify how and if the image should be repeated over the surface. In order to construct ImagePaint objects from QML, the ImagePaintDefinition class is available.

The provided image must have a width and height that is a power of two in order to be tileable (for example, 4x4, 8x8, 16x16, 32x32, 64x64, 128x128, 256x256, 128x64, 32x16). It also needs to have the "repeatable: true|false" property set in the asset metadata file. The asset metadata file is an .amd file with the same name as the image itself. This file can also contain nine-slicing attributes, however the tiling of nine-sliced images is not currently supported.

Here's an example of an .amd file called tiled_image.amd that has the repeatable property set to true.

#RimCascadesAssetMetaData version=1.0
source: "tiled_image.png"
repeatable: true

When referencing the image from your application, you reference the .amd file instead of the image itself. Here's an example of how to tile the background image in a container in C++:

pContainer->setBackground(ImagePaint("asset:///tiled_image.amd", RepeatPattern::XY));

You can also tile images defined by the ImageData class:

#include <bb/ImageData>

int w = 0x33333333;
int b = 0000000000;
int data[8][8] =
    { { w, b, b, b, b, b, b, w },
      { b, w, b, b, b, b, w, b },
      { b, b, w, w, w, w, b, b },
      { b, b, w, b, b, w, b, b },
      { b, b, w, b, b, w, b, b },
      { b, b, w, w, w, w, b, b },
      { b, w, b, b, b, b, w, b },
      { w, b, b, b, b, b, b, w } };

Image image(bb::ImageData::fromPixels((const unsigned char*)data, bb::PixelFormat::RGBX, 8, 8, 8*4));
ImagePaint paint(image, RepeatPattern::XY);
pContainer->setBackground(paint);

In order to tile images in QML, you must use the associated definition class ImagePaintDefinition. Here's an example of how to use ImagePaintDefinition to add a background image to a container in QML:

Container {
    id: rootContainer
    background: back.imagePaint
    attachedObjects: [
        ImagePaintDefinition {
            id: back
            repeatPattern: RepeatPattern.XY
            imageSource: "asset:///container/tiled/core16x16.amd"
        }
    ]
}