63 import Qt 4.7 |
63 import Qt 4.7 |
64 |
64 |
65 Image { source: "qtlogo.png" } |
65 Image { source: "qtlogo.png" } |
66 \endqml |
66 \endqml |
67 \endtable |
67 \endtable |
68 |
68 |
69 If a size is not specified explicitly, the Image element is sized to the loaded image. |
69 If the \l {Item::width}{width} and \l{Item::height}{height} properties are not specified, |
70 Image elements can be stretched and tiled using the \l fillMode property. |
70 the Image element is automatically sized to the loaded image. Image elements can be |
71 |
71 stretched and tiled using the \l fillMode property. |
72 If the image \l source is a network resource, the image is loaded asynchronous and the |
72 |
73 \l progress and \l status properties are updated appropriately. Otherwise, if the image is |
73 By default, locally available images are loaded immediately, and the user interface |
74 available locally, it is loaded immediately and the user interface is blocked until loading is |
74 is blocked until loading is complete. If a large image is to be loaded, it may be |
75 complete. (This is typically the correct behavior for user interface elements.) |
75 preferable to load the image in a low priority thread, by enabling the \l asynchronous |
76 For large local images, which do not need to be visible immediately, it may be preferable to |
76 property. |
77 enable \l asynchronous loading. This loads the image in the background using a low priority thread. |
77 |
78 |
78 If the image is from a network rather than a local resource, it is automatically loaded |
79 Images are cached and shared internally, so if several Image elements have the same source |
79 asynchronously, and the \l progress and \l status properties are updated as appropriate. |
|
80 |
|
81 Images are cached and shared internally, so if several Image elements have the same \l source, |
80 only one copy of the image will be loaded. |
82 only one copy of the image will be loaded. |
81 |
83 |
82 \bold Note: Images are often the greatest user of memory in QML user interfaces. It is recommended |
84 \bold Note: Images are often the greatest user of memory in QML user interfaces. It is recommended |
83 that images which do not form part of the user interface have their |
85 that images which do not form part of the user interface have their |
84 size bounded via the \l sourceSize property. This is especially important for content |
86 size bounded via the \l sourceSize property. This is especially important for content |
85 that is loaded from external sources or provided by the user. |
87 that is loaded from external sources or provided by the user. |
|
88 |
|
89 \sa {declarative/imageelements/image}{Image example}, QDeclarativeImageProvider |
86 */ |
90 */ |
87 |
91 |
88 /*! |
92 /*! |
89 \internal |
93 \internal |
90 \class QDeclarativeImage Image |
94 \class QDeclarativeImage Image |
110 |
114 |
111 QDeclarativeImage::~QDeclarativeImage() |
115 QDeclarativeImage::~QDeclarativeImage() |
112 { |
116 { |
113 } |
117 } |
114 |
118 |
115 /*! |
|
116 \qmlproperty QPixmap Image::pixmap |
|
117 |
|
118 This property holds the QPixmap image to display. |
|
119 |
|
120 This is useful for displaying images provided by a C++ implementation, |
|
121 for example, a model may provide a data role of type QPixmap. |
|
122 */ |
|
123 |
|
124 QPixmap QDeclarativeImage::pixmap() const |
119 QPixmap QDeclarativeImage::pixmap() const |
125 { |
120 { |
126 Q_D(const QDeclarativeImage); |
121 Q_D(const QDeclarativeImage); |
127 return d->pix; |
122 return d->pix.pixmap(); |
128 } |
123 } |
129 |
124 |
130 void QDeclarativeImage::setPixmap(const QPixmap &pix) |
125 void QDeclarativeImage::setPixmap(const QPixmap &pix) |
131 { |
126 { |
132 Q_D(QDeclarativeImage); |
127 Q_D(QDeclarativeImage); |
273 \o Image.Ready - the image has been loaded |
273 \o Image.Ready - the image has been loaded |
274 \o Image.Loading - the image is currently being loaded |
274 \o Image.Loading - the image is currently being loaded |
275 \o Image.Error - an error occurred while loading the image |
275 \o Image.Error - an error occurred while loading the image |
276 \endlist |
276 \endlist |
277 |
277 |
278 Note that a change in the status property does not cause anything to happen |
|
279 (although it reflects what has happened with the image internally). If you wish |
|
280 to react to the change in status you need to do it yourself, for example in one |
|
281 of the following ways: |
|
282 |
|
283 Use this status to provide an update or respond to the status change in some way. |
278 Use this status to provide an update or respond to the status change in some way. |
284 For example, you could: |
279 For example, you could: |
285 |
280 |
286 \e {Trigger a state change:} |
281 \e {Trigger a state change:} |
287 \qml |
282 \qml |
327 */ |
322 */ |
328 |
323 |
329 /*! |
324 /*! |
330 \qmlproperty QSize Image::sourceSize |
325 \qmlproperty QSize Image::sourceSize |
331 |
326 |
332 This property holds the size of the loaded image, in pixels. |
327 This property holds the actual width and height of the loaded image. |
333 |
328 |
334 This is used to control the storage used by a loaded image. Unlike |
329 Unlike the \l {Item::}{width} and \l {Item::}{height} properties, which scale |
335 the width and height properties, which scale the painting of the image, this property |
330 the painting of the image, this property sets the actual number of pixels |
336 affects the number of pixels stored. |
331 stored for the loaded image so that large images do not use more |
|
332 memory than necessary. For example, this ensures the image is memory is no |
|
333 larger than 1024x1024 pixels, regardless of the Image's \l {Item::}{width} and |
|
334 \l {Item::}{height} values: |
|
335 |
|
336 \code |
|
337 Rectangle { |
|
338 width: ... |
|
339 height: ... |
|
340 |
|
341 Image { |
|
342 anchors.fill: parent |
|
343 source: "reallyBigImage.jpg" |
|
344 sourceSize.width: 1024 |
|
345 sourceSize.height: 1024 |
|
346 } |
|
347 } |
|
348 \endcode |
337 |
349 |
338 If the image's actual size is larger than the sourceSize, the image is scaled down. |
350 If the image's actual size is larger than the sourceSize, the image is scaled down. |
339 If only one dimension of the size is set to greater than 0, the |
351 If only one dimension of the size is set to greater than 0, the |
340 other dimension is set in proportion to preserve the source image's aspect ratio. |
352 other dimension is set in proportion to preserve the source image's aspect ratio. |
341 (The \l fillMode is independent of this.) |
353 (The \l fillMode is independent of this.) |
342 |
354 |
343 If the source is an instrinsically scalable image (eg. SVG), this property |
355 If the source is an instrinsically scalable image (eg. SVG), this property |
344 determines the size of the loaded image regardless of intrinsic size. |
356 determines the size of the loaded image regardless of intrinsic size. |
345 Avoid changing this property dynamically; rendering an SVG is \e slow compared |
357 Avoid changing this property dynamically; rendering an SVG is \e slow compared |
346 to an image. |
358 to an image. |
347 |
359 |
348 If the source is a non-scalable image (eg. JPEG), the loaded image will |
360 If the source is a non-scalable image (eg. JPEG), the loaded image will |
349 be no greater than this property specifies. For some formats (currently only JPEG), |
361 be no greater than this property specifies. For some formats (currently only JPEG), |
350 the whole image will never actually be loaded into memory. |
362 the whole image will never actually be loaded into memory. |
351 |
363 |
352 \note \e{Changing this property dynamically will lead to the image source being reloaded, |
364 \note \e {Changing this property dynamically causes the image source to be reloaded, |
353 potentially even from the network if it is not in the disk cache.} |
365 potentially even from the network, if it is not in the disk cache.} |
354 |
|
355 Here is an example that ensures the size of the image in memory is |
|
356 no larger than 1024x1024 pixels, regardless of the size of the Image element. |
|
357 |
|
358 \code |
|
359 Image { |
|
360 anchors.fill: parent |
|
361 source: "images/reallyBigImage.jpg" |
|
362 sourceSize.width: 1024 |
|
363 sourceSize.height: 1024 |
|
364 } |
|
365 \endcode |
|
366 |
|
367 The example below ensures the memory used by the image is no more than necessary |
|
368 to display the image at the size of the Image element. |
|
369 Of course if the Image element is resized a costly reload will be required, so |
|
370 use this technique \e only when the Image size is fixed. |
|
371 |
|
372 \code |
|
373 Image { |
|
374 anchors.fill: parent |
|
375 source: "images/reallyBigImage.jpg" |
|
376 sourceSize.width: width |
|
377 sourceSize.height: height |
|
378 } |
|
379 \endcode |
|
380 */ |
366 */ |
381 |
367 |
382 void QDeclarativeImage::updatePaintedGeometry() |
368 void QDeclarativeImage::updatePaintedGeometry() |
383 { |
369 { |
384 Q_D(QDeclarativeImage); |
370 Q_D(QDeclarativeImage); |
418 \qmlproperty url Image::source |
404 \qmlproperty url Image::source |
419 |
405 |
420 Image can handle any image format supported by Qt, loaded from any URL scheme supported by Qt. |
406 Image can handle any image format supported by Qt, loaded from any URL scheme supported by Qt. |
421 |
407 |
422 The URL may be absolute, or relative to the URL of the component. |
408 The URL may be absolute, or relative to the URL of the component. |
|
409 |
|
410 \sa QDeclarativeImageProvider |
423 */ |
411 */ |
424 |
412 |
425 /*! |
413 /*! |
426 \qmlproperty bool Image::asynchronous |
414 \qmlproperty bool Image::asynchronous |
427 |
415 |
428 Specifies that images on the local filesystem should be loaded |
416 Specifies that images on the local filesystem should be loaded |
429 asynchronously in a separate thread. The default value is |
417 asynchronously in a separate thread. The default value is |
430 false, causing the user interface thread to block while the |
418 false, causing the user interface thread to block while the |
431 image is loaded. Setting \a asynchronous to true is useful where |
419 image is loaded. Setting \a asynchronous to true is useful where |
432 maintaining a responsive user interface is more desireable |
420 maintaining a responsive user interface is more desirable |
433 than having images immediately visible. |
421 than having images immediately visible. |
434 |
422 |
435 Note that this property is only valid for images read from the |
423 Note that this property is only valid for images read from the |
436 local filesystem. Images loaded via a network resource (e.g. HTTP) |
424 local filesystem. Images loaded via a network resource (e.g. HTTP) |
437 are always loaded asynchonously. |
425 are always loaded asynchonously. |