谁知道这种微信视频微信文字气泡泡怎么设置

来源：蜘蛛抓取(WebSpider) 时间：2018-10-02 16:30 标签： 微信文字气泡

最近微信头像不再是流行强迫症頭像啦而是流行透明头像，小编说的透明头像可不是简简单单找一个白色或是透明头像就可以设置为透明头像的哦！而是需要一点小窍門的微信怎么设置头像头像以及微信透明头像的制作教程小编将在本文为大家详细讲解，大家赶紧快人一步抢先体验高上大的透明头潒吧！

1、将透明头像保存至手机里，长按图片或是右键保存透明头像发送手机都可以以下是透明头像；

2、登录微信点击我-个人信息-头像，选择更换头像；

3、在更换头像的过程中大家肯定是找不到那个透明头像的，因为此时透明头像显示的是纯黑色的大家不用在意，只需点击它；

4、最重要的步骤来临当我们要保存黑色头像的同时，要多次选择放大图片将手指在黑色区域方法，已中心为原点往两边擴散，放大图片神马的大家应该是知道的吧！将图片多放大几次再点击选取；

5、这个时候微信透明头像也就出现啦是不是高大上且富有個性呢！

1、貌似小编试用过，苹果用户的手机不支持微信头像透明化估计是权限版本的问题，只支持安卓用户；

2、安卓手机用户在更换頭像当中偶尔会碰到第一次并不成功的现象，会显示黑色头像这时候需要大家多多试验几次才能够变为透明头像的哦！

小编推荐教程：微信朋友圈显示iphone6方法 微信显示来自iphone6尾巴的详细图文步骤

首先微信聊天的时候气泡图是什么样呢？上图

要实现这种气泡图，要怎么做
主要的就是实现那个小三角吗？首先想到的肯定是使用伪元素+定位对！！！

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

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

  1. canvas，绘制路径然后再clip图片,本文暂不描述
  2. 另一种就是利用css3的新属性clip-path属性，绘制出要切割的路径然后再给clip-path属性赋值,火狐和IE未实现此属性

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

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

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

x,y坐标指的是相对于原始图像的位置 //这里是用2000个点来模拟可以使用更多的点，但2000效果已经很不错了

然后根据对称分别算出其他三个圆角的位置

注意因为ploygan函数接受的路径是逆时针的，所以我们在得到其他三段圆弧的时候偠注意点的顺序在这里要翻转一下数组，才能得到正常的顺序
下面是得到小三角的三个关键点，在这里我默认小三角是等边三角形了给出三角形顶点坐标进行了，其他两点的坐标都在边界上截图里的5,7两点。
num是在哪条边界上当然嫌麻烦的话可以通过小三角形的坐标范围来判定小三角是嵌在哪个边界上，我偷懒了。

下面就拼接polygon函数的参数了

我要回帖

更多关于 微信文字气泡 的文章

 

随机推荐