封装的拖拽与放大缩小， 旋转

发表于 | 分类于

封装的拖拽与放大缩小， 旋转

首先基础的有两个元素来控制旋转和放大
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
//html和css先为这样
	<style>
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            position: relative;
            width: 500px;
            height: 500px;
            background: red;
            cursor: pointer;
        }

        .rotate {
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .del {
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
        }

        .deag {
            cursor: pointer;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50px;
            height: 50px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

    <div class="box">
        拖拽移动
        <i class="rotate">旋转</i>
        <i class="del">删除</i>
        <i class="deag">拖拽放大缩小</i>
    </div>

js部分

旋转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var preX, preY; //上一次鼠标点的坐标
var curX, curY; //本次鼠标点的坐标
var preAngle; //上一次鼠标点与圆心(150,150)的X轴形成的角度(弧度单位)
var transferAngle; //当前鼠标点与上一次preAngle之间变化的角度
var a = 0;
$(".rotate").mousedown(function(e) {
    e.stopPropagation();
    e.preventDefault();
    //获取圆心（盒子距离浏览器的距离+自身宽高的一半）
    let oldY = $(".box").offset().top + $(".box")[0].offsetHeight / 2;
    let oldX = $(".box").offset().left + $(".box")[0].offsetWidth / 2;
    //按钮父元素
    let myimg = e.target.parentElement;
    //clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
    preX = e.clientX;
    preY = e.clientY;
    //atan2() 方法可返回从 x 轴到点 (x,y) 之间的角度。
    //计算当前点击的点与圆心的X轴的夹角(弧度) --> 上半圆为负(0 ~ -180), 下半圆未正[0 ~ 180]
    preAngle = Math.atan2(preY - oldY, preX - oldX);

    document.onmousemove = function(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        //新的点的位置，即鼠标的(x,y)的位置
        curX = event.clientX;
        curY = event.clientY;
        //移动后的鼠标点与圆心的X轴形成的角度(弧度单位)
        var curAngle = Math.atan2(curY - oldY, curX - oldX);
        transferAngle = curAngle - preAngle;
        a += (transferAngle * 180 / Math.PI);
        myimg.style.transform = "rotate(" + a + "deg)";
        //移动后坐标点重新赋值
        preX = curX;
        preY = curY;
        preAngle = curAngle;
        ev.target.onmouseup = function(e) {
            document.onmousedown = null;
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
})
放大缩小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(".deag").mousedown(function(e) {
    let target = e.target;
    let mybox = target.parentElement; //盒子
    // 阻止冒泡,避免缩放时触发移动事件
    e.stopPropagation();
    e.preventDefault();
    //获取盒子的长宽和点击时候鼠标距离浏览器的距离
    var pos = {
        'w': mybox.offsetWidth,
        'h': mybox.offsetHeight,
        'x': e.clientX,
        'y': e.clientY
    };
    document.onmousemove = function(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        //clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
        //Math.max返回两个数值的最大值，此处用来设置最小宽度
        var w = Math.max(200, ev.clientX - pos.x + pos.w)
        // 新的宽/旧的宽 得到比例尺
        var tt = w / pos.w;
        //高也乘以比例尺达到等比放大缩小
        var h = pos.h * tt;
        //offsetWidth返回元素的宽度
        //offsetTop返回元素的上外缘距离最近采用定位父元素内壁的距离，
        //如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离
        mybox.style.width = w + 'px';
        mybox.style.height = h + 'px';
        //	释放事件
        ev.target.onmouseup = function(e) {
            document.onmousedown = null;
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
})
拖拽
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(".box").mousedown(function(e) {
    var nowshowimg = e.target;
    // 浏览器有一些图片的默认事件,这里要阻止
    e.preventDefault();
    var nowbox = e.target;
    //获取鼠标在盒子内的距离
    var disX = e.clientX - nowbox.style.left.slice(0, -2);
    var disY = e.clientY - nowbox.style.top.slice(0, -2);
    nowshowimg.onmousemove = function(ev) {
        // ev.preventDefault();
        //获取鼠标移动后整个盒子距离浏览器的距离
        var x = ev.clientX - disX;
        var y = ev.clientY - disY;
        // 图形移动的边界判断
        x = x <= 0 ? 0 : x;
        x = x >= document.offsetWidth - nowshowimg.offsetWidth ? document.offsetWidth - nowshowimg.offsetWidth : x;
        y = y <= 0 ? 0 : y;
        y = y >= document.offsetHeight - nowshowimg.offsetHeight ? document.offsetHeight - nowshowimg.offsetHeight : y;
        nowbox.style.left = x + 'px';
        nowbox.style.top = y + 'px';
    }
    nowshowimg.onmouseup = function(ev) {
        // ev.preventDefault();
        nowshowimg.onmousemove = null;
        nowshowimg.onmouseup = null;
    }

})