整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          用css制作頭像漸變邊框

          前有一個頭像漸變邊框的需求,當時是全部用的切圖,但是不同的地方可能頭像大小不一樣,切圖適配性太差,正好這幾日學了下css漸變的各種妙用,想到之前的頭像邊框其實可以用漸變來實現。

          當時用到的頭像切圖:

          目前想到有兩種實現方式:

          • 用一個父盒子直接背景線性漸變,然后字里面的頭像圖片定位在內部就可以了
          • 直接用 border-image 來實現邊框漸變

          一、background 背景 linear-gradient 實現方式

          這個還是比較簡單,不過定位位置和圓角大小需要自己每次根據實際的尺寸來計算,而且感覺還額外多使用了一個 div 標簽,不是很優雅。

          二、border-image 實現方式

          但是這個 border-image 和 border-radius 不能同時使用,設置了邊框背景,圓角就自動失效了,所以最終做出來的是一個直接的邊框背景。

          這個樣子肯定是不闊以的了,然后 發了了 clip-path 這個裁切屬性,搞上去外圓角倒是又了,那里面圖片的內圓角呢?圖片還是個直角的,和需求有點不符。

          最終實現方式

          用 border-image 方式雖然少用了一個標簽,但是沒法同時實現內外圓角。最后只能在第一種方式上來進行優化,還是利用背景漸變的方式來實現,不過位置不用定位,直接用 padding 留出需要的邊框寬度就行了,不需要自己每次要去計算定位位置,不過圓角還是要去根據大小計算下的。

          、前言

          這個IP地址輸入框控件,估計寫爛了,網上隨便一搜索,保證一大堆,估計也是因為這個控件太容易了,非常適合新手練手,一般的思路都是用4個qlineedit控件拼起來,然后每個輸入框設置正則表達式過濾只能輸入3位數字,然后安裝事件過濾器識別回車自動跳到下一個輸入框。關于如何設置正則表達式過濾,這個可以搜索查到,本人也不大懂這個規則,貌似還有專門的書籍專門介紹正則表達式,可能這塊非常強大。

          開源地址:https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo

          二、實現的功能

          • 1:可設置IP地址,自動填入框
          • 2:可清空IP地址
          • 3:支持按下小圓點自動切換
          • 4:支持退格鍵自動切換
          • 5:支持IP地址過濾
          • 6:可設置背景色/邊框顏色/邊框圓角角度

          三、效果圖

          四、頭文件代碼

          #ifndef IPADDRESS_H
          #define IPADDRESS_H
          
          /**
           * IP地址輸入框控件 作者:feiyangqingyun(QQ:517216493) 2017-8-11
           * 1:可設置IP地址,自動填入框
           * 2:可清空IP地址
           * 3:支持按下小圓點自動切換
           * 4:支持退格鍵自動切換
           * 5:支持IP地址過濾
           * 6:可設置背景色/邊框顏色/邊框圓角角度
           */
          
          #include <QWidget>
          
          class QLabel;
          class QLineEdit;
          
          #ifdef quc
          #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
          #include <QtDesigner/QDesignerExportWidget>
          #else
          #include <QtUiPlugin/QDesignerExportWidget>
          #endif
          
          class QDESIGNER_WIDGET_EXPORT IPAddress : public QWidget
          #else
          class IPAddress : public QWidget
          #endif
          
          {
              Q_OBJECT
              Q_PROPERTY(QString ip READ getIP WRITE setIP)
          
          public:
              explicit IPAddress(QWidget *parent = 0);
          
          protected:
              bool eventFilter(QObject *watched, QEvent *event);
          
          private:
              QLabel *labDot1;    //第一個小圓點
              QLabel *labDot2;    //第二個小圓點
              QLabel *labDot3;    //第三個小圓點
          
              QLineEdit *txtIP1;  //IP地址網段輸入框1
              QLineEdit *txtIP2;  //IP地址網段輸入框2
              QLineEdit *txtIP3;  //IP地址網段輸入框3
              QLineEdit *txtIP4;  //IP地址網段輸入框4
          
              QString ip;         //IP地址
              QString bgColor;    //背景顏色
              QString borderColor;//邊框顏色
              int borderRadius;   //邊框圓角角度
          
          private slots:
              void textChanged(const QString &text);
          
          public:
              //獲取IP地址
              QString getIP()                 const;
          
              QSize sizeHint()                const;
              QSize minimumSizeHint()         const;
          
          public Q_SLOTS:
              //設置IP地址
              void setIP(const QString &ip);
              //清空
              void clear();
          
              //設置背景顏色
              void setBgColor(const QString &bgColor);
              //設置邊框顏色
              void setBorderColor(const QString &borderColor);
              //設置邊框圓角角度
              void setBorderRadius(int borderRadius);
          
          };
          
          #endif // IPADDRESS_H
          
          
          

          【領QT開發教程學習資料,點擊下方鏈接莬費領取↓↓,先碼住不迷路~】

          點擊這里:Qt資料領取(視頻教程+文檔+代碼+項目實戰)

          五、核心代碼

          #pragma execution_character_set("utf-8")
          
          #include "ipaddress.h"
          #include "qlabel.h"
          #include "qlineedit.h"
          #include "qboxlayout.h"
          #include "qregexp.h"
          #include "qvalidator.h"
          #include "qevent.h"
          #include "qdebug.h"
          
          IPAddress::IPAddress(QWidget *parent) : QWidget(parent)
          {
              bgColor = "#FFFFFF";
              borderColor = "#A6B5B8";
              borderRadius = 3;
          
              //用于顯示小圓點的標簽,居中對齊
              labDot1 = new QLabel;
              labDot1->setAlignment(Qt::AlignCenter);
              labDot1->setText(".");
          
              labDot2 = new QLabel;
              labDot2->setAlignment(Qt::AlignCenter);
              labDot2->setText(".");
          
              labDot3 = new QLabel;
              labDot3->setAlignment(Qt::AlignCenter);
              labDot3->setText(".");
          
              //用于輸入IP地址的文本框,居中對齊
              txtIP1 = new QLineEdit;
              txtIP1->setObjectName("txtIP1");
              txtIP1->setAlignment(Qt::AlignCenter);
              txtIP1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
              connect(txtIP1, SIGNAL(textChanged(QString)), this, SLOT(textChanged(QString)));
          
              txtIP2 = new QLineEdit;
              txtIP2->setObjectName("txtIP2");
              txtIP2->setAlignment(Qt::AlignCenter);
              txtIP2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
              connect(txtIP2, SIGNAL(textChanged(QString)), this, SLOT(textChanged(QString)));
          
              txtIP3 = new QLineEdit;
              txtIP3->setObjectName("txtIP3");
              txtIP3->setAlignment(Qt::AlignCenter);
              txtIP3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
              connect(txtIP3, SIGNAL(textChanged(QString)), this, SLOT(textChanged(QString)));
          
              txtIP4 = new QLineEdit;
              txtIP4->setObjectName("txtIP4");
              txtIP4->setAlignment(Qt::AlignCenter);
              txtIP4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
              connect(txtIP4, SIGNAL(textChanged(QString)), this, SLOT(textChanged(QString)));
          
              //設置IP地址校驗過濾
              QRegExp regExp("(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2})");
              QRegExpValidator *validator = new QRegExpValidator(regExp, this);
              txtIP1->setValidator(validator);
              txtIP2->setValidator(validator);
              txtIP3->setValidator(validator);
              txtIP4->setValidator(validator);
          
              //綁定事件過濾器,識別鍵盤按下
              txtIP1->installEventFilter(this);
              txtIP2->installEventFilter(this);
              txtIP3->installEventFilter(this);
              txtIP4->installEventFilter(this);
          
              QFrame *frame = new QFrame;
              frame->setObjectName("frameIP");
          
              QStringList qss;
              qss.append(QString("QFrame#frameIP{border:1px solid %1;border-radius:%2px;}").arg(borderColor).arg(borderRadius));
              qss.append(QString("QLabel{min-width:15px;background-color:%1;}").arg(bgColor));
              qss.append(QString("QLineEdit{background-color:%1;border:none;}").arg(bgColor));
              qss.append(QString("QLineEdit#txtIP1{border-top-left-radius:%1px;border-bottom-left-radius:%1px;}").arg(borderRadius));
              qss.append(QString("QLineEdit#txtIP4{border-top-right-radius:%1px;border-bottom-right-radius:%1px;}").arg(borderRadius));
              frame->setStyleSheet(qss.join(""));
          
              QVBoxLayout *verticalLayout = new QVBoxLayout(this);
              verticalLayout->setMargin(0);
              verticalLayout->setSpacing(0);
              verticalLayout->addWidget(frame);
          
              //將控件按照橫向布局排列
              QHBoxLayout *layout = new QHBoxLayout(frame);
              layout->setMargin(0);
              layout->setSpacing(0);
              layout->addWidget(txtIP1);
              layout->addWidget(labDot1);
              layout->addWidget(txtIP2);
              layout->addWidget(labDot2);
              layout->addWidget(txtIP3);
              layout->addWidget(labDot3);
              layout->addWidget(txtIP4);
          }
          
          bool IPAddress::eventFilter(QObject *watched, QEvent *event)
          {
              if (event->type() == QEvent::KeyPress) {
                  QLineEdit *txt = (QLineEdit *)watched;
                  if (txt == txtIP1 || txt == txtIP2 || txt == txtIP3 || txt == txtIP4) {
                      QKeyEvent *key = (QKeyEvent *)event;
          
                      //如果當前按下了小數點則移動焦點到下一個輸入框
                      if (key->text() == ".") {
                          this->focusNextChild();
                      }
          
                      //如果按下了退格鍵并且當前文本框已經沒有了內容則焦點往前移
                      if (key->key() == Qt::Key_Backspace) {
                          if (txt->text().length() <= 1) {
                              this->focusNextPrevChild(false);
                          }
                      }
                  }
              }
          
              return QWidget::eventFilter(watched, event);
          }
          
          void IPAddress::textChanged(const QString &text)
          {
              int len = text.length();
              int value = text.toInt();
          
              //判斷當前是否輸入完成一個網段,是的話則自動移動到下一個輸入框
              if (len == 3) {
                  if (value >= 100 && value <= 255) {
                      this->focusNextChild();
                  }
              }
          
              //拼接成完整IP地址
              ip = QString("%1.%2.%3.%4").arg(txtIP1->text()).arg(txtIP2->text()).arg(txtIP3->text()).arg(txtIP4->text());
          }
          
          QString IPAddress::getIP() const
          {
              return this->ip;
          }
          
          QSize IPAddress::sizeHint() const
          {
              return QSize(250, 20);
          }
          
          QSize IPAddress::minimumSizeHint() const
          {
              return QSize(30, 10);
          }
          
          void IPAddress::setIP(const QString &ip)
          {
              //先檢測IP地址是否合法
              QRegExp regExp("((2[0-4]\\d|25[0-5]|[01]?\\d\\d?)\\.){3}(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)");
              if (!regExp.exactMatch(ip)) {
                  return;
              }
          
              if (this->ip != ip) {
                  this->ip = ip;
          
                  //將IP地址填入各個網段
                  QStringList list = ip.split(".");
                  txtIP1->setText(list.at(0));
                  txtIP2->setText(list.at(1));
                  txtIP3->setText(list.at(2));
                  txtIP4->setText(list.at(3));
              }
          }
          
          void IPAddress::clear()
          {
              txtIP1->clear();
              txtIP2->clear();
              txtIP3->clear();
              txtIP4->clear();
              txtIP1->setFocus();
          }
          
          void IPAddress::setBgColor(const QString &bgColor)
          {
              if (this->bgColor != bgColor) {
                  this->bgColor = bgColor;
              }
          }
          
          void IPAddress::setBorderColor(const QString &borderColor)
          {
              if (this->borderColor != borderColor) {
                  this->borderColor = borderColor;
              }
          }
          
          void IPAddress::setBorderRadius(int borderRadius)
          {
              if (this->borderRadius != borderRadius) {
                  this->borderRadius = borderRadius;
              }
          }
          
          
          

          六、控件介紹

          1. 超過160個精美控件,涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄,flatui、高亮按鈕、滑動選擇器、農歷等。遠超qwt集成的控件數量。
          2. 每個類都可以獨立成一個單獨的控件,零耦合,每個控件一個頭文件和一個實現文件,不依賴其他文件,方便單個控件以源碼形式集成到項目中,較少代碼量。qwt的控件類環環相扣,高度耦合,想要使用其中一個控件,必須包含所有的代碼。
          3. 全部純Qt編寫,QWidget+QPainter繪制,支持Qt4.6到Qt5.13的任何Qt版本,支持mingw、msvc、gcc等編譯器,支持任意操作系統比如windows+linux+mac+嵌入式linux等,不亂碼,可直接集成到Qt Creator中,和自帶的控件一樣使用,大部分效果只要設置幾個屬性即可,極為方便。
          4. 每個控件都有一個對應的單獨的包含該控件源碼的DEMO,方便參考使用。同時還提供一個所有控件使用的集成的DEMO。
          5. 每個控件的源代碼都有詳細中文注釋,都按照統一設計規范編寫,方便學習自定義控件的編寫。
          6. 每個控件默認配色和demo對應的配色都非常精美。
          7. 超過130個可見控件,6個不可見控件。
          8. 部分控件提供多種樣式風格選擇,多種指示器樣式選擇。
          9. 所有控件自適應窗體拉伸變化。
          10. 集成自定義控件屬性設計器,支持拖曳設計,所見即所得,支持導入導出xml格式。
          11. 自帶activex控件demo,所有控件可以直接運行在ie瀏覽器中。
          12. 集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個圖形字體,享受圖形字體帶來的樂趣。
          13. 所有控件最后生成一個動態庫文件(dll或者so等),可以直接集成到qtcreator中拖曳設計使用。
          14. 目前已經有qml版本,后期會考慮出pyqt版本,如果用戶需求量很大的話。
          15. 自定義控件插件開放動態庫使用(永久免費),無任何后門和限制,請放心使用。
          16. 目前已提供32個版本的dll,其中qt_5_7_0_mingw530_32這個版本會一直保證最新的完整的。
          17. 不定期增加控件和完善控件,不定期更新SDK,歡迎各位提出建議,謝謝!
          18. Qt入門書籍推薦霍亞飛的《Qt Creator快速入門》《Qt5編程入門》,Qt進階書籍推薦官方的《C++ GUI Qt4編程》。
          19. 強烈推薦程序員自我修養和規劃系列書《大話程序員》《程序員的成長課》《解憂程序員》,受益匪淺,受益終生!
          20. SDK地址:https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk

          原文鏈接:https://www.cnblogs.com/feiyangqingyun/p/11665022.html

          【領QT開發教程學習資料,點擊下方鏈接莬費領取↓↓,先碼住不迷路~】

          點擊這里:「鏈接」

          ue3 根據點擊位置,實現一個用戶頭像彈框定位

          需求背景

          最近在做直播后臺,涉及到對用戶的一些操作,比如關注/取關/禁言/踢出直播間。多個地方都要用,需要封裝一個彈框組件

          效果圖


          實現過程分析

          1. 根據點擊元素,獲取元素的位置
          2. 動態設置元素top,left位置

          top 和 left 如何獲取

          根據 點擊事件event參數,來獲取位置,根據需要來實際計算位置

          • 元素距離左邊的距離 + 元素本身的寬度

          獲取元素top/left,其實直接用getBoundingClientRect 里的bottom / right 即可


          代碼實現

          export const getCurrentDialogXY = (event: Event) => {
            const target = event.target as HTMLElement
            const { bottom, right } = target.getBoundingClientRect()
            return { bottom, right }
          }

          調用

          
          ```js
          const avatarHandler = (event: Event) => {
            const { right, bottom } = getCurrentDialogXY(event)
            currentX.value = right
            currentY.value = bottom
          }

          傳入子組件,在子組件內接收到left/top 重新定位即可

              <user-info-dialog
                  :left="currentX"
                  :top="currentY"
              />
          <div ref="userInfoRef" class="dialog-wrap" :style="{ top: top + 'px', left: left + 'px' }"></div>

          細節處理

          1. 通過設置,你會發現彈框始終定位在元素右下角,可以根據自身需求,設置元素位置

          通過監聽彈框的ref(彈框有顯示隱藏邏輯,所以監聽彈框的ref即可,然后動態設置位置),

          watchEffect(() => {
            const userInfoRefValue = userInfoRef.value
            if (userInfoRefValue) {
              const offsetHeight = userInfoRefValue.offsetHeight // 獲取彈框的高度
              const offsetWidth = userInfoRefValue.offsetWidth // 獲取元素的寬度
          
              // 不管彈框顯示是左側還是右側,根據需求 都需要 減去 彈框的高度 - 用戶頭像高度的一半 進行定位
                propTop.value = props.top - offsetHeight - userAvatarWidth.value / 2
                
              // 如果是彈框顯示在左側,需要減去彈框的寬度 - 頭像的寬度
              if (props.roleEnumType === 1) {
                propLeft.value = props.left - offsetWidth - userAvatarWidth.value
              }
            }
          })
          1. 彈框打開之后,要點擊所有位置,都可以關閉
          • 那我們就需要實現一個朦層(透明色),點擊朦層,觸發關閉即可


          你會發現,其實我們的整個元素,是直接在根節點上,根常規里的,每個彈框,必須要綁定在循環里,才能做一一對應的關系,怎么不太一樣呢? 這里是用到的

          vue3中的Teleport:將其插槽內容渲染到 DOM 中的另一個位置 這對于我們層級比較多,做全局定位,脫離當前元素,非常好用!!!


          主站蜘蛛池模板: 韩国福利一区二区三区高清视频| 东京热无码一区二区三区av | 久久无码一区二区三区少妇| 亚洲国产一区在线| 在线电影一区二区| 色偷偷一区二区无码视频| 中文字幕一区在线观看| 亚洲AV网一区二区三区| 偷拍激情视频一区二区三区| 国产精品免费一区二区三区四区| 麻豆精品一区二区综合av| 99久久精品午夜一区二区| 亚洲国产视频一区| 亚洲一区中文字幕在线观看| 丝袜人妻一区二区三区| 亚洲熟女乱综合一区二区| 无码精品蜜桃一区二区三区WW| 国产精品无码一区二区三区毛片| 精品国产a∨无码一区二区三区| 亚欧色一区W666天堂| 人妻无码一区二区三区AV| 日韩精品无码一区二区三区免费 | 亚洲国产欧美日韩精品一区二区三区 | 国模大胆一区二区三区| 色欲AV蜜桃一区二区三| 欧美一区内射最近更新| 天堂Av无码Av一区二区三区| 亚洲日韩中文字幕一区| 国产小仙女视频一区二区三区| 深田咏美AV一区二区三区| 日韩视频一区二区在线观看| 精品国产免费一区二区| 无码人妻精品一区二区三区99不卡| 精品天海翼一区二区| 国产精品一区二区久久精品无码| 精品人妻少妇一区二区三区在线| 国产午夜三级一区二区三| 一本大道东京热无码一区 | 国产福利一区二区| 国产精品一区12p| 亚洲成在人天堂一区二区|