Cascades Development

[chris_chrono]

Did any one manage to change the image of ImageView using QImage that load and image that have transparent zone?

I loaded a transparent image (from png files) to QImage, and the pass it to ImageView using this function :

https://developer.blackberry.com/cascades/reference/bb__imagedata.html

bb::ImageData fromQImage(const QImage &qImage)

{

    bb::ImageData imageData(bb:ixelFormat::RGBA_Premultiplied, qImage.width(), qImage.height());

    unsigned char *dstLine = imageData.pixels();

    for (int y = 0; y < imageData.height(); y++) {

        unsigned char * dst = dstLine;

        for (int x = 0; x < imageData.width(); x++) {

            QRgb srcPixel = qImage.pixel(x, y);

            *dst++ = qRed(srcPixel);

            *dst++ = qGreen(srcPixel);

            *dst++ = qBlue(srcPixel);

            *dst++ = qAlpha(srcPixel);

        }

        dstLine += imageData.bytesPerLine();

    }

    return imageData;

}

But the result is all the transparent zone in the image change into white, so the imageview doest have any parts that transparent. Is there any other trick to do this besides directly load the resource to the ImageView? 

[oliver_kranz]

You can create a Cascades image.

https://developer.blackberry.com/cascades/reference/bb__cascades__image.html

For example you can create the Image from a QByteArray.

Image image(imageData);

 You can also create the Image from ImageData but I have never done this.

You can either set the image to the ImageView in C++ with ImageView.setImage(). Or you can assign the Image in QML to the property ImageView.image.

[chris_chrono]

Thx for the reply, i have tried it, so i convert the QImage into ImageData, then into Image, then into ImageView.. and the result is still the same, the transparent area is still white.. so convert it into Image doesn't solve the problem

thx anyway

[oliver_kranz]

If your image is on the file system then you can assign it directly to the ImageView.

ImageView {
    imageSource: "asset:///images/image.png"
}

[oliver_kranz]

Do not do this conversion to ImageData. Your method can simply return a QImage. Then you can assign it in QML to the property ImageView.image.

[chris_chrono]

Hmm.. my ImageView component is generated in CPP, because it need to be dynamic, that's why i cannot try your solution above.

Is there any other trick?

[oliver_kranz]

You can also assign the image in C++. If your image is on the file system then you can set the image path of ImageView.

setImageSource(QUrl("asset:///images/image.png"));

[mnosov]

Probably you're reading image to QImage incorrectly. Right now I'm using this approach (not ideal way, but works):

//////////////////////////////////////////

//Read image to QImage

QFile file(imageFilePath);

QImageReader imgReader(&file);

QImage image;

imgReader.read(&image);

image.convertToFormat(QImage::Format_ARGB32_Premultiplied); //important step

//Do anything with QImage pixel data 'image' (e.g. apply some effect)

//Set imageData

    ImageData pixelBuffer = ImageData&colon;:fromPixels(image.rgbSwapped().bits(),
                                bb:: PixelFormat::RGBA_Premultiplied,
                                reader.width(),
                                reader.height(),
                                image.bytesPerLine());
    Image bbimage = Image(pixelBuffer);
    if (!bbimage.isNull()) {
        myImageView->setImage(bbimage);
    }

////////////////////////////////////

[oliver_kranz]

myImageView->setImageSource(QUrl(imageFilePath));

[oliver_kranz]

I would avoid this conversion to ImageData. You can also create an Image from a QByteArray.

QByteArray imgData = imgReader.device()->readAll();
Image img(imgData);
myImageView.setImage(img);