乐朦3刺激文爱微信聊天截图图咋弄呢

来源：蜘蛛抓取(WebSpider) 时间：2016-07-09 13:11 标签： 刺激文爱微信聊天截图
Powered by微信如何截图聊天记录
　　1、如果您是安卓手机的话，打开要截取的微信画面，直接同时按电源键和音量加即可完成截图。　　2、如果您是苹果手机的话，打开要截图的画面，同时按电源键和Home键即可完成截图。　　注意：现在多数的智能手机会自带截图功能，请耐心查找。怎么实现微信聊天时的气泡图（一） - 推酷
怎么实现微信聊天时的气泡图（一）
首先，微信聊天的时候气泡图是什么样呢？上图，
要实现这种气泡图，要怎么做？
主要的就是实现那个小三角吗？首先想到的肯定是使用伪元素+定位，对！！！
那我们来试一下，上代码
，这样很轻松的实现了想要的背景加小三角的效果
———————–但是——————————————–
像截图中的图片那样，怎么才能让小三角里也充满背景图？
可以由两种实现的方式
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&len+1;i++){
angle=i/len*Math.PI/2;
rx=x-r*Math.sin(angle);
ry=y-r*Math.cos(angle);
arr.push({x:rx,y:ry});
然后根据对称分别算出其他三个圆角的位置
function makeTopRightPos(){
var arr=makeTopLeftPos(r,a.x+r,a.y+r);
var newArr=[];
for(var i=0,len=arr.i&i++){
rx=d.x+a.x-arr[i].x;
ry=arr[i].y;
newArr.push({x:rx,y:ry});
newArr.reverse();
return newA
function makeBottomLeftPos(){
var arr=makeTopLeftPos(r,a.x+r,a.y+r);
var newArr=[];
for(var i=0,len=arr.i&i++){
ry=c.y+a.y-arr[i].y;
rx=arr[i].x;
newArr.push({x:rx,y:ry});
newArr.reverse();
return newA
function makeBottomRightPos(){
var arr=makeTopRightPos();
var newArr=[];
for(var i=0,len=arr.i&i++){
ry=c.y+d.y-arr[i].y;
rx=arr[i].x;
newArr.push({x:rx,y:ry});
newArr.reverse();
return newA
注意，因为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)}];
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}];
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)}];
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)}];
var arr=trigonPos.map(function(item){
return item.x+'px'+' '+item.y+'px';
下面就拼接凭借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+')';
完整代码：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致

我要回帖

更多关于 刺激文爱微信聊天截图 的文章

 

随机推荐