js双指缩放图片比例不管在哪个位置都不超过边界

随_声 2020-07-22 03:51:44
问题就是在指定div的宽高中双指放大不能超过边界，图中2号可以随意在1号中拖动，也可以在随意位置对它进行缩放操作，如果在正中心固定位置可以使用缩放比例，那在随意位置呢，如何让它缩放比例不超出边界。




    // 应用在元素上的缩放比例

    var newScale = store.originScale * zoom;

     // 最大缩放比例限制

     if (newScale > 2) {

           newScale = 2;

     }

        

        // 记住使用的缩放值

        store.scale = newScale;

        // 图像应用缩放效果

        eleImg.style.transform = 'scale(' + newScale + ')';
...全文
24078 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
随_声 2020-08-14
  • 打赏
  • 举报
 回复
引用 4 楼 foreverpx 的回复:
是的，就是基本的矩形位置判断
请问有时间帮我看一下吗，最近真的有点急
随_声 2020-08-07
  • 打赏
  • 举报
 回复
引用 9 楼 foreverpx 的回复:
[quote=引用 8 楼 随_声的回复:][quote=引用 1 楼 foreverpx 的回复:]每缩放一个像素时，去判断四个顶点的坐标与 绿色画布边框坐标的关系即可
这样子判断上下左右的缩放坐标不得大于或小于边界，但是我放大到最大挨着边界时我又需要缩小就不能了进入判断中了，判断等于边界会无限放大。如果写进小于3里面又会执行多次出现闪现和数据边界值错乱的问题 

if (upper_right_X < upper_right_X2 && lower_left_Y < lower_left_Y2 && (parseInt(upper_left_X)) > upper_left_X2 && (parseInt(upper_left_Y)) > upper_left_Y2) {
                // 最大缩放比例限制
                if (newScale > 2) {
                    newScale = 2;
                }
                // 记住使用的缩放值
                store.scale = newScale;
                // 图像应用缩放效果
                eleImg.style.transform = 'scale(' + newScale + ')';
            }
            if (upper_left_X2 == upper_left_X && upper_left_Y2 == upper_left_Y && (upper_right_X2-upper_left_X2) == (upper_right_X2-upper_left_X) && (lower_left_Y2-upper_left_Y2) == (lower_left_Y2-upper_left_Y)) {              
                // 最大缩放比例限制
                if (newScale < 3) {
                    newScale = 1;
                }
                // 记住使用的缩放值
                store.scale = newScale;
                // 图像应用缩放效果
                eleImg.style.transform = 'scale(' + newScale + ')';
            }
[/quote] 不好意思哈，这几天比较忙，明天如果有空我看看你的代码[/quote]请问怎么样了
随_声 2020-08-05
  • 打赏
  • 举报
 回复
引用 9 楼 foreverpx 的回复:
[quote=引用 8 楼 随_声的回复:][quote=引用 1 楼 foreverpx 的回复:]每缩放一个像素时，去判断四个顶点的坐标与 绿色画布边框坐标的关系即可
这样子判断上下左右的缩放坐标不得大于或小于边界，但是我放大到最大挨着边界时我又需要缩小就不能了进入判断中了，判断等于边界会无限放大。如果写进小于3里面又会执行多次出现闪现和数据边界值错乱的问题 

if (upper_right_X < upper_right_X2 && lower_left_Y < lower_left_Y2 && (parseInt(upper_left_X)) > upper_left_X2 && (parseInt(upper_left_Y)) > upper_left_Y2) {
                // 最大缩放比例限制
                if (newScale > 2) {
                    newScale = 2;
                }
                // 记住使用的缩放值
                store.scale = newScale;
                // 图像应用缩放效果
                eleImg.style.transform = 'scale(' + newScale + ')';
            }
            if (upper_left_X2 == upper_left_X && upper_left_Y2 == upper_left_Y && (upper_right_X2-upper_left_X2) == (upper_right_X2-upper_left_X) && (lower_left_Y2-upper_left_Y2) == (lower_left_Y2-upper_left_Y)) {              
                // 最大缩放比例限制
                if (newScale < 3) {
                    newScale = 1;
                }
                // 记住使用的缩放值
                store.scale = newScale;
                // 图像应用缩放效果
                eleImg.style.transform = 'scale(' + newScale + ')';
            }
