Kép beszúrása grafikonra javascript segítésével
Amennyiben szükségesnek ítéljük, hogy egy gráfra (canvasra) képet tegyünk, és esetleg dinamikusan változtassuk, akkor a QML egy javascript alapú megoldást kínál. Ahhoz, hogy képünk megjelenjen, elég csak a QML-ben szokásosan használt
Image{
id: image1
visible: false
source: 'cat.png'
}
kódsort használni, azonban ha ezt formázni, mozgatni és változtatni is szeretnénk ahhoz egy kicsitvel több kódra van szükség. Ahogy a fenti kódon látszik, a láthatóság hamisra van állítva. Ez azért szükséges, mert nem ezt a tag-et szeretnénk megjelníteni, csupán csak ebből a képből egy példányt, de módosítva. Térjünk is a lényegre, az Image{}-el létrehoztuk a képet, megjeleníteni pedig így tudjuk:
var context = getContext("2d");
context.drawImage(image1, 0, 0, 100, 100);
Ez a kód már javascript, ezáltal ha több funkcióra lenne szükséged, minthogy a kép méretét, pozícióját, vagy magát a képet változtatod, célszerű javascript megoldásokat keresni, mert QML címszóval én nem sok eredményre jutottam.
Jelen esetben a context
nevű változónk egy CanvasRenderingContext2D
típusú objektum mely rengeteg lehetőséget biztosít a 2D megjelenítés sok területén.
A fenti drawImage függvény lehetséges verziói:
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Ez a három lehetőség nyílik kép kirajzolására, én a második verziót használtam. A property-k leírása, és sok egyéb hasznos ezzel kapcsolatos dolog a dokumentációban olvasható amelyet itt találsz: