Граница изображения в QML

Question

Я хочу иметь анимированную границу над Image. Но, к моему удивлению, только Rectangle может предоставить border. Я хочу, чтобы пунктирная линия двигалась вокруг Image. Как получить такую ​​анимацию. Это мой пример кода, который просто предоставляет границу Image.

Rectangle { 
    width: image.width + 5 
    height: image.height + 5 
    border.color: "yellow" 
    border.width: 5 
    color: "transparent" 

    Image { 
     id: image 
     anchor.centerIn: parent 
     source: "" 
    } 
} 

Answer 1

Поскольку Canvas элемент в QML не метод setLineDash() в JavaScript холст имеет (но вы можете эмулировать см here), самый простой способ (IMHO) является использование BorderImage с помощью пользовательского изображения с пунктиром. Пример использования BorderImage here.

Также вы можете написать свой собственный элемент QML, полученный из QQuickPaintedItem или QQuickItem в C++.

Answer 2

Возьмите BoarderImage вместо прямоугольника:

Image { 
    BoarderImage { 
    }  
}