Trabalhar com imagens

O AppStudio Framework contém uma série de funções para extrair informações de imagens e modificá-las dentro do aplicativo.

Objetos de imagem

As imagens podem ser exibidas em um aplicativo através do uso de um objeto de Imagem, que pode então suportar outros parâmetros para alterar a exibição da imagem. A propriedade source fornece a localização da imagem para exibição, enquanto outras propriedades descrevem as formas nas quais a imagem será exibida. A seguinte amostra de código exibe uma imagem específica de forma a preservar sua razão de aspecto e alinha com o centro horizontal e vertical do elemento de layout onde reside:

Esta amostra de código exibe uma imagem específica de forma a preservar sua razão de aspecto e alinha com o centro horizontal e vertical do elemento de layout onde reside.

Image {
    fillMode: Image.PreserveAspectFit
    source: "Example.png"
    horizontalAlignment: Image.AlignHCenter
    verticalAlignment: Image.AlignVCenter
    cache: false
    }
}

Para um trabalho mais complexo com imagens, o componente ImageObject fornece uma série de ferramentas para inspecionar as propriedades de uma imagem ou transformar uma imagem. O componente ImageObject armazena sua própria imagem por padrão. A seguinte amostra de código demonstra a conexão de ImageObject a uma imagem exibida fornecida em outro lugar:

    //Create ImageObject instance
    ImageObject {
        id: imageObject
    }
    Image {
	id: displayedImage
        fillMode: Image.PreserveAspectFit
        source: imageObject.url //Set source to URL housed by ImageObject
        horizontalAlignment: Image.AlignHCenter
        verticalAlignment: Image.AlignVCenter
        cache: false
    }
}

Esta amostra de código utiliza a função rotate do ImageObject em dois botões, para girar a imagem noventa graus em qualquer direção.

    Button {
        text: "Rotate Left"
        onClicked: {
            imageObject.rotate(-90); //Rotates 90 degrees left
            displayedImage.refresh(); //Refreshes displayed image
        }
    }
    Button {
        text: "Rotate Right"
        onClicked: {
            imageObject.rotate(90); //Rotates 90 degrees right
            displayedImage.refresh(); //Refreshes displayed image
        }
    }

O componente ImageObject contém várias funções com nomes semelhantes, normalmente diferem somente por tempo; por exemplo, mirror e mirrored. Nestes casos, há uma diferença de comportamento. Funções com nomes de tempo presentes fazem as alterações diretamente no objeto de imagem existente, enquanto as funções com nomes de tempo passados fazem as alterações em uma cópia do objeto de imagem.

Metadados Exif

As imagens também podem incluir metadados Exif, uma série de tags que contêm informações sobre a própria imagem. Grande parte destes metadatas é fornecida automaticamente em fotos tiradas por câmeras modernas e pode incluir informações de GPS para descrever a localização da imagem. O AppStudio Framework é capaz de ler e escrever estas tags utilizando o componente ExifInfo.

O AppStudio Framework pode trabalhar com os seguintes três tipos de tag Exif:

• Tags de imagem, como resolução, data e hora criadas e descrição
• Tags estendidas, como fonte de luz, velocidade do obturador e modo de exposição
• Tags de GPS , como latitude, velocidade, e datum do mapa

A seguinte amostra de código mostra como exibir as tags Exif tiradas de uma imagem selecionada através de uma caixa de diálogo do arquivo, que pode ser reescrita. Esta amostra usa latitude, longitude e altitude, mas pode ser modificada para outros metadados.

    FileDialog { //Creates a platform-agnostic file choosing dialog
        id: loadDialog
        title: "Load Image"
        selectExisting: true
        selectMultiple: false
        nameFilters: [ "Image files (*.jpg *.png)", "All readable formats (All files (*)" ]
        folder: Qt.platform.os == "ios"
                ? "file:assets-library://"
                : AppFramework.standardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
                    onAccepted: {
                        exifInfo.load(fileUrl);
                    }
    }
    ExifInfo { //Instantiates ExifInfo
    id: exifInfo
    }
    ColumnLayout {
        anchors {
            fill: parent
            margins: 10
        }
        TextField {
            text: exifInfo.gpsLatitude
            font.bold: true
        }
        TextField {
            text: exifInfo.gpsLongitude
            font.bold: true
        }
        TextField {
            text: exifInfo.gpsAltitude
            font.bold: true
        }
        Button {
        	text: "Load"
        	onClicked: {
        	    loadDialog.open();
        	}
	}
}