H5에서 조각난 이미지 전환을 만드는 방법-H5 튜토리얼-php.cn

이번에는 H5에서 조각난 이미지 전환을 만드는 방법을 보여드리겠습니다. H5에서 조각난 이미지 전환을 할 때의 주의사항은 무엇인가요?

머리말

기존 규칙, 소스 코드가 먼저입니다. 이미지 영역은 클릭 가능하며, 클릭한 위치부터 애니메이션이 시작됩니다.

원래 이 효과를 3년전에 만들었었는데 수많은 p태그로 만든줄 알았는데 성능이 문제고 모바일 단말기에서는 아예 실행이 안되는군요. 최근에는 CSS를 아주 잘 만드시는 스승님께 기분 좋게 순수 CSS를 활용하는 방법을 배워서 구현해보고 싶었지만, 실력이 부족해서 포기할 수밖에 없었고, 결국엔 포기하게 되었습니다. 그것을 완성하기 위해 캔버스를 사용하기로 결정했습니다.

준비

1. 먼저 동일한 크기의 사진을 여러 장 준비합니다. 이 예에서는 사진 크기가 1920*1080입니다. (참고: 여기에서 표시되는 크기는 원본 사진의 크기입니다. 페이지의 CSS 크기). 나중에 사용하려면 나중에 사용할 수 있도록 HTML의 숨겨진 요소에 이러한 이미지를 추가하세요.

<p class=&#39;hide&#39;>
    <img class=&#39;img&#39; src=&#39;./images/a.jpg&#39; />
    <img class=&#39;img&#39; src=&#39;./images/b.jpg&#39; />
    <img class=&#39;img&#39; src=&#39;./images/c.jpg&#39; />
    <img class=&#39;img&#39; src=&#39;./images/d.jpg&#39; />
    <img class=&#39;img&#39; src=&#39;./images/e.jpg&#39; />
</p>

로그인 후 복사

.hide {
    display: none;
}

로그인 후 복사

2. 캔버스를 HTML에 삽입하고 크기를 맞춤설정하세요. 단, 가로세로 비율이 이미지 리소스와 일치하는지 확인해야 합니다. 이 예에서 캔버스 크기는 800 * 450입니다.

<canvas id="myCanvas" width="800" height="450">您的浏览器不支持 CANVAS</canvas>

로그인 후 복사

3. 기본 코드는 다음과 같습니다. 먼저 캔버스의 컨텍스트 개체를 가져온 다음 그림 개체를 가져오고 마지막으로 drawImage 메서드를 통해 그림을 그립니다.

var ctx = document.querySelector('#myCanvas').getContext('2d'),
    img = document.querySelector('.img');
ctx.beginPath();
ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.stroke();

로그인 후 복사

Implementation

이것은 여러 개의 작은 단위의 조합입니다. 각 단위는 그림의 작은 부분만을 담당합니다. 완전한 그림.

그러므로 소스코드를 자세히 설명하기 전에 먼저 캔버스에서 drawImage 함수의 사용법을 살펴보겠습니다. 이 함수의 매개변수는 9개를 사용해야 하고 매개변수도 많기 때문에 이러한 매개변수와 참조 객체의 의미를 명심해야 합니다.

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

로그인 후 복사

· img: 사용할 이미지, 캔버스 또는 비디오를 지정합니다

· sx: 자르기가 시작되는 x 좌표 위치

· sy: 자르기가 시작되는 y 좌표 위치

· swidth: 너비 잘라낼 이미지

· Sheight: 잘라낼 이미지의 높이

· height: 사용할 이미지의 높이

위의 매개변수가 나열되어 있어도 여전히 쉽게 잘라낼 수 있다고 믿습니다. 개발 중에 혼란을 겪습니다. 다음은 여러분에게 권장되는 작은 팁입니다. 첫 번째 img 매개변수 외에도 8개의 매개변수가 있습니다. 처음 4개 매개변수의 크기 참조 개체는 원본 이미지, 즉 마지막 이미지의 크기 참조 개체입니다. 4개의 매개변수는 Canvas, 즉 800 * 450입니다.

