src/declarative/graphicsitems/qdeclarativeimage.cpp
changeset 33 3e2da88830cd
parent 30 5dc02b23752f
child 37 758a864f9613
equal deleted inserted replaced
30:5dc02b23752f 33:3e2da88830cd
    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
    93     Example:
    97     Example:
    94     \qml
    98     \qml
    95     Image { source: "pics/star.png" }
    99     Image { source: "pics/star.png" }
    96     \endqml
   100     \endqml
    97 
   101 
    98     A QDeclarativeImage object can be instantiated in Qml using the tag \l Image.
   102     A QDeclarativeImage object can be instantiated in QML using the tag \l Image.
    99 */
   103 */
   100 
   104 
   101 QDeclarativeImage::QDeclarativeImage(QDeclarativeItem *parent)
   105 QDeclarativeImage::QDeclarativeImage(QDeclarativeItem *parent)
   102     : QDeclarativeImageBase(*(new QDeclarativeImagePrivate), parent)
   106     : QDeclarativeImageBase(*(new QDeclarativeImagePrivate), parent)
   103 {
   107 {
   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);
   136 }
   131 }
   137 
   132 
   138 void QDeclarativeImagePrivate::setPixmap(const QPixmap &pixmap)
   133 void QDeclarativeImagePrivate::setPixmap(const QPixmap &pixmap)
   139 {
   134 {
   140     Q_Q(QDeclarativeImage);
   135     Q_Q(QDeclarativeImage);
   141     pix = pixmap;
   136     pix.setPixmap(pixmap);
   142 
   137 
   143     q->setImplicitWidth(pix.width());
   138     q->setImplicitWidth(pix.width());
   144     q->setImplicitHeight(pix.height());
   139     q->setImplicitHeight(pix.height());
   145     status = pix.isNull() ? QDeclarativeImageBase::Null : QDeclarativeImageBase::Ready;
   140     status = pix.isNull() ? QDeclarativeImageBase::Null : QDeclarativeImageBase::Ready;
   146 
   141 
   195     Image {
   190     Image {
   196         width: 130; height: 100
   191         width: 130; height: 100
   197         fillMode: Image.PreserveAspectCrop
   192         fillMode: Image.PreserveAspectCrop
   198         smooth: true
   193         smooth: true
   199         source: "qtlogo.png"
   194         source: "qtlogo.png"
       
   195         clip: true
   200     }
   196     }
   201     \endqml
   197     \endqml
   202 
   198 
   203     \row
   199     \row
   204     \o \image declarative-qtlogo-tile.png
   200     \o \image declarative-qtlogo-tile.png
   216     \o TileVertically
   212     \o TileVertically
   217     \qml
   213     \qml
   218     Image {
   214     Image {
   219         width: 120; height: 120
   215         width: 120; height: 120
   220         fillMode: Image.TileVertically
   216         fillMode: Image.TileVertically
       
   217         smooth: true
   221         source: "qtlogo.png"
   218         source: "qtlogo.png"
   222     }
   219     }
   223     \endqml
   220     \endqml
   224 
   221 
   225     \row
   222     \row
   227     \o TileHorizontally
   224     \o TileHorizontally
   228     \qml
   225     \qml
   229     Image {
   226     Image {
   230         width: 120; height: 120
   227         width: 120; height: 120
   231         fillMode: Image.TileHorizontally
   228         fillMode: Image.TileHorizontally
       
   229         smooth: true
   232         source: "qtlogo.png"
   230         source: "qtlogo.png"
   233     }
   231     }
   234     \endqml
   232     \endqml
   235 
   233 
   236     \endtable
   234     \endtable
       
   235 
       
   236     \sa {declarative/imageelements/image}{Image example}
   237 */
   237 */
   238 QDeclarativeImage::FillMode QDeclarativeImage::fillMode() const
   238 QDeclarativeImage::FillMode QDeclarativeImage::fillMode() const
   239 {
   239 {
   240     Q_D(const QDeclarativeImage);
   240     Q_D(const QDeclarativeImage);
   241     return d->fillMode;
   241     return d->fillMode;
   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.
   518 }
   506 }
   519 
   507 
   520 void QDeclarativeImage::pixmapChange()
   508 void QDeclarativeImage::pixmapChange()
   521 {
   509 {
   522     updatePaintedGeometry();
   510     updatePaintedGeometry();
   523     emit pixmapChanged();
       
   524 }
   511 }
   525 
   512 
   526 QT_END_NAMESPACE
   513 QT_END_NAMESPACE