一、前言

地圖按鈕很常見，這也是用戶給錢就干的一個模塊。設(shè)備現(xiàn)場提供了對應(yīng)的地圖文件，其實就是圖片文件，做的簡單點就是直接CAD圖紙轉(zhuǎn)成jpg，做的精致點就是搞了3D風(fēng)格的立體樣式圖片，其實還是圖片，并不是真正的3D，看起來像是3D的感覺。很多人看到效果圖都來問這個3D怎么實現(xiàn)的，真正的3D實現(xiàn)都非常復(fù)雜，需要懂opengl，網(wǎng)頁上用的是webgl，當(dāng)然也有不少的輪子可以直接使用。

地圖按鈕就是一個終端傳感器作為一個按鈕點，分布在對應(yīng)的圖片文件上，其實就是父類設(shè)置為label，label顯示對應(yīng)的圖片。圖片大小的算法，目前采用的當(dāng)前分辨率計算，當(dāng)前分辨率減去上下左右的尺寸就是圖片應(yīng)該的尺寸，拉伸填充顯示，所以要求用戶提供的圖片最好按照現(xiàn)場電腦的分辨率比例來設(shè)置，這樣不會顯得拉伸變形，后期這一塊需要改進算法，難點就是按鈕在設(shè)置界面的相對位置不好計算，除非是繪制上去的。

地圖按鈕幾個特色功能：

• 從內(nèi)存中而不是文件取圖片顯示，響應(yīng)速度微秒級別。
• 報警自動切換到對應(yīng)的地圖。
• 不同狀態(tài)不同顏色顯示，報警紅色或者黃色閃爍。
• 按鈕位置在編輯狀態(tài)下，任意拖動，自動保存。
• 提供縮略圖導(dǎo)航，可手動切換。
• 在線狀態(tài)顯示對應(yīng)的值和單位符號，離線狀態(tài)顯示位置編號。

二、功能特點

2.1 軟件模塊

2.2 基礎(chǔ)功能

2.3 特色功能

三、體驗地址

四、效果圖

五、相關(guān)代碼

void DeviceHelper::initDeviceButton(QLabel *label){ if (labMap == NULL) { return; } //先清空原來的 bool isMain = (labMap == label); if (isMain) { qDeleteAll(btns); btns.clear(); } else { qDeleteAll(btns2); btns2.clear(); } for (int i = 0; i setButtonStyle(DeviceButton::ButtonStyle_Msg2); btn->resize(AppData::DeviceWidth, AppData::DeviceHeight); btn->setText(QString(“%1”).arg(DbData::NodeInfo_PositionID.at(i))); btn->setButtonColor(isMain ? DeviceButton::ButtonColor_Black : DeviceButton::ButtonColor_Green); btn->setCanMove(!isMain); //設(shè)置弱屬性 btn->setProperty(“nodeID”, DbData::NodeInfo_NodeID.at(i)); btn->setProperty(“positionID”, DbData::NodeInfo_PositionID.at(i)); btn->setProperty(“deviceName”, DbData::NodeInfo_DeviceName.at(i)); btn->setProperty(“nodeName”, DbData::NodeInfo_NodeName.at(i)); btn->setProperty(“nodeAddr”, DbData::NodeInfo_NodeAddr.at(i)); btn->setProperty(“nodeType”, DbData::NodeInfo_NodeType.at(i)); btn->setProperty(“nodeSign”, DbData::NodeInfo_NodeSign.at(i)); btn->setProperty(“nodeImage”, DbData::NodeInfo_NodeImage.at(i)); //設(shè)置位置 int x = DbData::NodeInfo_NodeX.at(i); int y = DbData::NodeInfo_NodeY.at(i); btn->move(x, y); if (isMain) { btns << btn; QObject::connect(btn, SIGNAL(doubleClicked()), AppEvent::Instance(), SLOT(slot_doubleClicked())); } else { btns2 height(); QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); //繪制背景圖 QImage img(imgName); if (!img.isNull()) { img = img.scaled(width, height, Qt::IgnoreAspectRatio, Qt::SmoothTransformation); painter.drawImage(0, 0, img); } //計算字體 QFont font; font.setPixelSize(height * 0.37); font.setBold(true); //自動計算文字繪制區(qū)域,繪制防區(qū)號 QRectF rect = this->rect(); if (buttonStyle == ButtonStyle_Police) { double y = (30 * height / 60); rect = QRectF(0, y, width, height – y); } else if (buttonStyle == ButtonStyle_Bubble) { double y = (8 * height / 60); rect = QRectF(0, 0, width, height – y); } else if (buttonStyle == ButtonStyle_Bubble2) { double y = (13 * height / 60); rect = QRectF(0, 0, width, height – y); font.setPixelSize(width * 0.33); } else if (buttonStyle == ButtonStyle_Msg) { double y = (17 * height / 60); rect = QRectF(0, 0, width, height – y); } else if (buttonStyle == ButtonStyle_Msg2) { double y = (17 * height / 60); rect = QRectF(0, 0, width, height – y); } //繪制文字標(biāo)識 painter.setFont(font); painter.setPen(Qt::white); painter.drawText(rect, Qt::AlignCenter, text);}bool DeviceButton::eventFilter(QObject *watched, QEvent *event){ //識別鼠標(biāo) 按下+移動+松開+雙擊 等事件 QMouseEvent *mouseEvent = static_cast(event); if (event->type() == QEvent::MouseButtonPress) { //限定鼠標(biāo)左鍵 if (mouseEvent->button() == Qt::LeftButton) { lastPoint = mouseEvent->pos(); isPressed = true; emit clicked(); return true; } } else if (event->type() == QEvent::MouseMove) { //允許拖動并且鼠標(biāo)按下準(zhǔn)備拖動 if (canMove && isPressed) { int dx = mouseEvent->pos().x() – lastPoint.x(); int dy = mouseEvent->pos().y() – lastPoint.y(); this->move(this->x() + dx, this->y() + dy); return true; } } else if (event->type() == QEvent::MouseButtonRelease) { isPressed = false; } else if (event->type() == QEvent::MouseButtonDblClick) { emit doubleClicked(); } return QWidget::eventFilter(watched, event);}