console 命令行工具 X clear
console
https://jsbin.com/royekuwule/3/edit?html,css,js,console,output<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            position: relative;
            margin-left: 100px;
            margin-top: 100px;
            width: 400px;
            height: 300px;
            overflow: scroll;
        }
        .image-wrap {
            position: relative;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="image-wrap">
            <image class="image" src="https://img.ixintu.com/download/jpg/202010/3cae9167e60640b41fbf9d104c548049_800_525.jpg!con"></image>
        </div>
    </div>

    <button class="btn-rotate">旋转</button>
    <script>
        // 增加鼠标点击事件，在 container 中标记一个坐标点，同时记录点的坐标
        const point = {
            x: 0,
            y: 0
        }


        const imageWrap = document.querySelector('.image-wrap')

        // 在图片加载完成以后，设置 imageWrap 的宽度和高度
        const image = document.querySelector('.image')
        image.addEventListener('load', function() {
            imageWrap.style.width = image.width + 'px'
            imageWrap.style.height = image.height + 'px'
        })


        imageWrap.addEventListener('click', function(e) {
            const rect = imageWrap.getBoundingClientRect()
            point.x = e.clientX - rect.left
            point.y = e.clientY - rect.top
            console.log(point)
            // 以点坐标生成一个圆点，直径为 20px
            // 如果已有圆，就不生成
            if (document.querySelector('.circle')) {
                return
            }

            const circle = document.createElement('div')
            circle.classList.add('circle')
            circle.style.width = '20px'
            circle.style.height = '20px'
            circle.style.borderRadius = '50%'
            circle.style.backgroundColor = 'red'
            circle.style.position = 'absolute'
            circle.style.left = point.x - 10 + 'px'
            circle.style.top = point.y - 10 + 'px'
            imageWrap.appendChild(circle)

            const handleMove = (e) => {
                const rect = imageWrap.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                // 获取图片尺寸
                const img = imageWrap.querySelector('.image');
                const imgWidth = img.offsetWidth;
                const imgHeight = img.offsetHeight;
                
                // 根据旋转角度调整边界限制
                let limitedX, limitedY;
                switch (rotationDegree) {
                    case 90:
                        limitedX = Math.max(10, Math.min(x, imgHeight - 10));
                        limitedY = Math.max(10, Math.min(y, imgWidth - 10));
                        break;
                    case 270:
                        limitedX = Math.max(10, Math.min(x, imgHeight - 10));
                        limitedY = Math.max(10, Math.min(y, imgWidth - 10));
                        break;
                    default:
                        limitedX = Math.max(10, Math.min(x, imgWidth - 10));
                        limitedY = Math.max(10, Math.min(y, imgHeight - 10));
                }
                
                // 更新圆点位置
                circle.style.left = (limitedX - 10) + 'px';
                circle.style.top = (limitedY - 10) + 'px';
                
                // 更新记录的坐标
                point.x = limitedX;
                point.y = limitedY;
            }

            // 圆点支持拖动
            circle.addEventListener('mousedown', function(e) {
                e.preventDefault()
                const rect = imageWrap.getBoundingClientRect()
                const startX = e.clientX - rect.left
                const startY = e.clientY - rect.top
                document.addEventListener('mousemove', handleMove)
                document.addEventListener('mouseup', function() {
                    document.removeEventListener('mousemove', handleMove)
                    document.removeEventListener('mouseup', function() {})
                })
            })
        })

        const btnRotate = document.querySelector('.btn-rotate')
        let rotationDegree = 0;
        btnRotate.addEventListener('click', () => {
            rotationDegree = (rotationDegree + 90) % 360;
            const img = imageWrap.querySelector('.image');
            const circle = document.querySelector('.circle');
            
            if (circle) {
                const imgWidth = img.offsetWidth;
                const imgHeight = img.offsetHeight;
                console.log(imgWidth, imgHeight)
                const circleX = parseFloat(circle.style.left) + 10; // 当前x坐标（加上圆点半径）
                const circleY = parseFloat(circle.style.top) + 10;  // 当前y坐标（加上圆点半径）
                
                let newX, newY;
                switch (rotationDegree) {
                    case 90:
                        newX = imgHeight - circleY;
                        newY = circleX;
                        break;
                    case 180:
                        newX = imgWidth - circleY;
                        newY = circleX;
                        break;
                    case 270:
                        newX = imgHeight - circleY;
                        newY = circleX;
                        break;
                    case 0:
                        newX = imgWidth - circleY;
                        newY = circleX;
                        break;
                }
                
                circle.style.left = (newX - 10) + 'px';
                circle.style.top = (newY - 10) + 'px';
                console.log(newX, newY)
            }
            
            // 根据旋转角度设置不同的变换原点和位移
            switch (rotationDegree) {
                case 90:
                    img.style.transform = `rotate(90deg) translateY(-100%)`;
                    img.style.transformOrigin = 'left top';
                    break;
                case 180:
                    img.style.transform = `rotate(180deg) translate(-100%, -100%)`;
                    img.style.transformOrigin = 'left top';
                    break;
                case 270:
                    img.style.transform = `rotate(270deg) translateX(-100%)`;
                    img.style.transformOrigin = 'left top';
                    break;
                case 0:
                    img.style.transform = 'rotate(0deg)';
                    img.style.transformOrigin = 'left top';
                    break;
            }
        })
    </script>
</body>
</html>