[/quote] 不好意思哈，这几天比较忙，明天如果有空我看看你的代码[/quote] 好的，谢谢☆⌒(*＾-゜)v
foreverpx 2020-08-03
  • 打赏
  • 举报
 回复
引用 8 楼 随_声的回复:
[quote=引用 1 楼 foreverpx 的回复:]每缩放一个像素时，去判断四个顶点的坐标与 绿色画布边框坐标的关系即可
这样子判断上下左右的缩放坐标不得大于或小于边界，但是我放大到最大挨着边界时我又需要缩小就不能了进入判断中了，判断等于边界会无限放大。如果写进小于3里面又会执行多次出现闪现和数据边界值错乱的问题 

if (upper_right_X < upper_right_X2 && lower_left_Y < lower_left_Y2 && (parseInt(upper_left_X)) > upper_left_X2 && (parseInt(upper_left_Y)) > upper_left_Y2) {
                // 最大缩放比例限制
                if (newScale > 2) {
                    newScale = 2;
                }
                // 记住使用的缩放值
                store.scale = newScale;
                // 图像应用缩放效果
                eleImg.style.transform = 'scale(' + newScale + ')';
            }
            if (upper_left_X2 == upper_left_X && upper_left_Y2 == upper_left_Y && (upper_right_X2-upper_left_X2) == (upper_right_X2-upper_left_X) && (lower_left_Y2-upper_left_Y2) == (lower_left_Y2-upper_left_Y)) {              
                // 最大缩放比例限制
                if (newScale < 3) {
                    newScale = 1;
                }
                // 记住使用的缩放值
                store.scale = newScale;
                // 图像应用缩放效果
                eleImg.style.transform = 'scale(' + newScale + ')';
            }
[/quote] 不好意思哈，这几天比较忙，明天如果有空我看看你的代码
随_声 2020-08-03
  • 打赏
  • 举报
 回复
引用 1 楼 foreverpx 的回复:
每缩放一个像素时，去判断四个顶点的坐标与 绿色画布边框坐标的关系即可
这样子判断上下左右的缩放坐标不得大于或小于边界，但是我放大到最大挨着边界时我又需要缩小就不能了进入判断中了，判断等于边界会无限放大。如果写进小于3里面又会执行多次出现闪现和数据边界值错乱的问题 

if (upper_right_X < upper_right_X2 && lower_left_Y < lower_left_Y2 && (parseInt(upper_left_X)) > upper_left_X2 && (parseInt(upper_left_Y)) > upper_left_Y2) {
                // 最大缩放比例限制
                if (newScale > 2) {
                    newScale = 2;
                }
                // 记住使用的缩放值
                store.scale = newScale;
                // 图像应用缩放效果
                eleImg.style.transform = 'scale(' + newScale + ')';
            }
            if (upper_left_X2 == upper_left_X && upper_left_Y2 == upper_left_Y && (upper_right_X2-upper_left_X2) == (upper_right_X2-upper_left_X) && (lower_left_Y2-upper_left_Y2) == (lower_left_Y2-upper_left_Y)) {              
                // 最大缩放比例限制
                if (newScale < 3) {
                    newScale = 1;
                }
                // 记住使用的缩放值
                store.scale = newScale;
                // 图像应用缩放效果
                eleImg.style.transform = 'scale(' + newScale + ')';
            }
随_声 2020-07-30
  • 打赏
  • 举报
 回复
引用 6 楼 foreverpx 的回复:
[quote=引用 5 楼 随_声的回复:][quote=引用 4 楼 foreverpx 的回复:]是的，就是基本的矩形位置判断

这样可以了，但有个BUG就是因为这是按比例缩放的，如果我差一20px就到边界了，放大还是按比例缩放的，

引用 4 楼 foreverpx 的回复:
是的，就是基本的矩形位置判断

