精华内容
下载资源
问答
  • 在图片上增加提示箭头和文字
    2021-06-09 08:58:32

    我们知道,一般网页中的箭头大多是图片图标,字体图标流行以后也有很多改用字体图标。而实际上用CSS即可绘制出各种箭头,无需裁剪图片,甚至没有用到CSS3,所以浏览器兼容性良好。

    基本原理

    原理非常简单,通过截取border(边框)的部分“拐角”实现,几行CSS代码即可搞定。

    绘制梯形

    当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形,不理解?我们来看实例:

    #demo11 {

    border: 10px solid #000;

    border-left-color: #f00;

    width: 10px;

    height: 10px;

    }

    绘制三角形

    实例宽高均为10像素,当元素宽、高为0,且其他边为透明或与背景颜色相同时,就可以形一个三角形,至此小箭头已成,来看实例:

    #demo12 {

    border: 10px solid transparent;

    border-left-color: #f00;

    width: 0;

    height: 0;

    }

    改变各个边的宽度,即通过调整“边框”厚度则可以配置出任意角度,调整显示哪一条边框则可以决定箭头方向:

    #demo14 {

    border: 10px solid transparent;

    border-right: 20px solid #f00;

    width: 0;

    height: 0;

    }

    如果不想改变原有的DOM结构和增加新的标签,三角形还可以通过伪元素绘制出:原本内容

    #demo15{

    position: relative;

    }

    #demo15:after {

    border: 10px solid transparent;

    border-left: 10px solid #f00;

    width: 0;

    height: 0;

    position: absolute;

    content: ' '

    }

    既然用到了伪元素,那么我们就可以通过伪元素绘制出2个三角形,其中一个与背景色相同错开1个像素覆盖有颜色部分箭头,即可形成三角线,下面来看三角线分割的Tab页实例:

    • 文字内容 Tab1
    • 文字内容 Tab2
    • 文字内容 Tab3

    #demo17{

    font-size: 10px;

    height: 24px;

    }

    #demo17 li {

    float: left;

    position: relative;

    list-style: none;

    margin: 0 20px 12px -19px;

    border-top: solid 1px #ddd;

    border-bottom: solid 1px #ddd;

    padding-left: 12px;

    }

    #demo17 li:after, #demo17 li:before {

    border: 10px solid transparent;

    border-left: 10px solid #fff;

    width: 0;

    height: 0;

    position: absolute;

    top: 0;

    right: -18px;

    content: ' '

    }

    #demo17 li:before {

    border-left-color: #ddd;

    right: -19px;

    }

    最后再介绍一种组合效果,模仿聊天对话框,使用三角形跟矩形组合成提示框:

    #demo {

    width: 100px;

    height: 100px;

    background-color: #ccc;

    position: relative;

    border: 4px solid #333;

    }

    #demo:after, #demo:before {

    border: solid transparent;

    content: ' ';

    height: 0;

    left: 100%;

    position: absolute;

    width: 0;

    }

    #demo:after {

    border-width: 9px;

    border-left-color: #ccc;

    top: 15px;

    }

    #demo:before {

    border-width: 14px;

    border-left-color: #333;

    top: 10px;

    }

    更多相关内容
  • 本文目的:编辑自定义控件的界面ui,并在图片上文字箭头、曲线、打开、保存等功能。并说明了如何去使用这个编辑好的ui界面控件! 上次简单的说明了如何去创建Qt自定义控件,当时还是对其了解不够深刻,现在看来...

    本文目的:编辑自定义控件的界面ui,并在图片上添文字、箭头、曲线、打开、保存等功能。并说明了如何去使用这个编辑好的ui界面控件!

    上次简单的说明了如何去创建Qt自定义控件,当时还是对其了解不够深刻,现在看来,QT自定义控件就是你事先把界面写好(一般基于QWidget基类),然后再把它写入QT自定义控件的工程【可参考Qt自定义控件的创建与初步使用(一)这篇博客】中去,最后放到别的工程中,通过简单的拖拽和拷贝就可以用了。那怎么样去做和使用这个自定义的控件呢?又要注意什么呢?具体分为三大步,下面给大家娓娓道来!

     

    配置:Qt creator5.7,Qt 5.7+VS2013(64位)(有人喜欢用后者,全凭个人爱好,我用的是creator),本篇案例的说明用的是Qt5.6(因为本人的电脑装的是Qt5.6,公司的电脑装的是Qt5.7),建议最好用Qt5.7,但实际操作中不会有太大差别。

    一、建立基类是QWidget的Qt Application工程,把界面写好。
    1.建立一个Qt Application工程,命名为 sof_Interface,基类是QWidget,然后一路下一步,这样你就完成了一个工程的创建(先在这个工程上把需要的界面写好)

    2.打开.ui界面,此处为5个功能:打开图片、保存图片、在图片上添加文字、曲线、箭头符号。拖拽5个pushbotton、1个QLabel、1个QLineEdit、1个QDialogbottonbox,并按图所示排号界面,并选中,右键点击转到槽,从而创建相关的槽函数。并添加代码。

    sof_Interface.h代码

     

    <span style="font-family:Times New Roman;font-size:14px;">#ifndef SOF_INTERFACE_H
    #define SOF_INTERFACE_H
    
    #include <QWidget>
    #include <QAbstractButton>
    namespace Ui {
    class sof_Interface;
    }
    
    class sof_Interface : public QWidget
    {
        Q_OBJECT
    
    public:
        explicit sof_Interface(QWidget *parent = 0);
        ~sof_Interface();
    
        void paint(QImage&theImage);
        enum Type{
            type1,
            type2,
            type3,
        };
    
    private slots:
        void on_doOpen_clicked();//打开图片
        void on_doSave_clicked();//保存图片
        void on_buttonBox_clicked(QAbstractButton *button);//ok、cancel
        void on_mou_Track_clicked();//曲线
        void on_arrow_Edit_clicked();//箭头
        void on_text_Edit_clicked();//文字
    private:
        Ui::sof_Interface *ui;
        QString curFile;                      //打开文件名
        bool isOpen;
        Type path_type;                       //画的图形种类
        QImage  image,tempImage;              //原图、缓存图片
        QPixmap pic;                          //用于显示图片
        bool isDrawing;
        QPoint begin,end;
        QPoint end_pos;                       //鼠标释放时的位置
        QString Text;                         //存储文字变量
    protected:
     void mousePressEvent(QMouseEvent *e);    //鼠标按下事件
     void mouseMoveEvent(QMouseEvent *e);     //鼠标移动事件
     void mouseReleaseEvent(QMouseEvent *e);  //鼠标释放事
     void paintEvent(QPaintEvent *);          //重绘事件
    };
    
    #endif // SOF_INTERFACE_H
    </span>

    sof_Interface.cpp中代码

    <span style="font-family:Times New Roman;font-size:14px;">#include "sof_interface.h"
    #include "ui_sof_interface.h"
    #include <QFileDialog>
    #include <QPainter>
    #include <QMessageBox>
    #include <QMouseEvent>
    #include <QlineEdit>
    sof_Interface::sof_Interface(QWidget *parent) :
        QWidget(parent),
        ui(new Ui::sof_Interface)
    {
        ui->setupUi(this);
        isOpen=false;
        path_type=type1;//初始化
        isDrawing=false;//初始化
     }
    
    sof_Interface::~sof_Interface()
    {
        delete ui;
    }
    /槽函数/
    void sof_Interface::on_doOpen_clicked()                               //打开图片槽函数
    {
         QString fileName = QFileDialog::getOpenFileName(
                           this, "打开图片",
                           "",
                           "图片格式 (*.bmp *.jpg *.jpeg *.png)");
          if(fileName !=NULL)
            {
             image.load(fileName);
             curFile=fileName;
             isOpen=true;
            }
          update();
    }
    
    void sof_Interface::on_doSave_clicked()                                //保存图片槽函数
    {
        QString path = QFileDialog::getSaveFileName(
                     this, tr("保存图片"),
             "","图片格式 (*.bmp *.jpg *.jpeg *.png)");
        image.save(path);
    }
    
    void sof_Interface::on_buttonBox_clicked(QAbstractButton *button)      //lineEdit命令行输入槽函数
    {
        QString str;
    
        if(ui->buttonBox->button(QDialogButtonBox::Ok)  == button) //判断按下的是否为"确定”按钮
        {
            if(!ui->lineEdit->text().isEmpty())                    //判断lineEdit是否为空,不为空返回0
            {
                str += ui->lineEdit->text()+"\n";                  //str连接lineEdit中的内容
                Text=str;                                          //在图片上写入lineEdit中输入的文字
                str="";
            }
    
        }
        else if(button == ui->buttonBox->button((QDialogButtonBox::Cancel)))
          {
               ui->lineEdit->clear();
    
          }
    }
    
    void sof_Interface::on_mou_Track_clicked()                            //曲线槽函数
    {
        path_type=type1;
    }
    
    void sof_Interface::on_arrow_Edit_clicked()                           //箭头槽函数
    {
        path_type=type2;
    }
    
    void sof_Interface::on_text_Edit_clicked()                            //文字槽函数
    {
        path_type=type3;
    }
    
    鼠标事件
    
    
    void sof_Interface::mousePressEvent(QMouseEvent *e)                  //鼠标按下事件
    {
       begin=e->pos();
    }
    
    void sof_Interface::mouseMoveEvent(QMouseEvent *e)                   //鼠标移动事件
    {
        end=e->pos();
    
        if(path_type==type1)  //只有path_type==type1才绘制在image上(原图),这时isDrawing=false;
        {
            isDrawing=false;
            paint(image);
        }
        else                  //其他path_type全绘制在tempImage上(缓冲图上)
        {
            isDrawing=true;
            tempImage=image;
            paint(tempImage);
        }
    }
    
    void sof_Interface::mouseReleaseEvent(QMouseEvent *e)                //鼠标释放事件
    {
          end=e->pos();
          isDrawing=false;
          paint(image);
    
    }
    
    /paintEvent事件
    void sof_Interface::paintEvent(QPaintEvent *)
    {
        QPainter p(this);
        if(isDrawing)
          p.drawImage(0,0,tempImage);
        else
          p.drawImage(0,0,image);
    
        if(isOpen=true)   //打开图片操作
        {
            pic=QPixmap::fromImage(image);
            QPainter painter(this);
            painter.drawPixmap(0,0,748,480,pic);
        }
    }
    
    每个画图的函数
    void sof_Interface::paint(QImage &theImage)
    {
        QPainter pp(&theImage);
    
        pp.setCompositionMode(QPainter::CompositionMode_SourceIn);    //设置画刷的组合模式CompositionMode_SourceOut这个模式为目标图像在上。
        pp.setPen(QPen(QBrush(Qt::red), 2, Qt::SolidLine));           //设置画笔(颜色,线宽,样式(实线))
        pp.setRenderHint(QPainter::Antialiasing, true);               //设置线段反锯齿
        QFont font = pp.font();                                       //设置字体
        font.setPixelSize(20);                                        //改变字体大小
        font.setBold(false);                                          //字体是否加粗
        pp.setFont(font);                                             //设置字体
    
        if(path_type==type1)                                          //曲线
        {
            pp.drawLine(begin,end);
            begin=end;
        }
    
        if(path_type==type2)                                          //箭头
        {
            float x1 = begin.x();                                     //取points[0]起点的x
            float y1 = begin.y();                                     //取points[0]起点的y
            float x2 = end.x();                                       //取points[count-1]终点的x
            float y2 = end.y();                                       //取points[count-1]终点的y
            float l = 10.0;                                           //箭头的长度
            float a = 0.5;                                            //箭头与线段角度
            float x3 = x2 - l * cos(atan2((y2 - y1) , (x2 - x1)) - a);//计算箭头的终点(x3,y3)
            float y3 = y2 - l * sin(atan2((y2 - y1) , (x2 - x1)) - a);
            float x4 = x2 - l * sin(atan2((x2 - x1) , (y2 - y1)) - a);//计算箭头的终点(x4,y4)
            float y4 = y2 - l * cos(atan2((x2 - x1) , (y2 - y1)) - a);
            pp.drawLine(x2,y2,x3,y3);                                 //绘制箭头(x2,y2,x3,y3)
            pp.drawLine(x2,y2,x4,y4);                                 //绘制箭头(x2,y2,x4,y4)
            pp.drawLine(begin,end);                                   //绘制主干箭头(begin,end)
        }
    
        if(path_type==type3)                                          //文字
        {
           pp.drawText(begin.x(),begin.y(),Text);
        }
    
        update();
    }
    </span>
    

    main.pp中代码

     

     

    <span style="font-family:Times New Roman;font-size:14px;">#include "sof_interface.h"
    #include <QApplication>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        sof_Interface w;
        w.show();
    
        return a.exec();
    }</span>

    3.界面运行效果,还可以保存哦,注意图片格式只能加载.jpg.jpeg.png.bmp,需要扩展的自己在代码中添加吧!当然还可以更改界面背景色等,自己去改哦~这只是个demo。

     

    二、将自己第一步写的sof_Interface工程.h和.cpp的代码拷贝到自定义控件工程的.h和.cpp中即可写成自定义控件工程了,注意代码不能完全粘贴复制哦,注意自己建立工程的类名,除非你和我的一样。然后编译后见一下.dll和.lib,并放到相应的designer中,具体可参考【Qt自定义控件的创建与初步使用(一)这篇博客】。

    三、这样你再新建立任意一个工程,你都可以在Qt creator或Qt 设计师中找到自己建立的控件,然后拖拽到工程的ui界面中,最后拷贝自定义控件.h和.cpp到这个新工程的工程目录下,注意和第二大步不一样哦~,就可以编译运行啦。再次就不给效果图啦~

     

     

    展开全文
  • 箭头提示框样式

    2020-06-20 15:03:46
    提示框的箭头时可以用以下方法: HTML: <span class="form-error">输入错误!<s class="dec1">◆</s><s class="dec2">◆</s></span> CSS: .form-error{ position: ...

    做提示框的箭头时可以用以下方法:

    HTML:

    <span class="form-error">输入错误!<s class="dec1"></s><s class="dec2"></s></span>

    CSS:

    .form-error{
        position: absolute;
        right: 0;
        top: -35px;
        padding: 0px 5px 0px 10px;
        border: 1px solid #E2E2E2;
        background: #FFFFFF;
        color: #ff721a;
        line-height:24px;
        z-index: 999;
        display: none;
    }
    .form-error s{
        font-family: simsun;
        font-size: 16px;
        height: 19px;
        right: 10px;
        line-height: 21px;
        position: absolute;
        text-decoration: none;
        top: 15px;
        width: 17px;
    }
    .form-error s.dec1{
        color: #E2E2E2;
    }
    .form-error s.dec2{
        color: #fff;
        top: 14px;
    }

    思路:

    s标签中是两个菱形符号,通过对菱形颜色值设定和绝对位置的定位来实现箭头。其他位置的箭头调整定位位置即可。

    如果文字前需要加图标,可以在form-error里增加背景图片,也可以在文字前加img标签,再调整位置即可。

    展开全文
  • 提示冒泡(Tooltip)使用CSS3为CSSJavaScript添加自定义Bootstrap工具提示的文档示例,用于本地标题存储的动画数据属性。概览使用提示冒泡持件时应了解以下:Tooltip提示冒泡组件依赖于 Popper.js ,你必须将...

    提示冒泡(Tooltip)

    使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例,用于本地标题存储的动画和数据属性。

    概览

    使用提示冒泡持件时应了解以下:Tooltip提示冒泡组件依赖于 Popper.js ,你必须将popper.min.js 文件放在 bootstrap.js之前调用,或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js这两个已经包含了 Popper.js 的脚本。

    如果自行编译JS,请 包含 util.js文件。

    出于性能安排,Tooltip提示冒泡是一个可选插件,所以 你必须自己初始化它们。

    标题(或内容)零长度情况下,Tooltip提示冒泡插件不会显示(生效)。

    指定 container: 'body' 以避免复杂组年(如输入框组、按钮组等)中渲染呈出混乱(出问题)。

    在隐藏元素上触发Tooltip提示冒泡插件不会起作用(无效行为)。

    Tooltip提示冒泡插件的.disabled 或 disabled 元素必须放在外层(父层)元素上。

    如果从一个跨多行的链接上触发Tooltip提示冒泡插件,提示冒泡将居中,在你的上使用white-space: nowrap; 可避免这种行为(即回归左右对齐)。

    必须先隐藏Tooltip提示冒泡插件,然后才能从DOM中删除相应的元素。

    此组件的动画效果取决于prefers-reduced-motion 媒体查询. 请参阅我们的 辅助功能文档的简化动作部分.

    都明白了?很好。让我们来通过一些例子来看它们具体是如何运作的。

    示例:在任何地方启用tooltip提示冒泡插件

    在网页上初始化所有的tooltip提示冒泡插件一个途径就是用data-toggle 来选择它们:$(function(){

    $('[data-toggle="tooltip"]').tooltip()

    })

    实际范例

    请用鼠标点击下面一段文字上的链接,查看tooltip提示冒泡效果:

    984aac032c61db47fad70358f8f2ce2a.png

    将鼠标悬停在下面的按钮上,可以看到四个工具提示方向:顶部、右侧、底部和左侧。

    b8b44183951431d11c16dc41be83bdc8.png

    Tooltip on top

    Tooltip on right

    Tooltip on bottom

    Tooltip on left

    并且支持自定义HTML:

    Tooltip with HTML

    用法

    tooltip提示冒泡插件根据需要生成内容和标记,默认情况下我们将它放在触发元素之后。

    使用JavaScript触发提示冒泡:$('#example').tooltip(options)

    溢出自动和滚动

    当父容器溢出时,工具提示位置会尝试自动更改:自动或 溢出, 像我们的.table-responsive一样滚动,但仍保留原始位置的定位. 要解决此问题, 请将boundary选项设置为默认值, 'scrollParent',例如'window':$('#example').tooltip({boundary:'window'})

    标记

    工具提示框所需要的标记只是一个data 元素和你希望拥有一个tooltip提示冒泡HTML元素上的 title ,tooltip提示冒泡插件的标记很简单,尽管它需要一个位置(默认是 top 顶部指示)。

    使tooltip提示冒泡使用于键盘和辅助技术使用者

    推荐你只为传统的键盘和互动式(如链接或表单控制元件)的HTML元素添加tooltip提示冒泡框,虽然任意的HTML 元素 (如 )可以通过添加 tabindex="0" 属性来调整focus行为,但这会为键盘使用者的非互动式元素增加可能困惑(混乱/错误)的定位点。此外大多数辅助技术目前还没有加入这种情况下的提示冒泡效果支持。

    Hover over me

    展开全文
  • 这是我个人最喜欢的提示和技巧列表,可让您利用XD的潜力。Adob​​e Comp中的样机您可以使用适用于iOSAndroid的Adobe Comp移动应用程序创建简单的模型线框。优点是可以使用手指或手写笔进行快速直观的原型制作,...
  • Winform 中,默认情况下,label 是根据文本自动调整大小的,不能自由设置其宽度高度,不管怎么修改其宽度与高度,它都会变回原来的值。难道 label大小不能自定义,当然不是,需要先设置 label 的一个属性才可以...
  • 电大计算机应用基础(本科)机考训练题,,是期末复习重点试题及参考答案资料必考重点,大家可参考练习,提升计算机基础技能
  • 通过tkinter相关技术实现窗口拆分,此基础上增加图片大小调整的功能,并对前两篇进行梳理,提供程序的全部源代码,方便大家使用。完结篇【分 析】前两篇的内容基本实现了通过调用百度AI从图片上提取文字的功能。...
  • Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动图标后添加一个半透明的黑圈以确保任何背景色下图片都能够清晰显示。...
  • ToolTipster提示框插件

    千次阅读 2019-08-13 15:43:32
    1. 引入jQueryTooltipster's文件 2. 设置你的HTML 3. 激活 Tooltipster 4. 定义你的tooltips风格 5. HTML内使用你的tooltips 6. 使用插件 附录:参数 插件描述:Tooltipster是一个jQuery提示框插件,用于...
  • 制作网页所需要的一些图片、背景、音乐、文字等,无需让你网上苦苦搜素,其中包含各个方面的内容
  • 中职计算机应用基础office2010文字处理软件应用教材知识点整理归纳.doc
  • 尝试破解12306验证码的时候,提前了解了一下应对各种验证码的解决方案,这里主要是学习到了面对文字图片验证码,例如亚马逊、豆瓣等平台的登录时会遇到的情况,效果还不错。 一、工具介绍 ​    ...
  • Office使用的100个窍门提示,可帮你更方便美观处理文档问题。
  • 清除“图形”复选框可隐藏用自选图形 (自选图形:一组现成的形状,包括如矩形圆这样的基本形状,以及各种线条连接符、箭头总汇、流程图符号、星与旗帜标注等。)等绘图工具创建的对象。-----------------------...
  • 用css制作一个三角形箭头

    千次阅读 2015-03-11 16:34:20
     三角形我们经常用列表、下拉提示、面包屑导航的位置,给用户以导向的引导作用,比如,有下拉列表的地方,我们可以用向下的箭头列表的时候,我们能告诉用户每个列表项下一个列表项的关系,当面包屑导航...
  • 利用css实现网页带箭头提示

    千次阅读 2013-03-02 15:19:27
    纯CSS无图片箭头的DIV方框    div.container{position:absolute;  top:30px;  left:40px;  font-size: 9pt;  display:block;  height:100px;  width:200px;  background-color:transparent;  ...
  • 前端知识比较杂,长时间的工作容易沉浸业务当中,技术提升有限,这里发现了前端的新大陆,可以帮助小伙伴们巩固基础知识,完善自己的知识体系,欢迎点赞收藏,兄弟们,赶紧干起来吧!1.JavaSc...
  • 前端面试题,我发现很多小伙伴都是死背面试八股,原理并不懂,遇到需要思考的题就懵了,所以,我会一道道从文字和代码解析前端的面试题,让大家理解,并且加强自己的水平,天天都会更新
  • 本篇为大家分享ps报纸排版教程:ps报纸文字排版教程,自从丫头了小学,这作业难度是越爱越高,这不,老师让做一期报纸,下面就是ps报纸排版教程:ps报纸文字排版教程的具体步骤,我学习了好久,也算是闺女期盼的...
  • 最新版为v4.1版,开放一定概率的八窗口体验功能,请截图体验(多点几次图片)。更新日期:2018.12.30 最终版,去除时间限制。 工具特色: 1、鼠标划框、三种截图方式、急速截图 2、八窗口搜索、高亮匹配答案、二...
  • 元件说明摘要:元件作为Axure 9.0的基础功能,线框图的绘制与...Axure 9.0与8.0相比并没有增加新的元件,但9.0的元件却更好用,用起来更顺手,更有设计感,它的好用与顺手体现每一个细节之中。1.2 元件详解元件...
  • 自定义ListView下拉刷新和上拉加载

    千次阅读 2016-01-18 16:48:26
    1、自定义下拉刷新和上拉加载更多 2、自定义下拉刷新时动画 3、重写onItemClick解决一个小bug
  • 相对于Visual C ,Qt更易于学习开发。 2014年,我们编写了《Qt 5开发及实例》,受到市场的广泛欢迎。2015年,《Qt 5开发及实例》(第2版)推出,它以Qt 5.4为平台,增加了关于QML及Qt Quick开发的内容,继续受到...
  • :check_mark:使用右箭头和上一个使用左箭头键放大下一个照片文章  (注意:下一个或一个帖子可能不是物理相邻的照片) :check_mark:点击照片的CTRL(或Mac中的命令)将新标签中加载该照片的文章 :check_...
  • 几十种类型的UI脚本,抖音、QQ、微信、陌陌、支付宝等自动化操作的脚本、还有部分协议列表,HTTP协议(POST、GET)上传下载,接码模块,百度文字识别api模块,文件操作模块:txt文本读一行删一行,等等其他例子

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,711
精华内容 3,084
关键字:

在图片上增加提示箭头和文字