我想实现 GRID/TILED 图像视图，其中瓷砖图像将在下载后动态绘制。我希望能够在其中进行捏合/缩放和其他触摸操作。说，如果我平移视图，新的图块将被加载并完全或部分地绘制在视图上。我找不到使用任何现有 UI 控件的方法。此外，那些现有的 UI 控件不能被子类化，并且没有任何 paint()/onDraw 方法（如 android 中的 view/canvas）可以覆盖。可能是imageView和scrollview可以解决问题。另一个选项可能是使用外部窗口。在这两种情况下，我不确定如何实现它们或在这些情况下如何处理手势。或者是否有任何其他方法可以做到这一点。请给我一些见解来解决它。
问问题
2713 次
1 回答
10
创建一个 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这是我们的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所有路径都存储在这个文件中，该文件用作列表视图中的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-28T12:21:22.900 回答