怎么實現(xiàn)微信聊天時的氣泡圖（一）

mindwind 發(fā)布于2019-08-21 13:38 / 1263人閱讀

摘要：下面是得到小三角的三個關(guān)鍵點，在這里我默認小三角是等邊三角形了，給出三角形頂點坐標進行了，其他兩點的坐標都在邊界上，截圖里的兩點。下面就拼接憑借函數(shù)的參數(shù)了完整代碼看這里參考

首先，微信聊天的時候氣泡圖是什么樣呢？上圖，
，
要實現(xiàn)這種氣泡圖，要怎么做？
主要的就是實現(xiàn)那個小三角嗎？首先想到的肯定是使用偽元素+定位，對！！！

那我們來試一下，上代碼點這里，這樣很輕松的實現(xiàn)了想要的背景加小三角的效果

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

像截圖中的圖片那樣，怎么才能讓小三角里也充滿背景圖？

可以由兩種實現(xiàn)的方式

canvas，繪制路徑，然后再clip圖片,本文暫不描述

另一種就是利用css3的新屬性clip-path屬性，繪制出要切割的路徑，然后再給clip-path屬性賦值,火狐和IE未實現(xiàn)此屬性

這里先講第二種，我們觀察到大概有11個關(guān)鍵點，大致如圖

我們可以通過構(gòu)造ploygon多邊形函數(shù)的參數(shù)來達到我們的目的,其中四個圓角是對稱的，我們可以之計算一個圓角的圓弧的坐標就行了，可以通過對稱的關(guān)系再得出其他三段圓弧的坐標。

怎么得到一段圓弧的坐標呢？這樣，根據(jù)高中數(shù)學知識可得，，，我們用無數(shù)相鄰近的點的連線來模擬圓弧，

/**
@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效果已經(jīng)很不錯了
  for(var i=0;i
然后根據(jù)對稱分別算出其他三個圓角的位置
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函數(shù)接受的路徑是逆時針的，所以我們在得到其他三段圓弧的時候要注意點的順序，在這里要翻轉(zhuǎn)一下數(shù)組，才能得到正常的順序。
下面是得到小三角的三個關(guān)鍵點，在這里我默認小三角是等邊三角形了，給出三角形頂點坐標進行了，其他兩點的坐標都在邊界上，截圖里的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函數(shù)的參數(shù)了
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