我想实现GRID / TILED Image View，在下载后将即时绘制平铺图像。我希望能够在其中进行捏/缩放和其他触摸操作。说，如果我平移 View ，新的图块将全部或部分加载并绘制在 View 上。我找不到使用任何现有UI控件执行此操作的方法。同样，这些现有的UI控件也不能被子类化，并且没有要覆盖的任何paint()/ onDraw方法(例如android中的view / canvas)。可能是imageView与scrollview可以解决问题。另一个选项可能是使用外部窗口。在这两种情况下，我都不确定如何实现它们或在这些情况下如何处理手势，或者是否有其他方法可以实现。请给我一些见解来解决它。
最佳答案
创建一个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通过Internet加载图像表单远程位置
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 这是我们的ListItemProvider，用于自定义我们的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);
}
在构造函数中创建和设置main.qml的根之前，请先向qml注册CustomImageView＆CustomImageViewProvider。这样它们就可以在我们的qml中使用
qmlRegisterType < CustomImageView > ("my.library", 1, 0, "CustomImageView");
qmlRegisterType < CustomImageViewProvider > ("my.library", 1, 0, "CustomImageViewProvider");
// Path.xml 所有路径都存储在此文件中，该文件在列表 View 中用作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>
关于c++ - 如何在BB10中滚动实现GRID/TILED ImageView ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14009707/