微信小程序客服气泡怎么实现?实现客服气泡代码

时间：2023-07-01 14:05 阅读数：19 人阅读分类：知识百科

　　微信小程序客服气泡怎么实现?实现客服气泡代码如下，和微信小程序客服交涉的过程中，微信小程序客服气泡可以让整个微信聊天过程变得更有趣味，微信小程序客服气泡怎么去实现呢?

　　微信小程序客服气泡怎么实现?

　　首先，微信小程序客服气泡是什么样呢?如下图所示：

　　要实现微信小程序客服气泡要怎么做呢?

　　主要的就是实现那个小三角吗?首先想到的肯定是使用伪元素+定位。

　　实现微信小程序客服气泡可以有两种方式：

　　第一种是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

　　angle=i/len*Math.PI/2;

　　rx=x-r*Math.sin(angle);

　　ry=y-r*Math.cos(angle);

　　item.x=rx;

　　item.y=ry;

　　arr.push({x:rx,y:ry});

　　}

　　return arr;

　　}

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

　　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

　　rx=d.x+a.x-arr[i].x;

　　ry=arr[i].y;

　　newArr.push({x:rx,y:ry});

　　}

　　newArr.reverse();

　　return newArr;

　　}

　　function makeBottomLeftPos(){

　　var arr=makeTopLeftPos(r,a.x+r,a.y+r);

　　var newArr=[];

　　var rx,ry;

　　for(var i=0,len=arr.length;i

　　ry=c.y+a.y-arr[i].y;

　　rx=arr[i].x;

　　newArr.push({x:rx,y:ry});

　　}

　　newArr.reverse();

　　return newArr;

　　}

　　function makeBottomRightPos(){

　　var arr=makeTopRightPos();

　　var newArr=[];

　　var rx,ry;

　　for(var i=0,len=arr.length;i

　　ry=c.y+d.y-arr[i].y;

　　rx=arr[i].x;

　　newArr.push({x:rx,y:ry});

　　}

　　newArr.reverse();

　　return newArr;

　　}

　　注意，因为ploygan函数接受的路径是逆时针的，所以我们在得到其他三段圆弧的时候要注意点的顺序，在这里要翻转一下数组，才能得到正常的顺序。

　　以上是微信小程序客服气泡怎么实现的一些微信小程序代码了，您可以通过以上的微信小程序代码去实现微信小程序客服气泡哦。如果大家想了解更多微信小程序知识，可以来关注微小乔。