Необходимо изменить цвет изображения SVG в QML

Question

Я пытаюсь создать синоптическую панель в Qt-QML (для рабочего стола). Интерфейс должен использоваться с фиксированным разрешением, поэтому я предпочитаю использовать PNG-изображения для разных графических элементов для создания схемы (трубы, трубы-кривой, трубы-t, насоса, клапана и т. Д.). Теперь проблема заключается в том, как изменить цвет заливки различных компонентов: я бы хотел, чтобы этот пользователь мог выбрать цвет (в реальном случае есть другая жидкость, которую можно использовать), но я не могу найти, как это сделать в QML. Я думал использовать мои компоненты PNG в качестве фона, а затем рисовать прямоугольник, замаскированный маской SVG. Но в Интернете я могу найти только qt-компоненты «MaskedItem», недоступные для рабочего стола. Мне интересно, нет ли способа перенести мой PNG образ SVG с одним цветом (черный и прозрачный), а затем изменить его свойство в QML. У кого-нибудь есть идеи? Большое спасибо.

(EDIT лучше объяснить)

Проблема гораздо сложнее, чем я могу быть в состоянии объяснить. Я создал несколько компонентов QML со специфическими свойствами, каждый компонент имеет фоновое изображение (PNG) с прозрачностью. Теперь мне нужно заполнить определенную область изображения PNG, используя переменный цвет «x», когда основной QML находится в определенном состоянии (установленном приложением Qt). Моя проблема: как заполнить область PNG/SVG переменным цветом, от QML? Мне нужно поместить свое «фоновое» изображение, затем применить над ним компонент «Прямоугольник» (цвет «x») и, наконец, поместить маску на этот прямоугольник, чтобы определить, какая область этого должна быть видимой, сохраняя фон (нижнее изображение ранее). Надеюсь, теперь я объяснил себя лучше.

(РЕДАКТИРОВАТЬ раствор) После того, как много часов, я не смог найти какие-либо другие решения, чем при использовании QT-компонентов MaskedItem. Ниже я опубликовал решение, которое использовал. Спасибо вам всем за интерес.

Answer 1

Решение основано на использовании «qt-components MaskedItem»; он должен быть взят из репозитория, и он должен скомпилироваться под рабочим столом Qt. Теперь можно использовать MaskedItem в любом компоненте QML синоптики. QML код компонентов будет что-то вроде этого:

Item 
{ 
    id: arrow 
    property int rotate: 0 
    property bool active: false 
    width: 32 
    height: 32 
    clip: true 

    Image { 
     smooth: true 
     source: { 
      if(rotate==90) 
       "../res/arrow_1_bg.png" 
      else if(rotate==180) 
       "../res/arrow_2_bg.png" 
      else if(rotate==270) 
       "../res/arrow_3_bg.png" 
      else 
       "../res/arrow_0_bg.png" 
     } 
    } 

    MaskedItem 
    { 
     visible: active 
     anchors.fill: parent 
     mask: Image 
     { 
      anchors.fill: parent 
      smooth: true 
      source: { 
       if(rotate==90) 
        "../res/arrow_1_mask.png" 
       else if(rotate==180) 
        "../res/arrow_2_mask.png" 
       else if(rotate==270) 
        "../res/arrow_3_mask.png" 
       else 
        "../res/arrow_0_mask.png" 
      } 
     } 
     Rectangle 
     { 
      anchors.fill: parent 
      color: active_color 
      opacity: .6 
     } 
    } 

} // Item: arrow 

«активное» свойства означает, что если компонент должен быть «заполнен» или нет, используя глобальное свойство «active_color», определенный в главном QML.

Таким образом, все компоненты (трубы, трубы, стрелки, насосы, клапаны и т. Д.) Имеют прозрачное изображение (PNG). Трубы (имеющие свойство «ориентация», горизонтальные или вертикальные) имеют размер PNG 1x32px. Примером финального экрана может быть примерно следующее:

example1 http://imageshack.us/a/img9/2968/example1c.png.

Все компоненты имеют также MaskedItem, изображение маски используется для определения видимой области прямоугольника (с цветом «x»), размещаемого поверх фонового изображения основного компонента.Пример из двух компонентов фона и маски изображений:

example3 http://imageshack.us/a/img442/9863/example3y.png.

Конечный результат, если «активный» свойство верно, и выбранный цвет зеленый, может быть что-то вроде этого:

example2 http://imageshack.us/a/img836/1968/example2c.png.

Answer 2

Изображения как PNG, так и SVG поддерживают альфа-канал (то есть прозрачность), поэтому почему бы вам просто не поместить свой SVG (с прозрачными частями, где вы хотите увидеть свой фон) поверх вашего фона PNG?

Или даже наоборот ... вы можете разместить части PNG (с прозрачными «отверстиями») над вашим изображением SVG.