이 공식을 기억해두면 실제로 글을 쓸 때 어지러움증이 쉽지 않을 것입니다.

Grids

그리드는 캔버스에서 단위의 크기를 결정하는 것입니다. 가장 중요한 것은 단위 크기를 그림의 양면 길이로 균등하게 나눌 수 있다는 것입니다. 단위 크기는 그림의 너비와 높이여야 합니다. 공약수가 반드시 최대공약수이거나 최소공약수일 필요는 없습니다. 왜냐하면 공약수가 너무 크면 효과가 충분히 시원하지 않고, 너무 작으면 성능이 저하되기 때문입니다. 이 예에서는 대지 크기를 800 * 450으로 설정합니다. 여기서는 단위 크기로 25 * 25를 선택합니다. 즉, 전체 캔버스는 32 * 18, 총 576개의 셀로 구성됩니다. 그리드를 나눈 후 먼저 몇 가지 기본 매개변수를 계산해야 합니다.

var imgW = 1920, //图片原始宽/高
    imgH = 1080;
var conW = 800, //画布宽/高
    conH = 450;
var dw = 25, //画布单元格宽/高
    dh = 25;
var I = conH / dh, //单元行/列数
    J = conW / dw;
var DW = imgW / J, //原图单元格宽/高
    DH =imgH / I;

로그인 후 복사

처음 세 개의 매개변수 세트는 이전에 우리가 설정한 것입니다. 네 번째 행/열 세트를 계산할 때 다음 사항을 명확히 하세요. 행 수 = 캔버스 높이/셀 높이 = 화면 너비 / 셀 너비. 이게 거꾸로 되면 나중에 곤란해집니다. DW/DH의 마지막 그룹은 확대되어 원본 이미지의 셀 크기로 변환되며, 이는 나중에 이미지를 자르는 데 사용됩니다.

Draw 行数 = 画布高度 / 单元格高度；列数 = 画面宽度 / 单元格宽度。如果这点搞反了，后面就蒙逼了。最后一组 DW/DH 是放大换算到原图上的单元格尺寸，用于后面裁切图片使用。

绘制

循序渐进，我们先绘制最左上角的那个单元格。因为其原图裁切位置与画布摆放位置

단계적으로 왼쪽 위 모서리 셀을 먼저 그려보겠습니다. 원본 이미지 자르기 위치와 캔버스 배치 위치가 모두 (0, 0)이므로 가장 간단합니다.

ctx.drawImage(img, 0, 0, DW, DH, 0, 0, dw, dh);

로그인 후 복사

🎜🎜 해냈습니다. 이제 2행과 3열의 그림은 어떻게 써야 할까요? 🎜

var i = 2,
    j = 3;
ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);

로그인 후 복사

这里容易搞混的是：裁剪或摆放的横坐标为单元格宽度 * 列号，纵坐标为单元格高度 * 行号。

为了方便，封装一个负责渲染的纯净函数，其不参与逻辑，只会根据传入的图片对象及坐标进行绘制。

function handleDraw(img, i, j) {
    ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);
}

로그인 후 복사

封装好渲染方法之后，通过行数和列数的双重循环把整张图片渲染出来。

ctx.beginPath();
for (var i = 0; i < I; i ++) {
    for (var j = 0; j < J; j ++) {
        handleDraw(img, i, j);
    }
}
ctx.closePath();
ctx.stroke();

로그인 후 복사

完美~。其实到这一步核心部分就完成了，为什么呢？因为此时这幅图片已经是由几百个单元格拼合而成的，大家可以凭借天马行空的想像赋予其动画效果。

在分享自己的动画算法之前，先给大家看下拼错是什么样的~

还有点炫酷~

动画算法

下面分享下我的动画算法。Demo 里的效果是怎么实现的呢？

