Bildrand in QML

Question

Ich möchte eine animierte Grenze über eine Image haben. Aber zu meiner Überraschung kann nur Rectangleborder bereitstellen. Ich möchte eine gepunktete Linie haben, die sich um die Image herum bewegt. Wie man solche Animation bekommt. Dies ist mein Beispielcode, der nur einen Rahmen für die Image bietet.

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

Da Canvas-Element in QML nicht die setLineDash() -Methode wie JavaScript Leinwand hat (aber man kann es immer noch emulieren, siehe here), der einfachste Weg (imho) ist BorderImage mit einem benutzerdefinierten Bild zu verwenden mit gepunkteten Muster. Bitte beachten Sie das Beispiel zur Verwendung von BorderImage here.

Sie können auch Ihr eigenes QML-Element schreiben, das von QQuickPaintedItem oder QQuickItem in C++ abgeleitet ist.

Answer 2

Nimm BoarderImage statt Rechteck:

Image { 
    BoarderImage { 
    }  
}