实现是实现了，但效果不太好[/quote]
代码能发给我吗，我帮你看看[/quote]


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="../css/jquery-ui.min.css">

    <link rel="stylesheet" href="../css/bootstrap.css">

    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <style>

        body{margin:40px;}

        #sd{

            width: 60%;height: 60%; position: absolute;background: #2b542c;

        }

        #sdh{

            width:50%;

            height:50%;

            background: #f94a34;

        }

        #image{

            width:100%;

            height:100%;

        }

        #fgh{

            position: absolute;

            top: 70%;

        }

        #ttt{

            position: absolute;

            top: 80%;

        }

    </style>

</head>

<body id="body">

<div id="sd">

    <div id="sdh"><img id="image" src="../image/p1.png"></div>

</div>

<div id="fgh">

    <div id="fgh-div1"></div>

    <div id="fgh-div2"></div>

</div>

<div id="ttt">

    <div id="ttt-div1"></div>

    <div id="ttt-div2"></div>

</div>

<script src="../js/jquery-2.1.1.min.js"></script>

<script src="../js/jquery-ui.min.js"></script>

<script src="../js/jquery.ui.touch-punch.js"></script>

<script src="../js/jquery.ui.touch-punch.min.js"></script>

<script src="../js/touch.js"></script>

<script>

    $(function () {

        $("#sdh").draggable({

            containment: '#sd',

        });

    });



    var eleImg = document.querySelector('#sdh');

    var store = {

        scale: 1

    };



    // 缩放事件的处理

    eleImg.addEventListener('touchstart', function (event) {

        var touches = event.touches;

        var events = touches[0];

        var events2 = touches[1];



        event.preventDefault();



        // 第一个触摸点的坐标

        store.pageX = events.pageX;

        store.pageY = events.pageY;

        store.moveable = true;



        if (events2) {

            store.pageX2 = events2.pageX;

            store.pageY2 = events2.pageY;

        }



        store.originScale = store.scale || 1;

    });

    document.addEventListener('touchmove', function (event) {

        if (!store.moveable) {

            return;

        }



        event.preventDefault();

        var touches = event.touches;

        var events = touches[0];

        var events2 = touches[1];

        // 双指移动

        if (events2) {

            // 第2个指头坐标在touchmove时候获取

            if (!store.pageX2) {

                store.pageX2 = events2.pageX;

            }

            if (!store.pageY2) {

                store.pageY2 = events2.pageY;

            }



            // 获取坐标之间的举例

            var getDistance = function (start, stop) {

                return Math.hypot(stop.x - start.x, stop.y - start.y);

            };



            // 双指缩放比例计算

            var zoom = getDistance({

                x: events.pageX,

                y: events.pageY

            }, {

                x: events2.pageX,

                y: events2.pageY

            }) /

            getDistance({

                x: store.pageX,

                y: store.pageY

            }, {

                x: store.pageX2,

                y: store.pageY2

            });



            var a_x = $("#body").offset().left;

            var a_y = $("#body").offset().top;

            var xx = $("#sd").offset().left;

            var yy = $("#sd").offset().top;

            var ww = $("#sd").outerWidth() + 1;

            var hh = $("#sd").outerHeight() + 1;

            $("#fgh-div1").html("原：X:::" + xx + "Y:::" + yy + "W:::" + ww + "H:::" + hh);

            var ww2 = $(eleImg).width();

            var hh2 = $(eleImg).height();

            var xx2 = $(eleImg).offset().left;

            var yy2 = $(eleImg).offset().top;

            $("#ttt-div1").html("原：W:::" + ww2 + "H:::" + hh2);



            //元素获取左（上下），右(上下)角的位置

            var upper_right_X = (xx2 - xx) + ww2;//右上角X

            var lower_left_Y = (yy2 - yy) + hh2;//左下角Y

            var upper_left_X = (xx2 - xx);//左上角X

            var upper_left_Y = (yy2 - yy);//左上角Y

            if (upper_left_X < 0) {

                upper_left_X = 0;

            }

            if (upper_left_Y < 0) {

                upper_left_Y = 0;

            }

            //获取边界窗口的左（上下），右(上下)角的位置

            var upper_right_X2 = (xx - a_x) + ww;//右上角X

            var lower_left_Y2 = (yy - a_y) + hh;//左下角Y

            var upper_left_X2 = (xx - a_x);//左上角X

            var upper_left_Y2 = (yy - a_y);//左上角Y

            if (upper_left_X2 < 0) {

                upper_left_X2 = 0;

            }

            if (upper_left_Y2 < 0) {

                upper_left_Y2 = 0;

            }

            //alert(upper_right_X + "右上角X::::左下角Y" + lower_left_Y + "::::左上角X" + upper_left_X + "::::左上角Y" + upper_left_Y);

            //alert(upper_right_X2 + "右上角X::::左下角Y" + lower_left_Y2 + "::::左上角X" + upper_left_X2 + "::::左上角Y" + upper_left_Y2);

            // 应用在元素上的缩放比例

            var newScale = store.originScale * zoom;



            if (upper_right_X < upper_right_X2 && lower_left_Y < lower_left_Y2 && upper_left_X > upper_left_X2 && upper_left_Y > upper_left_Y2)    {//判断与边界的关系

                // 最大缩放比例限制

                if (newScale > 2) {

                    newScale = 2;

                }

                // 记住使用的缩放值

                store.scale = newScale;

                // 图像应用缩放效果

                eleImg.style.transform = 'scale(' + newScale + ')';

            }

        }

    });

    document.addEventListener('touchend', function () {//手指离开屏幕后触发

        store.moveable = false;

        delete store.pageX2;

        delete store.pageY2;

    });

    document.addEventListener('touchcancel', function () {

        store.moveable = false;

        delete store.pageX2;

        delete store.pageY2;

    });

