javascript - 微信气泡的图片铺满怎么做的？canvas做出来吗？css呢？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - 微信气泡的图片铺满怎么做的？canvas做出来吗？css呢？

高洛峰 2017-04-10 17:57:28

[JavaScript讨论组]

632

uI给的样式效果图是这样的

，我只能做出

那个白色的三角，没法把图片弄进去。要么只能四方形的图，能不能跟微信收发图片一样，那个角都被图片铺满呢？

不是要画三角形，是要做出微信展示图片的效果。！

求高手！求求求求

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(10)

大家讲道理2017-04-10 17:59:28 10楼

提供一个兼容性不高的方法，效果还行，利用css3的clip-path属性和border-radius属性。
代码地址：看这里，其中图片右上端和右下的圆角和左上左下的圆角的半径不一样，是因为被剪切掉了，所以要加大半径来模拟效果。

分割线，不过有个思路，可以用js控制切割的路径，比如说向右边的圆角，那是四分之一弧，可以模拟100个或者更多个点，他们之间的连线就可以大概模拟出一个四分之一弧了。要计算大量的坐标，题主可以试试，我还在试

---------- 好了，更新----------------------------------------------
看效果：点这里
代码主要就是生成polygon函数的参数，polygon是多边形，其中我给那个小三角的位置固定了，没有整成参数。
左上和左下的圆角是用的border-radius生成的，右上角和右下角的是绘制路径剪切而成

/**
 @r {number}  圆角的宽度 
 @x {number}  图片的宽度 
 @y {number}  图片的高度
*/
function makeTopPointPos(r,x,y){
  var angle,rx,ry,a,b,item;var arr=[];
  for(var i=0;i<2000;i++){
      angle=i/1000*Math.PI/2;
      rx=0.95*x-r+r*Math.cos(angle);
      ry=r-r*Math.sin(angle);
      a=rx/x*100+'%';
      b=ry/y*100+'%';
      item=a+' '+b;
      arr.push(item);
  }
  return arr;
}
function makeBottomPointPos(r,x,y){
    var angle,rx,ry,a,b,item;var arr=[];
   for(var i=0;i<2000;i++){
      angle=i/1000*Math.PI/2;
      rx=0.95*x-r+r*Math.sin(angle);
      ry=y-r+r*Math.cos(angle);
      a=rx/x*100+'%';
      b=ry/y*100+'%';
      item=a+' '+b;
      arr.push(item);
   }
   return arr;
}
var topPoints=makeTopPointPos(20,200,200).join(',');
var bottomPoints=makeBottomPointPos(20,200,200).join(',');
function makeParams(r,x,y){
    var rtx=(0.95*x-r)/x*100+'%';
    var rty=r/y*100+'%';
    var rbx=(0.95*x-r)/x*100+'%';
    var rby=(y-r)/y*100+'%';
    var html='(0% 0%,0% 100%,'+rtx+' 100%,'+bottomPoints+', 95% '+rby+',95% 35%,100% 32%,95% 29%,95% '+rty+','+topPoints+','+rtx+' 0%)';
    return html;
}

@沉然静寂题主再来瞅瞅
-------更新-------------------------------
写了篇文章，可以很方便的得出这种气泡图的效果，可以来瞅瞅文章
参考：css-tricks

赞 +0

添加回复

迷茫2017-04-10 17:59:28 9楼

canvas做个三角太浪费了，css3能满足你，百度搜下三角！！

赞 +0

添加回复

伊谢尔伦2017-04-10 17:59:28 8楼

没看明白什么意思

赞 +0

添加回复

PHP中文网2017-04-10 17:59:28 7楼

我有个思路，就是那个气泡三角里弄个一样的背景图（就是对话框里那个背景图，如果气泡是伪元素，可能要用border-image），然后算一下背景图位置，也许可以实现拼接效果。

赞 +0

添加回复

黄舟2017-04-10 17:59:28 6楼

<!DOCTYPE html>
<html>
<head>
    <title>CSS triangle</title>
</head>
<body>
    <p class="triangle">
    </p>
    <style>
        .triangle{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 100px solid red;
            border-bottom: 50px solid transparent;
        }
    </style>
</body>
</html>

这是一个方向的三角示范其他方向的只要改变border值就可以调出相应的效果

赞 +0

添加回复

PHP中文网2017-04-10 17:59:28 5楼

给你个参考：https://github.com/dupengtao/BubbleTextView

赞 +0

添加回复

阿神2017-04-10 17:59:28 4楼

呃，直接切出来不行么？

我的意思是如果你发图片的对话框都是一样大的话，那么可以把图片放在背景之上，然后在上边覆盖一个内容和背景相同的边框，只要边框和那个斜线背景的图案是对齐的，那按理说应该看起来是比较舒服的一个角吧……

另外你最好把整体的需求列出来吧，不然不知道你要的是啥也不好给意见

赞 +0

添加回复

黄舟2017-04-10 17:59:28 3楼

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 590px;
            height: 600px;
            margin: auto;
            position: relative;
            background: url("./ban-2.jpg") no-repeat;
            background-position: -30px 0;
        }
        .ico{
            width: 30px;
            height: 30px;
            position: absolute;
            top: 50px;
            left: -30px;
            background: url("./ban-2.jpg") no-repeat;
            background-position: 0 -50px;
            overflow: hidden;
        }
        .ico-bg{
            width: 100%;
            height: 100%;
            position: absolute;
            top: -30px;
            left:-9px;
            transform: rotate(45deg) ;
            border: 30px solid #fff;
        }
    </style>
</head>
<body>
<p class="box">
    <p class="ico"><i class="ico-bg"></i></p>
</p>
</body>

朋友写的效果，觉的可以！

赞 +0

添加回复

大家讲道理2017-04-10 17:59:28 2楼

html:

<p class="element">
  <p class="content"><img src="xx" /></p >
</p>    
<svg width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 1, 0 0, 1 0, 0.8 1" />
    </clipPath>
  </defs>
</svg>

css:

.element{
    position:relative;
    overflow:hidden;
    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.element .content{
    overflow: hidden;
    color: #fff;
}

PS:如果气泡可变大小或者不是等宽，content大小JS取img宽高；如果气泡等宽，可以设置content宽，并.element .content img{display:block;width:100%;height:auto;}

参考文章：在这里

赞 +0

添加回复