如何在BB10中滾動實現GRID/TILED圖像視圖

我想要實現GRID/TILED圖像視圖，其中在下載後即時繪製圖像。我希望能夠在其中進行捏放/縮放和其他觸摸動作。說，如果我平移視圖，新的瓷磚將被加載並完全或部分地在視圖上繪製。我找不到任何現有UI控件的方法。此外，這些現有的UI控件不能被子類化，並且沒有任何paint（）/ onDraw方法（如android中的view/canvas）來覆蓋。可能是滾動視圖imageView可以解決這個問題。另一種選擇可能是使用外國的窗口。在這兩種情況下，我都不確定他們如何實施，或者在這些情況下如何處理手勢。或者如果還有其他方法可以這樣做。請給我一些見解來解決它。如何在BB10中滾動實現GRID/TILED圖像視圖

來源

2012-12-23 Tahlil

你要放大特定的圖像或整個網格視圖？ –

整個網格視圖！ – Tahlil

所以你想要從互聯網下載圖像然後顯示，對吧？ –

創建一個CustomImageView，用於從遠程加載圖像，並將該CustomImageView放入帶有GridListLayout的ListView中。您可以使用ListItemProvider類來自定義您的ListView。我已經爲以下所有必要的類提供了代碼。

//main.qml

import bb.cascades 1.0 
import my.library 1.0 //Custom library where CustomImageView and our ListProvider resides 

Page { 
    content: ScrollView { 
     gestureHandlers: [ 
      PinchHandler { 
       onPinchUpdated: { 
        scrollView.zoomToPoint(event.midPointX, event.midPointY, event.pinchRatio) 
       } 
      } 
     ] 
     id: scrollView 
     scrollViewProperties { 
      scrollMode: ScrollMode.None 
      pinchToZoomEnabled: true 
     } 
     ListView { 
      overlapTouchPolicy: OverlapTouchPolicy.Allow 
      objectName: "listView" 
      layout: GridListLayout { 
       columnCount: 2 
      } 
      listItemProvider: CustomImageViewProvider { //Our list item provider 
      } 
      listItemComponents: [ 
       ListItemComponent { 
        CustomImageView { //CustomImageView to load image from remote via internet 
        } 
       } 
      ] 
      dataModel: XmlDataModel { 
       source: "model/path.xml" 
      } 
     } 
    } 
}

//CustomImageView.cpp CustomControl經由互聯網來加載圖像形式的遠程位置

CustomImageView::CustomImageView(Container *parent) : 
    CustomControl(parent) { 
    Container *contentContainer = new Container(); 
    DockLayout *contentLayout = new DockLayout(); 
    contentContainer->setLayout(contentLayout); 

    mItemImage = ImageView::create(""); 
    mItemImage->setHorizontalAlignment(HorizontalAlignment::Fill); 
    mItemImage->setVerticalAlignment(VerticalAlignment::Fill); 

    contentContainer->add(mItemImage); 

    setRoot(contentContainer); 
} 

void CustomImageView::updateItem(const QString imagePath) { 
    WebServiceRequest *webServiceRequest = new WebServiceRequest(imagePath); 
    connect(webServiceRequest, SIGNAL(complete(QByteArray, bool)), this, 
      SLOT(onComplete(QByteArray, bool))); 
    webServiceRequest->getResponse(); 
} 

void CustomImageView::onComplete(QByteArray data, bool success) { 
    if (success) { 
     mItemImage->setImage(Image(data)); 
     mItemImage->setVisible(true); 
    } else { 
     qDebug() << "Request failed"; 
    } 
} 

void CustomImageView::select(bool select) { 
} 

void CustomImageView::reset(bool selected, bool activated) { 
    mItemImage->setVisible(false); 
} 

void CustomImageView::activate(bool activate) { 
}

//WebServiceRequest.cpp這個類由CustomImageView用於通過互聯網發送圖像請求

WebServiceRequest::WebServiceRequest(QString url) { 
    webServiceUrl = url; 
} 

WebServiceRequest::~WebServiceRequest() { 
} 

void WebServiceRequest::getResponse() { 
    QNetworkAccessManager* netManager = new QNetworkAccessManager(); 
    if (!netManager) { 
     qDebug() << "Unable to create QNetworkAccessManager!"; 
     emit complete("Unable to create QNetworkAccessManager!", false); 
     return; 
    } 

    QUrl url(webServiceUrl); 
    QNetworkRequest req(url); 

    QNetworkReply* ipReply = netManager->get(req); 
    connect(ipReply, SIGNAL(finished()), this, SLOT(onReply())); 
} 

