32 lines
642 B
JavaScript
32 lines
642 B
JavaScript
|
(function () {
|
||
|
|
const image = document.querySelector(".myPreview__image");
|
||
|
|
|
||
|
|
function toCssMatrix(transform) {
|
||
|
|
return `matrix3d(${toMatrix(transform.coeffs).join(",")})`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function toMatrix(t) {
|
||
|
|
// prettier-ignore
|
||
|
|
return [
|
||
|
|
t[0], t[3], 0, t[6],
|
||
|
|
t[1], t[4], 0, t[7],
|
||
|
|
0, 0, 1, 0,
|
||
|
|
t[2], t[5], 0, t[8]
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Event handlers
|
||
|
|
*/
|
||
|
|
|
||
|
|
document.addEventListener("myPointsChanged", (event) => {
|
||
|
|
const points = event.detail.reduce(
|
||
|
|
(result, { x, y }) => [...result, x, y],
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
|
||
|
|
const transform = new PerspT([300, 0, 0, 0, 0, 300, 300, 300], points);
|
||
|
|
image.style.transform = toCssMatrix(transform);
|
||
|
|
});
|
||
|
|
})();
|