Js to achieve the mouse position as the center of the wheel rotation picture

preface

I don’t know how much you use PS, but I also know a little simple image matting, to watermark, cutting, free transformation of what. When using the free transform, it is interesting to be able to adjust the transform center and combine it with rotation. So I spent some time doing some research. At the same time simplified the operation mode, with the mouse position as the center of the wheel rotation.

The formula for rotating a point around a point

P1(x1, y1) = P1(x1, y1) = P1(x1, y1) = P1(x1, y1) = P1(x1, y1)

$X1 is x0 minus x cosine of theta minus y0 minus y sine of theta plus x$

$Y1 is x0 minus x sin theta plus y0 minus y cosine theta plus y$

implementation

HTML

<div class="container">
    <img id="image" src=".. /images/liya.jpg" alt="">
</div>
<div class="log"></div>
Copy the code

js

/ / get the dom
const image = document.getElementById('image');
const log = document.querySelector('.log');
// Global variables
let result = { width: 400.height: 320 },
    x = (window.innerWidth - result.width) * 0.5,
    y = (window.innerHeight - result.height) * 0.5,
    rotate = 0;
// Center display
image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) rotate(' + rotate + 'deg)';
log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>rotate = ${rotate}`;
// Bind the wheel event
image.addEventListener('wheel'.function (e) {
    let angle = 10;
    // Rotate counterclockwise
    if (e.deltaY > 0) {
        angle = -10;
    }
    // transform-origin coordinates relative to the upper-left corner of the viewport
    const origin = {
        x: result.width * 0.5 + x,
        y: result.height * 0.5 + y
    };
    Transform-origin = transform-origin = transform-origin = transform-origin
    const a = {
        x: origin.x - e.clientX,
        y: e.clientY - origin.y
    };
    // Calculate the coordinates of point B after the Angle is rotated around the mouse origin (0, 0)
    const b = {
        x: (a.x - 0) * Math.cos(angle * Math.PI / 180) + (a.y - 0) * Math.sin(angle * Math.PI / 180) + 0.y: (a.x - 0) * Math.sin(angle * Math.PI / 180) - (a.y - 0) * Math.cos(angle * Math.PI / 180) + 0
    }
    // Calculate the offset
    x -= a.x - b.x;
    y += a.y + b.y;
    rotate = (rotate + angle) % 360;
    this.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) rotate(' + rotate + 'deg)';
    log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>rotate = ${rotate}`;
});
Copy the code

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