void WebServiceRequest::onReply() { 
    QNetworkReply* reply = qobject_cast<QNetworkReply*>(sender()); 
    QString response; 
    bool success = false; 
    if (reply) { 
     if (reply->error() == QNetworkReply::NoError) { 
      int available = reply->bytesAvailable(); 
      if (available > 0) { 
       success = true; 
       emit complete(reply->readAll(), success); 
      } 
     } else { 
      response = 
        QString("Error: ") + reply->errorString() 
         + QString(" status:") 
         + reply->attribute(
            QNetworkRequest::HttpStatusCodeAttribute).toString(); 
     } 
     reply->deleteLater(); 
    } 
}

//CustomImageViewProvider.cpp這是用來定製我們的ListView

CustomImageViewProvider::CustomImageViewProvider() { 
} 

VisualNode * CustomImageViewProvider::createItem(ListView* list, 
     const QString &type) { 
    CustomImageView *myCustomImageView = new CustomImageView(); 
    return myCustomImageView; 
} 

void CustomImageViewProvider::updateItem(ListView* list, 
     bb::cascades::VisualNode *listItem, const QString &type, 
     const QVariantList &indexPath, const QVariant &data) { 
    QVariantMap map = data.value<QVariantMap>(); 
    CustomImageView *myCustomImageView = static_cast<CustomImageView *>(listItem); 
    qDebug() << indexPath; 
    QString imagePath = map["path"].toString(); 
    myCustomImageView->updateItem(imagePath); 
}

註冊CustomImageView & CustomImageViewProvider與QML創建和設置main.qml的根在構造函數之前我們ListItemProvider。所以，他們在我們的QML

qmlRegisterType <CustomImageView> ("my.library", 1, 0, "CustomImageView"); 
qmlRegisterType <CustomImageViewProvider> ("my.library", 1, 0, "CustomImageViewProvider");

// Path.xml所有可用路徑都存儲在這個文件，該文件在列表視圖中使用的DataModel

