التعامل مع الصور

يضم AppStudio Framework مصفوفة من الوظائف لكل من استخراج المعلومات من الصور وتعديلها في التطبيق.

كائنات الصورة

يمكن عرض الصور في تطبيق من خلال استخدام كائن صورة، وهو ما يمكنه لاحقًا دعم مزيد من المعلمات لتبديل عرض الصورة. توفر خاصية source موقع الصورة المطلوب عرضها، في حين أن الخصائص الأخرى توضح طرق عرض الصورة. تعرض عينة الكود التالية صورة محددة بطريقة تمنع نسبة العرض إلى الارتفاع وتقوم بالمحاذاة مع المركز الأفقي والرأسي لعنصر المخطط الموجود فيه:

تعرض عينة الكود صورة محددة بطريقة تمنع نسبة العرض إلى الارتفاع وتقوم بالمحاذاة مع المركز الأفقي والرأسي لعنصر المخطط الموجود فيه:

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

لمزيد من التعامل المُعقّد مع الصور، يوفر مكون ImageObject عددًا من الأدوات لفحص خصائص الصورة أو تحويلها. يُخزّن ImageObject صورته الخاصة بشكل افتراضي. توضح عينة الكود التالية توصيل ImageObject بصورة معروضة متوفرة في مكان آخر:

    //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
    }
}

تستخدم عينة الكود وظيفة rotate في ImageObject بزرّين اثنين لاستدارة الصورة تسعين درجة في كل اتجاه.

    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
        }
    }

يوجد لدى ImageObject عدد من الوظائف بأسماء متشابهة، والتي عادةً ما لا تختلف إلا في الصيغة، مثل mirror وmirrored. في هذه الحالات، يوجد اختلاف في السلوك. تُجري الوظائف ذات أسماء صيغة الحاضر التغييرات مباشرةً على كائن الصورة الحالي، في حين أنه تُجري الوظائف ذات أسماء صيغة الماضي التغييرات على نسخة من كائن الصورة.

بيانات Exif التعريفية

قد تتضمن الصور أيضًا بيانات Exif التعريفية، وهي سلسلة من العلامات التي تحتوي على معلومات عن الصورة نفسها. تتوفر الكثير من هذه البيانات التعريفية تلقائيًا في الصورة الملتقطة بواسطة كاميرات حديثة، وقد تتضمن معلومات GPS لوصف موقع التقاط الصورة. يتمكن AppStudio Framework من قراءة هذه العلامات والكتابة فيها باستخدام مكون ExifInfo.

يمكن أن يتعامل AppStudio Framework مع أنواع علامة Exif الثلاثة التالية:

• علامات الصورة، مثل الدقة والتاريخ ووقت الإنشاء والوصف
• العلامات الممتدة، مثل مصدر الإضاءة وسرعة مصراع الكاميرا ووضع التعرُّض
• علامات GPS، مثل دائرة العرض والسرعة ومرجع إسناد الخريطة

تعرض عينة الكود التالية كيفية عرض علامات Exif المأخوذة من صورة محددة من خلال مربع حوار ملف، وهو ما يمكن إعادة كتابته لاحقًا. تستخدم هذه العينة دائرة عرض وخط طول، ويمكن تعديل الارتفاع للبيانات التعريفية الأخرى.

    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();
        	}
	}
}