成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

whinc / 3223人閱讀

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

首先,微信聊天的時(shí)候氣泡圖是什么樣呢?上圖,
,
要實(shí)現(xiàn)這種氣泡圖,要怎么做?
主要的就是實(shí)現(xiàn)那個(gè)小三角嗎?首先想到的肯定是使用偽元素+定位,對(duì)?。?!

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

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

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

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

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

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

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

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

怎么得到一段圓弧的坐標(biāo)呢?這樣,根據(jù)高中數(shù)學(xué)知識(shí)可得,,,我們用無(wú)數(shù)相鄰近的點(diǎn)的連線來(lái)模擬圓弧,

/**
@param r {number} 圓角半徑
@param x {number} 左上圓角圓心x坐標(biāo)
@param y {number} 左上圓角圓心y坐標(biāo)
x,y坐標(biāo)指的是相對(duì)于原始圖像的位置
*/

function makeTopLeftPos(r,x,y){
  var angle,rx,ry,a,b;var arr=[];item={};
  var len=2000;
  //這里是用2000個(gè)點(diǎn)來(lái)模擬,可以使用更多的點(diǎn),但2000效果已經(jīng)很不錯(cuò)了
  for(var i=0;i

然后根據(jù)對(duì)稱分別算出其他三個(gè)圓角的位置

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

注意,因?yàn)閜loygan函數(shù)接受的路徑是逆時(shí)針的,所以我們?cè)诘玫狡渌螆A弧的時(shí)候要注意點(diǎn)的順序,在這里要翻轉(zhuǎn)一下數(shù)組,才能得到正常的順序。
下面是得到小三角的三個(gè)關(guān)鍵點(diǎn),在這里我默認(rèn)小三角是等邊三角形了,給出三角形頂點(diǎn)坐標(biāo)進(jìn)行了,其他兩點(diǎn)的坐標(biāo)都在邊界上,截圖里的5,7兩點(diǎn)。
num是在哪條邊界上,當(dāng)然嫌麻煩的話可以通過(guò)小三角形的坐標(biāo)范圍來(lái)判定小三角是嵌在哪個(gè)邊界上,我偷懶了。。

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

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/115146.html

相關(guān)文章

  • 怎么實(shí)現(xiàn)信聊天時(shí)氣泡

    摘要:下面是得到小三角的三個(gè)關(guān)鍵點(diǎn),在這里我默認(rèn)小三角是等邊三角形了,給出三角形頂點(diǎn)坐標(biāo)進(jìn)行了,其他兩點(diǎn)的坐標(biāo)都在邊界上,截圖里的兩點(diǎn)。下面就拼接憑借函數(shù)的參數(shù)了完整代碼看這里參考 首先,微信聊天的時(shí)候氣泡圖是什么樣呢?上圖,showImg(https://segmentfault.com/img/bVtQDZ);,要實(shí)現(xiàn)這種氣泡圖,要怎么做?主要的就是實(shí)現(xiàn)那個(gè)小三角嗎?首先想到的肯定是使用...

    mindwind 評(píng)論0 收藏0
  • 【輕松集贊】寫(xiě)了個(gè)涉嫌混淆微信官方服務(wù)小程序

    摘要:吃飽喝足,兩個(gè)人扶著腰走在路上炫腹還是女盆友的提醒說(shuō),你不是會(huì)小程序嗎,能不能寫(xiě)一個(gè)點(diǎn)贊的小程序來(lái)用。哎還真是,我自己擼一個(gè)也是闊以的,說(shuō)不定還能給其他人用。比較適合想要練手小程序和的童鞋全部的代碼還請(qǐng)移步我的歡迎和。 showImg(https://segmentfault.com/img/remote/1460000015245489?w=530&h=153); 發(fā)生背景: ???...

    xiao7cn 評(píng)論0 收藏0
  • NingJS - JSConf China 2016個(gè)人與會(huì)總結(jié)&感想

    摘要:之所以預(yù)先調(diào)研還是因?yàn)橛⑽乃讲缓?,怕到時(shí)現(xiàn)場(chǎng)聽(tīng)不懂一下就懵逼了。在場(chǎng)參會(huì)最小的還是一名高中生。英語(yǔ)流利說(shuō)這是硬傷。因此我下載了英語(yǔ)流利說(shuō)這款應(yīng)用來(lái)練習(xí),然后剛好有幾個(gè)外國(guó)朋友,可以作為實(shí)踐對(duì)象。 NingJS - JSConf China 2016 為期兩天的NingJS - JSconf 2016,聚焦點(diǎn)自然是JavaScript和Node.js,當(dāng)然還有不少來(lái)打廣告和混臉熟的。本...

    xiaoqibTn 評(píng)論0 收藏0
  • 仿鏈家地找房簡(jiǎn)單實(shí)現(xiàn)

    摘要:本篇目錄使用入門簡(jiǎn)單使用流程鏈家地圖找房效果區(qū)域點(diǎn)位氣泡數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)方法區(qū)域邊界獲取區(qū)域點(diǎn)位經(jīng)緯度獲取區(qū)域邊界小結(jié)最近由于項(xiàng)目需要,開(kāi)始調(diào)研如何使用百度地圖實(shí)現(xiàn)類似于鏈家的地圖找房的功能,從而開(kāi)始學(xué)習(xí)百度地圖相關(guān)內(nèi)容。 本篇目錄: 使用入門 簡(jiǎn)單使用流程 鏈家地圖找房效果 區(qū)域點(diǎn)位氣泡 數(shù)據(jù)結(jié)構(gòu) 實(shí)現(xiàn) addOverlay方法 區(qū)域邊界 獲取區(qū)域點(diǎn)位經(jīng)緯度 獲取區(qū)域邊...

    RancherLabs 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<