preface

I don’t know how much you use blue Lake, but I often use it. After uploading the prototype design to Blue Lake, the front-end developer can start the preparation of static pages. For the page details are not very clear you can use the scroll wheel zoom and then drag view, or very convenient. So I spent some time doing some research. I want to share with you today.

implementation

HTML

<div class="container">
    <img id="image" alt="">
</div>
<div class="log"></div>
Copy the code

js

Set the width, height and center of the image

/ / get the dom
const container = document.querySelector('.container');
const image = document.getElementById('image');
const log = document.querySelector('.log');
// Global variables
let result,
    x,
    y,
    scale = 1,
    isPointerdown = false.// Press the icon
    point1 = { x: 0.y: 0 }, // The first point coordinates
    diff = { x: 0.y: 0 }, // The difference from the last Pointermove
    lastPointermove = { x: 0.y: 0 }; // Used to calculate diff
// Bind the event after the image is loaded
image.addEventListener('load'.function () {
    result = getImgSize(image.naturalWidth, image.naturalHeight, window.innerWidth, window.innerHeight);
    image.style.width = result.width + 'px';
    image.style.height = result.height + 'px';
    x = (window.innerWidth - result.width) * 0.5;
    y = (window.innerHeight - result.height) * 0.5;
    image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(1)';
    // Drag and drop to view
    drag();
    // Scroll wheel zoom
    wheelZoom();
});
image.src = '.. /images/liya.jpg';
/** * Get the image scale *@param {number} naturalWidth 
* @param {number} naturalHeight 
* @param {number} maxWidth 
* @param {number} maxHeight 
* @returns * /
function getImgSize(naturalWidth, naturalHeight, maxWidth, maxHeight) {
    const imgRatio = naturalWidth / naturalHeight;
    const maxRatio = maxWidth / maxHeight;
    let width, height;
    // If the actual image width to height ratio >= display width to height ratio
    if (imgRatio >= maxRatio) {
        if (naturalWidth > maxWidth) {
            width = maxWidth;
            height = maxWidth / naturalWidth * naturalHeight;
        } else{ width = naturalWidth; height = naturalHeight; }}else {
        if (naturalHeight > maxHeight) {
            width = maxHeight / naturalHeight * naturalWidth;
            height = maxHeight;
        } else{ width = naturalWidth; height = naturalHeight; }}return { width: width, height: height }
}
Copy the code

Drag and drop to view picture logic

// Drag and drop to view
function drag() {
    / / bind pointerdown
    image.addEventListener('pointerdown'.function (e) {
        isPointerdown = true;
        image.setPointerCapture(e.pointerId);
        point = { x: e.clientX, y: e.clientY };
        lastPointermove = { x: e.clientX, y: e.clientY };
    });
    / / bind pointermove
    image.addEventListener('pointermove'.function (e) {
        if (isPointerdown) {
            const current1 = { x: e.clientX, y: e.clientY };
            diff.x = current1.x - lastPointermove.x;
            diff.y = current1.y - lastPointermove.y;
            lastPointermove = { x: current1.x, y: current1.y };
            x += diff.x;
            y += diff.y;
            image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ') ';
            log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>scale = ${scale.toFixed(5)}`;
        }
        e.preventDefault();
    });
    / / bind pointerup
    image.addEventListener('pointerup'.function (e) {
        if (isPointerdown) {
            isPointerdown = false; }});/ / bind pointercancel
    image.addEventListener('pointercancel'.function (e) {
        if (isPointerdown) {
            isPointerdown = false; }}); }Copy the code

Scroll wheel scaling logic

// Scroll wheel zoom
function wheelZoom() {
    container.addEventListener('wheel'.function (e) {
        let ratio = 1.1;
        / / to narrow
        if (e.deltaY > 0) {
            ratio = 0.9;
        }
        // The target element is img. The mouse is over img, and the mouse position is the zoom center. Otherwise, the default zoom center is the image center
        if (e.target.tagName === 'IMG') {
            const origin = { 
                x: (ratio - 1) * result.width * 0.5.y: (ratio - 1) * result.height * 0.5
            };
            // Calculate the offset
            x -= (ratio - 1) * (e.clientX - x) - origin.x;
            y -= (ratio - 1) * (e.clientY - y) - origin.y;
        }
        scale *= ratio;
        image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ') ';
        log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>scale = ${scale.toFixed(5)}`;
        e.preventDefault();
    });
}
Copy the code

Demo: jsdemo. Codeman. Top/HTML/wheelZ…