<root> 
    <image path="http://upload.wikimedia.org/wikipedia/commons/e/eb/A_landscape_in_Peradeniya,_Sri_Lanka.jpg"/> 
    <image path="http://lejournaldelaphotographie.com/system/photos/54840/med_fernando-brito_lost-in-the-landscape_1-jpg.jpg"/> 
    <image path="http://st.houzz.com/simgs/17713aee00b8b8b7_15-7678/modern-landscape.jpg"/> 

    <image path="http://cdn.c.photoshelter.com/img-get/I0000kRJbKDHBT30/s/900/720/Landscape-sunset-15.jpg"/> 
    <image path="http://www.cashmoredesign.com/images/large/landscape-5.jpg"/> 
    <image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/11/50b7d0ddb3fc4b239a0000f2_arteology-atelier-37-2_-atelier37-2_arteologie-34-528x396.jpg"/> 

    <image path="http://upload.wikimedia.org/wikipedia/en/e/e8/Berchem,_Nicolaes_~_Landscape_with_Herdsmen_Gathering_Sticks,_early_1650s,_oil_on_panel,_private_collection,_New_York.jpg"/> 
    <image path="http://www.taschen.com/media/images/960/teaser_mi_arch_now_landscape_top_1203301047_id_536230.jpg"/> 
    <image path="http://lasersandlights.com/images/medium/landscape%20bliss%20spright.jpg"/> 

    <image path="http://uploads0.wikipaintings.org/images/pieter-bruegel-the-elder/landscape-with-the-flight-into-egypt-1563.jpg"/> 
    <image path="http://middo.me/wp-content/uploads/2012/07/Landscape-with-calm-river-1024x640.jpg"/> 
    <image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/07/500de84928ba0d609d000038_fort-werk-aan-t-spoel-rietveld-landscape_rob6999kopierl-528x352.jpg"/> 

     <image path="http://upload.wikimedia.org/wikipedia/commons/e/eb/A_landscape_in_Peradeniya,_Sri_Lanka.jpg"/> 
    <image path="http://lejournaldelaphotographie.com/system/photos/54840/med_fernando-brito_lost-in-the-landscape_1-jpg.jpg"/> 
    <image path="http://st.houzz.com/simgs/17713aee00b8b8b7_15-7678/modern-landscape.jpg"/> 

    <image path="http://cdn.c.photoshelter.com/img-get/I0000kRJbKDHBT30/s/900/720/Landscape-sunset-15.jpg"/> 
    <image path="http://www.cashmoredesign.com/images/large/landscape-5.jpg"/> 
    <image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/11/50b7d0ddb3fc4b239a0000f2_arteology-atelier-37-2_-atelier37-2_arteologie-34-528x396.jpg"/> 

    <image path="http://upload.wikimedia.org/wikipedia/en/e/e8/Berchem,_Nicolaes_~_Landscape_with_Herdsmen_Gathering_Sticks,_early_1650s,_oil_on_panel,_private_collection,_New_York.jpg"/> 
    <image path="http://www.taschen.com/media/images/960/teaser_mi_arch_now_landscape_top_1203301047_id_536230.jpg"/> 
    <image path="http://lasersandlights.com/images/medium/landscape%20bliss%20spright.jpg"/> 

    <image path="http://uploads0.wikipaintings.org/images/pieter-bruegel-the-elder/landscape-with-the-flight-into-egypt-1563.jpg"/> 
    <image path="http://middo.me/wp-content/uploads/2012/07/Landscape-with-calm-river-1024x640.jpg"/> 
    <image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/07/500de84928ba0d609d000038_fort-werk-aan-t-spoel-rietveld-landscape_rob6999kopierl-528x352.jpg"/> 

     <image path="http://upload.wikimedia.org/wikipedia/commons/e/eb/A_landscape_in_Peradeniya,_Sri_Lanka.jpg"/> 
    <image path="http://lejournaldelaphotographie.com/system/photos/54840/med_fernando-brito_lost-in-the-landscape_1-jpg.jpg"/> 
    <image path="http://st.houzz.com/simgs/17713aee00b8b8b7_15-7678/modern-landscape.jpg"/> 

    <image path="http://cdn.c.photoshelter.com/img-get/I0000kRJbKDHBT30/s/900/720/Landscape-sunset-15.jpg"/> 
    <image path="http://www.cashmoredesign.com/images/large/landscape-5.jpg"/> 
    <image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/11/50b7d0ddb3fc4b239a0000f2_arteology-atelier-37-2_-atelier37-2_arteologie-34-528x396.jpg"/> 

    <image path="http://upload.wikimedia.org/wikipedia/en/e/e8/Berchem,_Nicolaes_~_Landscape_with_Herdsmen_Gathering_Sticks,_early_1650s,_oil_on_panel,_private_collection,_New_York.jpg"/> 
    <image path="http://www.taschen.com/media/images/960/teaser_mi_arch_now_landscape_top_1203301047_id_536230.jpg"/> 
    <image path="http://lasersandlights.com/images/medium/landscape%20bliss%20spright.jpg"/> 

    <image path="http://uploads0.wikipaintings.org/images/pieter-bruegel-the-elder/landscape-with-the-flight-into-egypt-1563.jpg"/> 
    <image path="http://middo.me/wp-content/uploads/2012/07/Landscape-with-calm-river-1024x640.jpg"/> 
    <image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/07/500de84928ba0d609d000038_fort-werk-aan-t-spoel-rietveld-landscape_rob6999kopierl-528x352.jpg"/> 

     <image path="http://upload.wikimedia.org/wikipedia/commons/e/eb/A_landscape_in_Peradeniya,_Sri_Lanka.jpg"/> 
    <image path="http://lejournaldelaphotographie.com/system/photos/54840/med_fernando-brito_lost-in-the-landscape_1-jpg.jpg"/> 
    <image path="http://st.houzz.com/simgs/17713aee00b8b8b7_15-7678/modern-landscape.jpg"/> 

    <image path="http://cdn.c.photoshelter.com/img-get/I0000kRJbKDHBT30/s/900/720/Landscape-sunset-15.jpg"/> 
    <image path="http://www.cashmoredesign.com/images/large/landscape-5.jpg"/> 
    <image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/11/50b7d0ddb3fc4b239a0000f2_arteology-atelier-37-2_-atelier37-2_arteologie-34-528x396.jpg"/> 

    <image path="http://upload.wikimedia.org/wikipedia/en/e/e8/Berchem,_Nicolaes_~_Landscape_with_Herdsmen_Gathering_Sticks,_early_1650s,_oil_on_panel,_private_collection,_New_York.jpg"/> 
    <image path="http://www.taschen.com/media/images/960/teaser_mi_arch_now_landscape_top_1203301047_id_536230.jpg"/> 
    <image path="http://lasersandlights.com/images/medium/landscape%20bliss%20spright.jpg"/> 

    <image path="http://uploads0.wikipaintings.org/images/pieter-bruegel-the-elder/landscape-with-the-flight-into-egypt-1563.jpg"/> 
    <image path="http://middo.me/wp-content/uploads/2012/07/Landscape-with-calm-river-1024x640.jpg"/> 
    <image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/07/500de84928ba0d609d000038_fort-werk-aan-t-spoel-rietveld-landscape_rob6999kopierl-528x352.jpg"/> 
</root>

來源

2012-12-28 12:21:22

感謝您在CustomImageViewProvider.cpp中的回覆:)您已經編寫了CustomImageView * myCustomImageView = new CustomImageView（） ;'但CustomImageView在其構造函數中將一個Container作爲參數？ – Tahlil

CustomImageView構造函數中容器的對象是可選參數。在hpp文件中聲明const **爲** CustomImageView（Container * parent = 0）; **。它將採用0作爲默認值。 –

這是很好的解決方案。感謝分享 – pranavjayadev

如何在BB10中滾動實現GRID/TILED圖像視圖

回答

相關問題