Создание субтитров в QML с фоновым и вертикальным переносом - PullRequest
Новая
       8

Создание субтитров в QML с фоновым и вертикальным переносом

0 голосов
/ 23 октября 2018

Я создаю приложение для видеопроигрывателя с использованием QML.

В настоящее время у меня возникают проблемы с реализацией субтитров с помощью QML.

Мой текущий код для субтитров: 

Rectangle {
    id: nativeSubtitles
    height: nativeSubs.font.pixelSize + 4
    visible: true
    anchors.left: controlsBar.left
    anchors.right: controlsBar.right
    anchors.bottom: progressBar.top
    radius: 5
    color: "transparent"

    Label {
        id: nativeSubs
        width: parent.width
        text: "SUBTITLES! OWO YESH f rre e er erwwew we wewe ew ew ew eew ewew ew ewwe3wwe ew "
        color: "white"
        font.family: notoFont.name
        font.pixelSize: 24
        renderType: Text.NativeRendering
        horizontalAlignment: Text.AlignHCenter
        opacity: 1
        background: Rectangle {
            color: "orange"
            anchors.left: parent.left
            anchors.right: parent.right
        }
    }
}

Это не работает так, как я хочу.

Как я хочу, чтобы субтитры работали, если они центрированы между левым и правым и нижним краями controlsbar.

Если субтитрыЕсли его размер слишком велик, чтобы уместить его в ширину, текст должен разделиться и добавить еще одну линию для вертикального роста, но при этом закрепленную на нижней части панели управления.

Фон должен занимать только те области, где текст занят с внешним отступом 2.

Как мне это сделать?Я потратил целую вечность, пытаясь заставить мои вещи работать ...

РЕДАКТИРОВАТЬ: Новый код с фиксированной вертикальной упаковкой благодаря https://stackoverflow.com/a/52955752/10547967

Rectangle {
    id: nativeSubtitles
    height: nativeSubs.font.pixelSize + 4
    visible: true
    anchors.left: controlsBar.left
    anchors.right: controlsBar.right
    anchors.bottom: progressBar.top
    radius: 5
    color: "transparent"

    Label {
        id: nativeSubs
        width: parent.width
        text: "SUBTITLES! OWO YESH f rre e er erwwew we wewe ew ew ew eew ewew ew ewwe3wwe ew "
        color: "white"
        font.family: notoFont.name
        font.pixelSize: 24
        renderType: Text.NativeRendering
        horizontalAlignment: Text.AlignHCenter
        anchors.bottom: parent.top
        opacity: 1
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere

        background: Rectangle {
            color: "orange"
            anchors.left: parent.left
            anchors.right: parent.right
        }
    }
}

Теперь все этонеобходимо исправить - фон должен быть шириной текста только тогда, когда текст не занимает всю ширину пространства между левым и правым якорями панели управления

1 Ответ

0 голосов
/ 23 октября 2018

Попробуйте Label свойство wrapMode: Text.WrapAtWordBoundaryOrAnywhere

wrapMode : enumeration

Установите это свойство для переноса текста на ширину текстового элемента.Текст будет переноситься только в том случае, если была задана явная ширина.wrapMode может быть одним из: 

Text.NoWrap (default) - no wrapping will be performed. If the text contains insufficient newlines, then contentWidth will exceed a set width.
Text.WordWrap - wrapping is done on word boundaries only. If a word is too long, contentWidth will exceed a set width.
Text.WrapAnywhere - wrapping is done at any point on a line, even if it occurs in the middle of a word.
Text.Wrap - if possible, wrapping occurs at a word boundary; otherwise it will occur at the appropriate point on the line, even in the middle of a word.
Text.WrapAtWordBoundaryOrAnywhere

из Текст QML Тип

[2nd ОБНОВЛЕНИЕ ]

Есть дваспособы

  1. Вы можете использовать элемент TextMetrics ( требуется QtQuick 2.5 ) 

    TextMetrics {
                   id:     t_metrics
                   font:   nativeSubs.font
                   text:   nativeSubs.text
               }

Rectangle {
    id: nativeSubtitles
    height: t_metrics.tightBoundingRect.height
    visible: true
    anchors.left: controlsBar.left
    anchors.right: controlsBar.right
    anchors.bottom: progressBar.top
    radius: 5
    color: "transparent"

    Label {
        id: nativeSubs
        width: parent.width
        text: "SUBTITLES! OWO YESH f rre e er erwwew we wewe ew ew ew eew ewew ew ewwe3wwe ew "
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        color: "white"
        font.pixelSize: 24

        renderType: Text.NativeRendering
        horizontalAlignment: Text.AlignHCenter
        opacity: 1

        background : Rectangle {
            color: "orange"
            anchors.left: parent.left
            anchors.right: parent.right
            height: t_metrics.tightBoundingRect.height
        }
    }
}

2.Вы можетеиспользуйте свойство nativeSubtitles Rectangle childrenRect т.е. nativeSubtitles.childrenRect.height + p (p: некоторые отступы)

Просто замените в приведенном выше коде t_metrics.tightBoundingRect.height на nativeSubtitles.childrenRect.height + p

Для адаптивного прямоугольника

qml subtitles

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3


Window {
    id: bigWin
    objectName: 'bigWin'
    visible: true
    width: 640
    height: 480
    color: "#000000"
    title: qsTr("Hello World")

    Rectangle{
        id:subtitlesBar
        color:"black"
        border.width: 3
        border.color: "#ba2121"
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.bottom: barRect.top
        anchors.bottomMargin: 5
        anchors.right: parent.right
        anchors.left: parent.left

        RowLayout {
            id: nativeSubtitles
            visible: true
            anchors.left: subtitlesBar.left
            anchors.right: subtitlesBar.right
            height: childrenRect.height
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10



            Rectangle{
                id:theBoss
                Layout.fillWidth: true
                Layout.fillHeight:  true
                Layout.rightMargin:  50
                Layout.leftMargin: 50
                Layout.maximumWidth:  nativeSubtitles.width
                color:"transparent"
                height: childrenRect.height

                Label {
                    id: nativeSubs

                    // Monitor the width
                    onWidthChanged:  {

                        if(width > parent.width -50 )
                            width=parent.width -50
                    }
                    onTextChanged:if (width<=parent.width -50) width=undefined
                    text: inPut.text
                    anchors.horizontalCenter: parent.horizontalCenter
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                    font.pixelSize: 24
                    horizontalAlignment: Text.AlignHCenter
                    opacity: 1
                    background: Rectangle {
                        id : orgnOne
                        color: "orange"
                        opacity: 0.5
                        width: theBoss.childrenRect.width
                        height: theBoss.childrenRect.height
                    }
                }
            }
        }
    }

    Rectangle {
        id: barRect
        height: 2
        color: "#ffffff"
        anchors.bottom: inPut.top
        anchors.bottomMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
    }

    TextInput{
        id:inPut
        anchors.bottom: parent.bottom
        height: 60
        color: "#2d9604"
        font.pointSize: 14
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0

    }

}
...