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 + ')';
...全文
24054 12 打赏 收藏 转发到动态 举报
写回复
用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
  • 打赏
  • 举报
 回复
每缩放一个像素时，去判断四个顶点的坐标与 绿色画布边框坐标的关系即可
Simple-Crop:全网唯一支持裁剪图片任意角度旋转、交互体验媲美原生客户端的全平台图片裁剪组件
移动端缩放以双指中心为基准点；交互体验媲美原生客户端。安装npm install simple-crop示例微信小程序示例移动端示例左侧是 IOS 系统相册中原生的图片裁剪功能，右侧为 SimpleCrop 移动端示例。可以扫描二维码体验：...
微信小程序使用自定义组件实现图片双指缩放效果
  之前需要在小程序里实现对一张图片的单指拖动双指缩放效果。试了网上很多别人的代码已经微信自己的一些控件，基本双指缩放的时候都是会以左上角为原点进行缩放，而微信自己的那些控件使用的时候又比较有局限性...
小程序图片双指缩放
文章目录需求小程序提供的图片缩放能力自己实现的符合业务的图片缩放能力演示 需求 小程序提供的图片缩放能力 自己实现的符合业务的图片缩放能力 演示 ...
html5 双指缩放图片,js实现移动端图片预览：手势缩放， 手势拖动，双击放大......
查看示例效果：一、功能介绍图片预览主要有以下几个功能点组成：监听图片点击事件，进入图片预览模式自定义手势事件, (双指缩放，滑动，双击。。。)监听图片手势事件，通过 transform-matrix 实现图片的各种变换；二...
previewImage.js实现图片放大预览，滑动切换，双指缩放，图片缓存
previewImage.js 实现的移动端图片的预览，缩放功能。
JavaScript

87,902

社区成员

224,615

社区内容

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

加载中

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

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

+ 用AI写文章