怎么實現微信聊天時的氣泡圖（一）

mindwind 發布于2019-08-21 13:38 / 1247人閱讀

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

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

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

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

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

可以由兩種實現的方式

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實現圖的遍歷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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