怎么实现微信聊天时的气泡图（一）

mindwind 发布于2019-08-21 13:38 / 1221人阅读

摘要：下面是得到小三角的三个关键点，在这里我默认小三角是等边三角形了，给出三角形顶点坐标进行了，其他两点的坐标都在边界上，截图里的两点。下面就拼接凭借函数的参数了完整代码看这里参考

首先，微信聊天的时候气泡图是什么样呢？上图，
，
要实现这种气泡图，要怎么做？
主要的就是实现那个小三角吗？首先想到的肯定是使用伪元素+定位，对！！！

那我们来试一下，上代码点这里，这样很轻松的实现了想要的背景加小三角的效果

-----------------------但是--------------------------------------------

像截图中的图片那样，怎么才能让小三角里也充满背景图？

可以由两种实现的方式

canvas，绘制路径，然后再clip图片,本文暂不描述

另一种就是利用css3的新属性clip-path属性，绘制出要切割的路径，然后再给clip-path属性赋值,火狐和IE未实现此属性

这里先讲第二种，我们观察到大概有11个关键点，大致如图

我们可以通过构造ploygon多边形函数的参数来达到我们的目的,其中四个圆角是对称的，我们可以之计算一个圆角的圆弧的坐标就行了，可以通过对称的关系再得出其他三段圆弧的坐标。

怎么得到一段圆弧的坐标呢？这样，根据高中数学知识可得，，，我们用无数相邻近的点的连线来模拟圆弧，

/**
@param r {number} 圆角半径
@param x {number} 左上圆角圆心x坐标
@param y {number} 左上圆角圆心y坐标
x,y坐标指的是相对于原始图像的位置
*/

function makeTopLeftPos(r,x,y){
  var angle,rx,ry,a,b;var arr=[];item={};
  var len=2000;
  //这里是用2000个点来模拟，可以使用更多的点，但2000效果已经很不错了
  for(var i=0;i
然后根据对称分别算出其他三个圆角的位置
function makeTopRightPos(){
    var arr=makeTopLeftPos(r,a.x+r,a.y+r);
    var newArr=[];
    var rx,ry;
    for(var i=0,len=arr.length;i
注意，因为ploygan函数接受的路径是逆时针的，所以我们在得到其他三段圆弧的时候要注意点的顺序，在这里要翻转一下数组，才能得到正常的顺序。
下面是得到小三角的三个关键点，在这里我默认小三角是等边三角形了，给出三角形顶点坐标进行了，其他两点的坐标都在边界上，截图里的5,7两点。
num是在哪条边界上，当然嫌麻烦的话可以通过小三角形的坐标范围来判定小三角是嵌在哪个边界上，我偷懒了。。
function makeTrigonPos(num){
    var x=p.x;
    var y=p.y;
    var trigonPos=[];
    switch(num){
        case 1: trigonPos=[{x:a.x,y:y-0.577*(a.x-x)},{x:x,y:y},{x:a.x,y:y+0.577*(a.x-x)}];break;
        case 2: trigonPos=[{x:x-0.577*(y-b.y),y:b.y},{x:x,y:y},{x:x+0.577*(y-b.y),y:b.y}];break;
        case 3: trigonPos=[{x:c.x,y:y-0.577*(x-c.x)},{x:x,y:y},{x:c.x,y:y+0.577*(x-c.x)}];break;
        default:
        trigonPos=[{x:c.x,y:y-0.577*(x-c.x)},{x:x,y:y},{x:c.x,y:y+0.577*(x-c.x)}];break;
    }
    var arr=trigonPos.map(function(item){
        return item.x+"px"+" "+item.y+"px";
    });
    return arr;
}
下面就拼接凭借polygon函数的参数了
function makeAllParams(){
    var arr1=makeTopLeftPos(r,a.x+r,a.y+r).map(function(item){
        return item.x+"px"+" "+item.y+"px";
    });
    var arr2=makeBottomLeftPos().map(function(item){
        return item.x+"px"+" "+item.y+"px";
    });
    var arr3=makeBottomRightPos().map(function(item){
        return item.x+"px"+" "+item.y+"px";
    });
    var arr4=makeTopRightPos().map(function(item){
        return item.x+"px"+" "+item.y+"px";
    });
    var arr=[arr1,arr2,arr3,arr4];
    arr.splice(num,0,makeTrigonPos(num));
    var params=arr.join(",");
    img.style.webkitClipPath="polygon("+params+")";
}
完整代码：看这里
参考:css-tricks

云服务器 GPU云服务器实现气泡图 js气泡图数据展示 html 动图实现的 html实现图的遍历

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87733.html

怎么实现微信聊天时的气泡图（一）

摘要：下面是得到小三角的三个关键点，在这里我默认小三角是等边三角形了，给出三角形顶点坐标进行了，其他两点的坐标都在边界上，截图里的两点。下面就拼接凭借函数的参数了完整代码看这里参考首先，微信聊天的时候气泡图是什么样呢？上图，showImg(https://segmentfault.com/img/bVtQDZ);，要实现这种气泡图，要怎么做？主要的就是实现那个小三角吗？首先想到的肯定是使用...

whinc 2019-08-30 12:53 评论0 收藏0
【轻松集赞】写了个涉嫌混淆微信官方服务的小程序

摘要：吃饱喝足，两个人扶着腰走在路上炫腹还是女盆友的提醒说，你不是会小程序吗，能不能写一个点赞的小程序来用。哎还真是，我自己撸一个也是阔以的，说不定还能给其他人用。比较适合想要练手小程序和的童鞋全部的代码还请移步我的欢迎和。 showImg(https://segmentfault.com/img/remote/1460000015245489?w=530&h=153); 发生背景： ...

xiao7cn 2019-08-29 15:41 评论0 收藏0
NingJS - JSConf China 2016个人与会总结&感想

摘要：之所以预先调研还是因为英文水平不好，怕到时现场听不懂一下就懵逼了。在场参会最小的还是一名高中生。英语流利说这是硬伤。因此我下载了英语流利说这款应用来练习，然后刚好有几个外国朋友，可以作为实践对象。 NingJS - JSConf China 2016 为期两天的NingJS - JSconf 2016，聚焦点自然是JavaScript和Node.js，当然还有不少来打广告和混脸熟的。本...

xiaoqibTn 2019-08-22 10:36 评论0 收藏0
仿链家地图找房的简单实现

摘要：本篇目录使用入门简单使用流程链家地图找房效果区域点位气泡数据结构实现方法区域边界获取区域点位经纬度获取区域边界小结最近由于项目需要，开始调研如何使用百度地图实现类似于链家的地图找房的功能，从而开始学习百度地图相关内容。本篇目录：使用入门简单使用流程链家地图找房效果区域点位气泡数据结构实现 addOverlay方法区域边界获取区域点位经纬度获取区域边...

RancherLabs 2019-08-26 12:01 评论0 收藏0