由于在画布的网格上，每个单元格都有行列号（i，j）。我希望能给出一个坐标（i，j）后，从近到远依次得出坐标周围所有菱形上的点。具体如下图，懒得做图了~

比如坐标为（3，3）

距离为 1 的点有（2，3）、（3，4）、（4，3）、（3，2）共4个；

距离为 2 的点有（1，3）、（2，4）、（3，5）、（4，4）、（5，3）、（4，2）、（3，1）、（2，2）共8个；

........

求出这一系列点的算法也很容易，因为菱形线上的点与坐标的 行号差值的绝对值 + 列号差值的绝对值 = 距离，具体如下：

function countAround(i, j, dst) {
    var resArr = [];
    for (var m = (i-dst); m <= (i+dst); m++) {
        for (var n = (j-dst); n <= (j+dst); n++) {
            if ((Math.abs(m-i) + Math.abs(n-j) == dst)) {
                resArr.push({x: m, y: n});
            }
        }
    }
    return resArr;
}

로그인 후 복사

该函数用于给定坐标和距离（dst），求出坐标周围该距离上的所有点，以数组的形式返回。但是上面的算法少了边界限制，完整如下：

countAround(i, j, dst) {
    var resArr = [];
    for (var m = (i-dst); m <= (i+dst); m++) {
        for (var n = (j-dst); n <= (j+dst); n++) {
            if ((Math.abs(m-i) + Math.abs(n-j) == dst) && (m >=0 && n >= 0) && (m <= (I-1) && n <= (J-1))) {
                resArr.push({x: m, y: n});
            }
        }
    }
    return resArr;
}

로그인 후 복사

这样我们就有了一个计算周围固定距离上所有点的纯净函数，接下来就开始完成动画渲染了。

首先编写一个用于清除单元格内容的清除函数，只需要传入坐标，就能清除该坐标单元格上的内容，等待之后绘制新的图案。

handleClear(i, j) {
    ctx.clearRect(dw*j, dh*i, dw, dh);
}

로그인 후 복사

anotherImg 为下一张图，最后通过 setInterval 不断向外层绘制新的图片完成碎片式的渐变效果。

var dst = 0,
intervalObj = setInterval(function() {
    var resArr = countAround(i, j, dst);
    resArr.forEach(function(item, index) {
        handleClear(item.x, item.y);
        handleDraw(anotherImg, item.x, item.y);
    });
        
    if (!resArr.length) {
        clearInterval(intervalObj);
    }
    dst ++;
}, 20);

로그인 후 복사

当 countAround 返回的数组长度为0，即到坐标点该距离上的所有点都在边界之外了，就停止定时器循环。至此所有核心代码已经介绍完毕，具体实现请查看源码。

现在给定画布上任意坐标，就能从该点开始向四周扩散完成碎片式的图片切换效果。

在自动轮播时，每次从预设好的8个点（四个角及四条边的中点）开始动画，8个点坐标如下：

var randomPoint = [{
    x: 0,
    y: 0
}, {
    x: I - 1,
    y: 0
}, {
    x: 0,
    y: J - 1
}, {
    x: I - 1,
    y: J - 1
}, {
    x: 0,
    y: Math.ceil(J / 2)
}, {
    x: I - 1,
    y: Math.ceil(J / 2)
}, {
    x: Math.ceil(I / 2),
    y: 0
}, {
    x: Math.ceil(I / 2),
    y: J - 1
}]

로그인 후 복사

点击时，则算出点击所在单元格坐标，从该点开始动画。

function handleClick(e) {
    var offsetX = e.offsetX,
    　　offsetY = e.offsetY,
    　　j = Math.floor(offsetX / dw),
    　　i = Math.floor(offsetY / dh),
    
    //有了i, j，开始动画...    
},

로그인 후 복사

目前该效果只是 Demo 阶段，有空的话会将该效果插件化，方便有兴趣的朋友使用。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！