玻璃破碎效果

玻璃破碎效果，大家可以想一想，比如拿一块砖头砸玻璃，肯定是由砖块触碰玻璃的那个点位破碎的点，一点一点成圆形(或者蜘蛛网形)向外扩展看图，一般来说玻璃破碎之后都应该是不规则形状的，我们这边为了简单就用的三角形

破碎特点

越靠近撞击原点，破碎的块越小，破碎的块越多

五角星5.png

下面是实现之后的效果

2022-07-17 183040.gif

我们这里用到了TweenMax插件和delaunay插件 TweenMax主要是做动画用的 delaunay 计算三角形的的三个点的坐标

核心思想

首先我们要获取点击图片的点的坐标，以获取的坐标点为圆心，一层一层往外扩散直到图片的最大宽和高，以当前的圆心点及扩散范围的半径，用delaunay里的方法计算三角形的三个点的坐标，然后我们使用canvas去画这个破碎的图片，每个破碎的三角块，都是一个canvas画布。

    // 以上图为例 a b c 就是扩散的范围 c 就是在个范围扩散的点 需要以这个点为起点利用Delaunay插件的方法triangulate 计算三角形的三个点
    var rings = [           
            {r:50, c:30},
            {r:150, c:20},
            {r:300, c:10},
            // {r:400, c:20},
            // {r:500, c:20},
            {r:800, c:15},
            // {r:1200, c:20} 
        ],
        x,
        y,
        centerX = clickPosition[0],  
        centerY = clickPosition[1];

    vertices.push([centerX, centerY]); // 第一个点是 鼠标点击的点 以这个点为圆心去扩散 扩散的范围rings

    rings.forEach(function(ring) {
        var radius = ring.r, // 原始的扩散半径
            count = ring.c, // 扩散点
            variance = radius * 0.25; // 扩散半径

        for (var i = 0; i < count; i++) {
            x = Math.cos((i / count) * TWO_PI) * radius + centerX + randomRange(-variance, variance); 
            y = Math.sin((i / count) * TWO_PI) * radius + centerY + randomRange(-variance, variance); 
            vertices.push([x, y]);
        }
    });

    vertices.forEach(function(v) { // 需要做一个过滤 把大于图片长宽的换掉
        v[0] = clamp(v[0], 0, imageWidth); // 
        v[1] = clamp(v[1], 0, imageHeight);
    });
    console.log(vertices)
    indices = Delaunay.triangulate(vertices); // 三角剖分算法 对这个
    console.log(indices)

我们在过程当中调用请看图，把三个点的坐标传了进去

计算444.jpg