</script>

</body>

</html>

是我的判断有问题吗？
这个缩放是我在别人的原代码基础上改的。
原代码链接，地址：https://www.zhangxinxu.com/wordpress/2020/06/mobile-event-touches-zoom-sacle/
foreverpx 2020-07-29
  • 打赏
  • 举报
 回复
引用 5 楼 随_声的回复:
[quote=引用 4 楼 foreverpx 的回复:]是的，就是基本的矩形位置判断
这样可以了，但有个BUG就是因为这是按比例缩放的，如果我差一20px就到边界了，放大还是按比例缩放的，
引用 4 楼 foreverpx 的回复:
是的，就是基本的矩形位置判断
实现是实现了，但效果不太好[/quote] 代码能发给我吗，我帮你看看
随_声 2020-07-29
  • 打赏
  • 举报
 回复
引用 4 楼 foreverpx 的回复:
是的，就是基本的矩形位置判断
这样可以了，但有个BUG就是因为这是按比例缩放的，如果我差一20px就到边界了，放大还是按比例缩放的，
引用 4 楼 foreverpx 的回复:
是的，就是基本的矩形位置判断
实现是实现了，但效果不太好
foreverpx 2020-07-27
  • 打赏
  • 举报
 回复
是的，就是基本的矩形位置判断
随_声 2020-07-27
  • 打赏
  • 举报
 回复
引用 1 楼 foreverpx 的回复:
每缩放一个像素时，去判断四个顶点的坐标与 绿色画布边框坐标的关系即可

我也想到了，但是怎么去判断呢，if(第一个点>第一条边&&第二个点>第二条边&&第三个点<第三条边&&第四个点<第四条边),这样吗？
随_声 2020-07-24
  • 打赏
  • 举报
 回复
引用 1 楼 foreverpx 的回复:
每缩放一个像素时，去判断四个顶点的坐标与 绿色画布边框坐标的关系即可
怎么判断呢，是直接判断放大的过程中四个点不能大于或小于绿色画布的四个点吗？
foreverpx 2020-07-22
  • 打赏
  • 举报
 回复
每缩放一个像素时，去判断四个顶点的坐标与 绿色画布边框坐标的关系即可
js实现图片缩放与拖动
js实现图片缩放与拖动，纯js，有例子，点击就可以用
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。 movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动
微信小程序手势缩放图片
微信小程序手势缩放图片,移动查看组件,简单的配置直接可以使用
【微信小程序代码】图片手指缩放scale
这是微信小程序代码，图片手指缩放功能，不过问题就是不能够固定后移动图片
图片手指缩放css，js
图片手指缩放css，js
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章