精华内容
下载资源
问答
  • 本文通过实例代码给大家讲解了Android 在viewPager中双指缩放图片双击缩放图片单指拖拽图片的实现思路及解决方案,需要的朋友参考下吧
  • 微信小程序实现双指缩放图片功能

    千次阅读 2020-04-27 10:27:35
    本文分析怎么在微信小程序实现双指缩放图片的功能。 实现过程 1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析; <!--index.wxml--> <view class='wrapper'> &...

    前言

    本文分析怎么在微信小程序实现双指缩放图片的功能。

    实现过程

    1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析;

    <!--index.wxml-->
    <view class='wrapper'>
      <view class="container">
        <view class="title">双指缩放图片</view>
        <scroll-view class='images' scroll-y="true" scroll-x="true" bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
          <image mode="aspectFit" src="../../images/big.jpg" style="width:{{scaleWidth }}px;height:{{scaleHeight}}px" bindload="imgload"></image>
          <!-- <image mode="aspectFit" src="../../images/small.jpg" style="width:{{scaleWidth }}px;height:{{scaleHeight}}px" bindload="imgload"></image> -->
        </scroll-view>
      </view>  
    </view>
    /**index.wxss**/
    .container {
        margin-top: 30rpx;
    }
    
    .container .title {
        margin-bottom: 20rpx;
        font-weight: bold;
    }

    2. 文件index.js存放所有功能的逻辑代码,主要思路是先计算触摸时双指的距离(distance),然后计算移动过程的双指距离并跟触摸时的距离的差值(distanceDiff)来计算缩放比例(newScale),最后用计算出的缩放比例来缩放图片(scaleWidth和scaleHeight);代码实现如下:

    1)新建公共方法calcDistance,用来计算双指的距离;

    2)新建方法imgload,当图片载入完毕时获取图片实际宽度(baseWidth)和高度(baseHeight)、用来计算的固定宽度(initWidth,原图宽度大于屏幕宽度则设置为屏幕宽度,反之则设置为原图宽度)和高度(initHeight,原图宽度大于屏幕宽度则设置为原图高度/倍数,反之则设置为原图高度)、图片缩放后的宽度(scaleWidth,初始化跟initWidth一致)和高度(scaleHeight,初始化跟initHeight一致);

    3)新建方法touchstartCallback,计算双指触摸时双指的距离distance;

    4)新建方法touchmoveCallback,计算手指移动时双指的距离distance,跟触摸距离相减得出差值distanceDiff;然后利用差值计算出缩放比例newScale,最后使用newScale缩放图片,从而实现缩放效果。

    //index.js
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        distance: 0, // 手指移动的距离
        scale: 1, // 缩放比例
        baseWidth: '', // 图片实际宽度
        baseHeight: '', // 图片实际高度
        initWidth: '', // 图片默认显示宽度
        initHeight: '', // 图片默认显示高度
        scaleWidth: '', // 图片缩放后的宽度
        scaleHeight: '', // 图片缩放后的高度
      },
      /**
       * 监听图片加载成功时触发
       */
      imgload: function (e) {
        this.multiple = e.detail.width / this.width; // 计算原图和默认显示的倍数
        let height = this.multiple > 1 ? e.detail.height / this.multiple : e.detail.height; // 等比例计算出默认高度
        let width = this.multiple > 1 ? this.width : e.detail.width;
        this.setData({
          baseWidth: e.detail.width, // 获取图片实际宽度
          baseHeight: e.detail.height, // 获取图片实际高度
          initWidth: width,
          initHeight: height,
          scaleWidth: width,
          scaleHeight: height,
        })
      },
      /**
       * 双手指触发开始 计算开始触发两个手指坐标的距离
       */
      touchstartCallback: function (e) {
        // 单手指缩放开始,不做任何处理
        if (e.touches.length == 1) return;
        let distance = this.calcDistance(e.touches[0], e.touches[1]);
        this.setData({
          'distance': distance,
        })
      },
      /**
       * 双手指移动   计算两个手指坐标和距离
       */
      touchmoveCallback: function (e) {
        // 单手指缩放不做任何操作
        if (e.touches.length == 1) return;
        let distance = this.calcDistance(e.touches[0], e.touches[1]);
        // 计算移动的过程中实际移动了多少的距离
        let distanceDiff = distance - this.data.distance;
        let newScale = this.data.scale + 0.005 * distanceDiff;
        
        if (newScale >= this.multiple && this.multiple > 2) { // 原图比较大情况
          newScale = this.multiple;
        } else if (this.multiple < 2 && newScale >= 2) { // 原图较小情况
          newScale = 2; // 最大2倍
        };
        // 最小缩放到0.3
        if (newScale <= 0.3) {
          newScale = 0.3;
        };
    
        let scaleWidth = newScale * this.data.initWidth;
        let scaleHeight = newScale * this.data.initHeight;
        this.setData({
          distance: distance,
          scale: newScale,
          scaleWidth: scaleWidth,
          scaleHeight: scaleHeight,
          diff: distanceDiff
        });
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 获取屏幕宽度
        this.width = wx.getSystemInfoSync().windowWidth;
      },
      /**
       * 计算两个手指距离
       */
      calcDistance(pos0, pos1) {
        let xMove = pos1.clientX - pos0.clientX;
        let yMove = pos1.clientY - pos0.clientY;
        return (Math.sqrt(xMove * xMove + yMove * yMove));
      }
    })

    扫描公众号,了解更多实例分享:

    展开全文
  • Android:实现最简单单指移动、双指缩放的图片组件: 1.单指移动,双指缩放。 2.可控制缩放范围,防止过大或过小;初始化时自动缩放至组件大小,并居中显示。 3.边界控制,防止图片“移出去了”。 4.可使用在xml中...

    本例实现了最简单的单指移动、双指缩放的图片组件,效果图如下:

         


         


    功能:

    1.单指移动,双指缩放。

    2.可控制缩放范围,防止过大或过小;初始化时自动缩放至组件大小,并居中显示。

    3.边界控制,防止图片“移出去了”。

    4.可使用在xml中,并自动适应组件大小。

    5.代码简洁!!!大笑


    核心代码:DragScaleView.java

    package com.sina.simplegestureimage;
    
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.support.annotation.NonNull;
    import android.util.AttributeSet;
    import android.view.GestureDetector;
    import android.view.MotionEvent;
    import android.view.ScaleGestureDetector;
    import android.view.View;
    
    /**
     * DragScaleView
     * Created by hanswim on 15-1-23.
     */
    public class DragScaleView extends View {
        //监听图片缩放
        private ScaleGestureDetector mScaleDetector;
        //监听图片移动
        private GestureDetector mGestureDetector;
    
        //当前的缩放比例
        private float mScaleFactor = 1.0f;
    
        public DragScaleView(Context context) {
            super(context);
        }
    
        public DragScaleView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init(context);
        }
    
        public DragScaleView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        private void init(Context context) {
            mScaleDetector = new ScaleGestureDetector(context, new SimpleScaleListenerImpl());
            mGestureDetector = new GestureDetector(context, new SimpleGestureListenerImpl());
        }
    
        private Paint bmpPaint = new Paint();
        //图片资源
        private Bitmap bmp;
        //图片的宽高
        private int bmpWidth, bmpHeight;
    
        public void setImageResource(int id) {
            bmp = BitmapFactory.decodeResource(getResources(), id);
            bmpWidth = bmp.getWidth();
            bmpHeight = bmp.getHeight();
    
            initViewSize();
    
            invalidate();
        }
    
        //绘制图片的起始位置
        private float mPosX, mPosY;
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
    
            if (bmp == null) {
                return;
            }
    
            if (!hasGetViewSize) {
                initViewSize();
            }
    
            canvas.save();
            checkBounds();
            //以图片的中心为基点进行缩放
            canvas.scale(mScaleFactor, mScaleFactor, mPosX + bmpWidth / 2, mPosY + bmpHeight / 2);
    
            canvas.drawBitmap(bmp, mPosX, mPosY, bmpPaint);
            canvas.restore();
        }
    
    //    private float lastX, lastY;
    
    //    private static final int INVALID_POINTER_ID = -1;
    //    private int mActivePointerId = INVALID_POINTER_ID;
    
        @Override
        public boolean onTouchEvent(@NonNull MotionEvent event) {
            //双指缩放
            mScaleDetector.onTouchEvent(event);
            //单指移动
            mGestureDetector.onTouchEvent(event);
    
            return true;
    
            //也可以自己实现“单指移动图片”
            /*
            int action = MotionEventCompat.getActionMasked(event);
    
            switch (action) {
                case MotionEvent.ACTION_DOWN: {
                    final int pointerIndex = MotionEventCompat.getActionIndex(event);
                    mActivePointerId = MotionEventCompat.getPointerId(event, pointerIndex);
    
                    lastX = event.getX();
                    lastY = event.getY();
                    break;
                }
                case MotionEvent.ACTION_MOVE: {
                    // Find the index of the active pointer and fetch its position
                    final int pointerIndex = MotionEventCompat.findPointerIndex(event, mActivePointerId);
                    float currentX = MotionEventCompat.getX(event, pointerIndex);
                    float currentY = MotionEventCompat.getY(event, pointerIndex);
    
                    mPosX += (currentX - lastX);
                    mPosY += (currentY - lastY);
                    invalidate();
    
                    lastX = currentX;
                    lastY = currentY;
    
                    break;
                }
                case MotionEvent.ACTION_POINTER_UP: {
                    final int pointerIndex = MotionEventCompat.getActionIndex(event);
                    final int pointerId = MotionEventCompat.getPointerId(event, pointerIndex);
    
                    if (pointerId == mActivePointerId) {
                        // This was our active pointer going up. Choose a new
                        // active pointer and adjust accordingly.
                        final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
                        lastX = MotionEventCompat.getX(event, newPointerIndex);
                        lastY = MotionEventCompat.getY(event, newPointerIndex);
                        mActivePointerId = MotionEventCompat.getPointerId(event, newPointerIndex);
                    }
    
    
                    break;
                }
    
                case MotionEvent.ACTION_UP: {
                    mActivePointerId = INVALID_POINTER_ID;
                    break;
                }
            }
            */
    
        }
    
        /**
         * 不能超出边界.
         * 原则是:图片较小时任意一条边都不能出了边界,图片较大任意一条边都不能进入边界。宽度和高度分别独立计算。
         */
        private void checkBounds() {
            if (mScaleFactor > widthScale) {
                //宽度方向已经填满
                mPosX = Math.min(mPosX, (mScaleFactor - 1) * (bmpWidth / 2));
                mPosX = Math.max(mPosX, viewWidth - bmpWidth - (mScaleFactor - 1) * (bmpWidth / 2));
            } else {
                mPosX = Math.max(mPosX, (mScaleFactor - 1) * (bmpWidth / 2));
                mPosX = Math.min(mPosX, viewWidth - bmpWidth - (mScaleFactor - 1) * (bmpWidth / 2));
            }
    
            if (mScaleFactor > heightScale) {
                //高度方向已经填满
                mPosY = Math.min(mPosY, (mScaleFactor - 1) * (bmpHeight / 2));
                mPosY = Math.max(mPosY, viewHeight - bmpHeight - (mScaleFactor - 1) * (bmpHeight / 2));
            } else {
                mPosY = Math.max(mPosY, (mScaleFactor - 1) * (bmpHeight / 2));
                mPosY = Math.min(mPosY, viewHeight - bmpHeight - (mScaleFactor - 1) * (bmpHeight / 2));
            }
        }
    
        private int viewWidth, viewHeight;
        //组件尺寸只需要获取一次
        private boolean hasGetViewSize;
    
        private void initViewSize() {
            viewWidth = getWidth();
            viewHeight = getHeight();
    
            if (viewWidth > 0 && viewHeight > 0) {
                hasGetViewSize = true;
    
                widthScale = 1.0f * viewWidth / bmpWidth;
                heightScale = 1.0f * viewHeight / bmpHeight;
                //初始缩放比例(使组件刚好铺满)
                mScaleFactor = Math.min(widthScale, heightScale);
    
                //初始时图片居中绘制
                mPosX = viewWidth / 2 - bmpWidth / 2;
                mPosY = viewHeight / 2 - bmpHeight / 2;
            }
        }
    
        /**
         * 宽度和高度放大多少倍时,刚好填满此方向的屏幕
         */
        private float widthScale, heightScale;
    
        //缩放
        private class SimpleScaleListenerImpl extends ScaleGestureDetector.SimpleOnScaleGestureListener {
            @Override
            public boolean onScale(ScaleGestureDetector detector) {
                mScaleFactor *= detector.getScaleFactor();
                //缩放倍数范围:0.3~3
                mScaleFactor = Math.max(0.3f, Math.min(mScaleFactor, 3.0f));
    
                invalidate();
                return true;
            }
        }
    
        //移动
        private class SimpleGestureListenerImpl extends GestureDetector.SimpleOnGestureListener {
            @Override
            public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
                mPosX -= distanceX;
                mPosY -= distanceY;
    
                invalidate();
                return true;
            }
        }
    }

    在Activity中使用:

    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.drag_scale);
    
            RadioButton landscapeRBtn = (RadioButton) findViewById(R.id.radio_landscape);
            final DragScaleView dragView = (DragScaleView) findViewById(R.id.drag_scale_view);
    
            dragView.setImageResource(R.drawable.cat_boarder);
    
            landscapeRBtn.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    if (isChecked) {
                        dragView.setImageResource(R.drawable.cat_boarder);
                    } else {
                        dragView.setImageResource(R.drawable.cat_boarder_p);
                    }
                }
            });
        }

    ======

    源代码即将奉上,尽情期待。


    展开全文
  • 参考过一篇文章:...缩放的图片需要放在class 为list div里面 <!doctype html> <html> <head> <meta http-equiv="Content-Type" co...

     

    参考过的一篇文章:https://blog.csdn.net/gl0ry/article/details/56055414

     

    html实例代码:

    缩放的图片需要放在class 为list 的div里面 

    <!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>图片缩放</title>
        <link rel="stylesheet" href="css/scale.css" type="text/css" />
    </head>
    <body>
        <div class="list">
             <img src="img/2.jpg" />
        </div>
        <section class="imgzoom_pack">
            <div class="imgzoom_x">X</div>
            <div class="imgzoom_img"><img src="" /></div>
        </section>
        <script src="js/scale.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function(event){
                ImagesZoom.init({
                    "elem": ".list"
                });
            }, false);
        </script>
    </body>
    </html>

    实现缩放 需要导入 scale.css 和 scale.js 

    scale.css代码:

    /**rest**/
    body, ul, li, section, div{
        padding:0;
        margin:0;
    }
    body{
        font-family:Arial,Roboto,'Droid Sans','Hiragino Sans GB',STXihei,'sans-serif';
        width:100%;
        -webkit-user-select:none;
        -webkit-touch-callout:none;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-text-size-adjust:none;
    }
    ul,li{
        list-style:none;
    }
    img{
        border:0;
    }
     
    .list{
        width:100%;
        padding:10px 0;
    }
    .list li{
        display:block;
        margin-bottom:10px;
        box-shadow:0 1px 2px rgba(0,0,0,.1), 0 -1px 2px rgba(0,0,0,.1);
    }
    .list li img{
        width:100%;
        height:auto;
    }
     
     
     
    /*弹框样式*/
    .imgzoom_pack{
        width:100%;
        height:100%;
        position:fixed;
        left:0;
        top:0;
        background:rgba(0,0,0,.7);
        display:none;
    }
    .imgzoom_pack .imgzoom_x{
        color:#fff;
        height:30px;
        width:30px;
        line-height:30px;
        background:#000;
        text-align:center;
        position:absolute;
        right:5px;
        top:5px;
        z-index:10;
        cursor:pointer;
    }
    .imgzoom_pack .imgzoom_img{
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        overflow:hidden;
    }
    .imgzoom_pack .imgzoom_img img{
        width:100%;
        position:absolute;
        top:50%;
    }

    scale.js的代码:

    我对scale.js 做了一点修改 实现了同比例缩放:

    self.element.style.height = imgHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变height

     

    self.element.style.height = self.imgBaseHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变height
    (function(window, undefined){
        var document = window.document,
            support = {
                transform3d: ("WebKitCSSMatrix" in window && "m11" in new WebKitCSSMatrix()),
                touch: ("ontouchstart" in window)
            };
             
        function getTranslate(x, y){
            var distX = x, distY = y;
            return support.transform3d ? "translate3d("+ distX +"px, "+ distY +"px, 0)" : "translate("+ distX +"px, "+ distY +"px)";
        }
     
        function getPage(event, page) {
            return support.touch ? event.changedTouches[0][page] : event[page];
        }
     
        var ImagesZoom = function(){};
     
        ImagesZoom.prototype = {
            // 给初始化数据
            init: function(param){
                var self   = this,
                    params = param || {};
                     
                var imgList   = document.querySelectorAll(params.elem + " img"),
                    zoomMask  = document.querySelector(".imgzoom_pack"),
                    zoomImg   = document.querySelector(".imgzoom_pack .imgzoom_img img"),
                    zoomClose = document.querySelector(".imgzoom_pack .imgzoom_x"),
                    imgSrc    = "";
     
                self.buffMove   = 3; //缓冲系数
                self.buffScale  = 1.1; //放大系数
                self.finger = false; //触摸手指的状态 false:单手指 true:多手指
                 
                self._destroy();
     
                zoomClose.addEventListener("click", function(){
                    zoomMask.style.cssText = "display:none";
                    zoomImg.src = "";
                    zoomImg.style.cssText = "";
     
                    self._destroy();
     
                    document.removeEventListener("touchmove", self.eventStop, false);
                }, false);
     
                for(var len=imgList.length,i=0; i<len; i++){
                    imgList[i].addEventListener("click", function(){
                        imgSrc = this.getAttribute("src");
                        zoomMask.style.cssText = "display:block";
                        zoomImg.src = imgSrc;
     
                        zoomImg.onload = function(){
                            zoomImg.style.cssText = "margin-top:-"+(zoomImg.offsetHeight/2)+"px";
     
                            // 禁止页面滚动
                            document.addEventListener("touchmove", self.eventStop, false);
                             
                            self.imgBaseWidth  = zoomImg.offsetWidth;
                            self.imgBaseHeight = zoomImg.offsetHeight;
     
                            self.addEventStart({
                                wrapX: zoomMask.offsetWidth,
                                wrapY: zoomMask.offsetHeight,
                                mapX: zoomImg.width,
                                mapY: zoomImg.height
                            });
                        }
                    }, false);
                }
            },
            addEventStart: function(param){
                var self   = this,
                    params = param || {};
     
                self.element = document.querySelector(".imgzoom_pack img");
     
                //config set
                self.wrapX = params.wrapX || 0;     //可视区域宽度
                self.wrapY = params.wrapY || 0;     //可视区域高度
                self.mapX  = params.mapX || 0;      //地图宽度
                self.mapY  = params.mapY || 0;      //地图高度
     
                self.outDistY = (self.mapY - self.wrapY)/2; //图片超过一屏的时候有用
                 
                self.width  = self.mapX - self.wrapX;   //地图的宽度减去可视区域的宽度
                self.height = self.mapY - self.wrapY;   //地图的高度减去可视区域的高度
     
                self.element.addEventListener("touchstart",function(e){
                    self._touchstart(e);
                },false);
                self.element.addEventListener("touchmove",function(e){
                    self._touchmove(e);
                },false);
                self.element.addEventListener("touchend",function(e){
                    self._touchend(e);
                },false);
            },
            // 重置坐标数据
            _destroy: function(){
                this.distX = 0;
                this.distY = 0;
                this.newX  = 0;
                this.newY  = 0;
            },
            // 更新地图信息
            _changeData: function(){
                this.mapX     = this.element.offsetWidth;     //地图宽度
                this.mapY     = this.element.offsetHeight;      //地图高度
                // this.outDistY = (this.mapY - this.wrapY)/2; //当图片高度超过屏幕的高度时候。图片是垂直居中的,这时移动有个高度做为缓冲带
                this.width    = this.mapX - this.wrapX;   //地图的宽度减去可视区域的宽度
                this.height   = this.mapY - this.wrapY;   //地图的高度减去可视区域的高度
            },
            _touchstart: function(e){
                var self = this;
     
                e.preventDefault();
     
                var touchTarget = e.targetTouches.length; //获得触控点数
     
                self._changeData(); //重新初始化图片、可视区域数据,由于放大会产生新的计算
     
                if(touchTarget == 1){
                    // 获取开始坐标
                    self.basePageX = getPage(e, "pageX");
                    self.basePageY = getPage(e, "pageY");
     
                    self.finger = false;
                }else{
                    self.finger = true;
     
                    self.startFingerDist = self.getTouchDist(e).dist;
                    self.startFingerX    = self.getTouchDist(e).x;
                    self.startFingerY    = self.getTouchDist(e).y;
                }
     
                console.log("pageX: "+getPage(e, "pageX"));
                console.log("pageY: "+getPage(e, "pageY"));
            },
            _touchmove: function(e){
                var self = this;
     
                e.preventDefault();
                e.stopPropagation();
     
                console.log("event.changedTouches[0].pageY: "+event.changedTouches[0].pageY);
                 
                var touchTarget = e.targetTouches.length; //获得触控点数
     
                if(touchTarget == 1 && !self.finger){
                    self._move(e);
                }
     
                if(touchTarget>=2){
                    self._zoom(e);
                }
            },
            _touchend: function(e){
                var self = this;
     
                self._changeData(); //重新计算数据
                if(self.finger){
                    self.distX = -self.imgNewX;
                    self.distY = -self.imgNewY;
                }
     
                if( self.distX>0 ){
                    self.newX = 0;
                }else if( self.distX<=0 && self.distX>=-self.width ){
                    self.newX = self.distX;
                    self.newY = self.distY;
                }else if( self.distX<-self.width ){
                    self.newX = -self.width;
                }
                self.reset();
            },
            _move: function(e){
                var self = this,
                    pageX = getPage(e, "pageX"), //获取移动坐标
                    pageY = getPage(e, "pageY");
     
                // 禁止默认事件
                // e.preventDefault();
                // e.stopPropagation();
     
                // 获得移动距离
                self.distX = (pageX - self.basePageX) + self.newX;
                self.distY = (pageY - self.basePageY) + self.newY;
     
                if(self.distX > 0){
                    self.moveX = Math.round(self.distX/self.buffMove);
                }else if( self.distX<=0 && self.distX>=-self.width ){
                    self.moveX = self.distX;
                }else if(self.distX < -self.width ){
                    self.moveX = -self.width+Math.round((self.distX+self.width)/self.buffMove);
                }
                self.movePos();
                self.finger = false;
            },
            // 图片缩放
            _zoom: function(e){
                var self = this;
                // e.preventDefault();
                // e.stopPropagation();
     
                var nowFingerDist = self.getTouchDist(e).dist, //获得当前长度
                    ratio         = nowFingerDist / self.startFingerDist, //计算缩放比
                    imgWidth      = Math.round(self.mapX * ratio), //计算图片宽度
                    imgHeight     = Math.round(self.mapY * ratio); //计算图片高度
     
                // 计算图片新的坐标
                self.imgNewX = Math.round(self.startFingerX * ratio - self.startFingerX - self.newX * ratio);
                self.imgNewY = Math.round((self.startFingerY * ratio - self.startFingerY)/2 - self.newY * ratio);
     
                if(imgWidth >= self.imgBaseWidth){
                    self.element.style.width = imgWidth + "px";
    				self.element.style.height = imgHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变height
                    self.refresh(-self.imgNewX, -self.imgNewY, "0s", "ease");
                    self.finger = true; 
                }else{
                    if(imgWidth < self.imgBaseWidth){ //缩放时 当前图片的宽度width 小于 原本的图片宽度时
                        self.element.style.width = self.imgBaseWidth + "px";
    					self.element.style.height = self.imgBaseHeight + "px" //实现同比例缩放 需要改变图片width的同时 改变height
                    }
                }
     
                self.finger = true;
            },
            // 移动坐标
            movePos: function(){
                var self = this;
     
                if(self.height<0){
                    if(self.element.offsetWidth == self.imgBaseWidth){
                        self.moveY = Math.round(self.distY/self.buffMove);
                    }else{
                        var moveTop = Math.round((self.element.offsetHeight-self.imgBaseHeight)/2);
                        self.moveY = -moveTop + Math.round((self.distY + moveTop)/self.buffMove);
                    }
                }else{
                    var a = Math.round((self.wrapY - self.imgBaseHeight)/2),
                        b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;
     
                    if(self.distY >= -a){
                        self.moveY = Math.round((self.distY + a)/self.buffMove) - a;
                    }else if(self.distY <= -b){
                        self.moveY = Math.round((self.distY + b)/self.buffMove) - b;
                    }else{
                        self.moveY = self.distY;
                    }
                }
                self.refresh(self.moveX, self.moveY, "0s", "ease");
            },
            // 重置数据
            reset: function(){
                var self = this,
                    hideTime = ".2s";
                if(self.height<0){
                    self.newY = -Math.round(self.element.offsetHeight - self.imgBaseHeight)/2;
                }else{
                    var a = Math.round((self.wrapY - self.imgBaseHeight)/2),
                        b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;
     
                    if(self.distY >= -a){
                        self.newY = -a;
                    }else if(self.distY <= -b){
                        self.newY = -b;
                    }else{
                        self.newY = self.distY;
                    }
                }
                self.refresh(self.newX, self.newY, hideTime, "ease-in-out");
            },
            // 执行图片移动
            refresh: function(x, y, timer, type){
                this.element.style.webkitTransitionProperty = "-webkit-transform";
                this.element.style.webkitTransitionDuration = timer;
                this.element.style.webkitTransitionTimingFunction = type;
                this.element.style.webkitTransform = getTranslate(x, y);
            },
            // 获取多点触控
            getTouchDist: function(e){
                var x1 = 0,
                    y1 = 0,
                    x2 = 0,
                    y2 = 0,
                    x3 = 0,
                    y3 = 0,
                    result = {};
     
                x1 = e.touches[0].pageX;
                x2 = e.touches[1].pageX;
                y1 = e.touches[0].pageY - document.body.scrollTop;
                y2 = e.touches[1].pageY - document.body.scrollTop;
     
                if(!x1 || !x2) return;
     
                if(x1<=x2){
                    x3 = (x2-x1)/2+x1;
                }else{
                    x3 = (x1-x2)/2+x2;
                }
                if(y1<=y2){
                    y3 = (y2-y1)/2+y1;
                }else{
                    y3 = (y1-y2)/2+y2;
                }
     
                result = {
                    dist: Math.round(Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))),
                    x: Math.round(x3),
                    y: Math.round(y3)
                };
                return result;
            },
            eventStop: function(e){
                e.preventDefault();
                e.stopPropagation();
            }
        };
     
        window.ImagesZoom = new ImagesZoom();
    })(this);

    以上代码 可以实现 点击一张图片 出现一个全屏的效果 点击全屏中的图片 可以进行双指 缩放

    配合 Swiper 滑动插件时 出现了 点击打开全频 全屏在swiper遮挡在Swiper下面的问题

    解决办法:

    将 最外两层的 z-index 设置为0

      <!-- Swiper -->
      <div class="swiper-container" style="z-index: 0;"> <!-- 这里需要将 z-index 设置为0 不然会覆盖在下面 -->
        <div class="swiper-wrapper" style="z-index: 0;"> <!-- 这里需要将 z-index 设置为0 不然会覆盖在下面 -->
          <div class="swiper-slide"><div class="list"><img src="img/bg1.jpg" /></div></div>
          <div class="swiper-slide"><div class="list"><img src="img/bg1.jpg" /></div></div>
          <div class="swiper-slide"><div class="list"><img src="img/bg1.jpg" /></div></div>
          <div class="swiper-slide"><div class="list"><img src="img/bg1.jpg" /></div></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination">
    		<span class="my-bullet2" tabindex="0" role="button" aria-label="Go to slide 2">2222</span> 
    	</div>
      </div>

     

    展开全文
  • 记录一下最近项目中用到点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失 一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: 1.html部分: ...

    记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失

    一.实现效果:

    页面原图展示:
    在这里插入图片描述

    点击图片后:
    在这里插入图片描述

    二.代码实现:

    1.html部分:
    在这里插入图片描述

    下面贴出主要 代码片段

    <div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index:2; width:100%;height:100%;display: none;">
    	<div id="innerdiv" style="position: absolute;">
    		<img id="bigimg" style="border: 5px solid #fff;" src="" />
    	</div>
    </div>
    

    2.js部分(用到jQuery,所以记得引入哦):
    这部分代码判断是移动端还是PC端,返回false为移动端,true为PC端.用它返回的值来区别是否移动端然后执行之后移动端事件.

    在这里插入图片描述
    下面展示一些 代码片段

    $(function() {
    			$(".main-newsdate img").click(
    					function() {
    						var _this = $(this);//将当前的pimg元素作为_this传入函数 
    						imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
    //移动端手指移动事件,如果不需要移动端手指事件,这一部分内容可以不加,只要上面两行代码以及imgShow()事件
    						var eleImg = document.querySelector('#innerdiv');
    						var store = {
    							scale : 1
    						};
    						//定义移动端的初始位置
    						var position_top, position_left,pageX,pageY;
    				// 缩放事件的处理
    						//事件开始
    						eleImg.addEventListener('touchstart', function(event) { 
    							event.preventDefault();//阻止默认事件,防止底部内容滚动
    			//在触屏设备下,要判断是单指还是多指操作,可以通过event.touches数组对象的长度判断。
    							var touches = event.touches;
    							var events = touches[0];//单指
    							var events2 = touches[1];//双指
    							if (touches.length == 1) {   //单指操作							
    								pageX = Number(events.pageX);
    								pageY = Number(events.pageY);
    								store.moveable = true;
    								var _obj = $('#innerdiv');
    								//  .css获取的值是字符串
    								position_left = parseFloat(_obj.css('left')
    										.split('px'));
    								position_top = parseFloat(_obj.css('top')
    										.split('px'));
    								
    							} else {
    								// 第一个触摸点的坐标
    								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;
    							}
    						},{ passive: false }); //passive: false必须加上,否则控制台报错
    						//开始移动
    						document.addEventListener('touchmove', function(event) {
    							event.preventDefault();//阻止默认事件,防止底部滚动
    							if (!store.moveable) {
    								return;
    							}
    							var touches = event.touches;
    							var events = touches[0];
    							var events2 = touches[1];
    							if (touches.length == 1) {
    								var pageX2 = Number(events.pageX);
    								var pageY2 = Number(events.pageY);
    								//控制图片移动
    				                $('#innerdiv').css({
    				                    'top': position_top + pageY2 - pageY + 'px',
    				                    "left": position_left + pageX2 - pageX + 'px'
    				                })
    							} else {
    								// 双指移动
    								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 newScale = store.originScale * zoom;
    									// 最大缩放比例限制
    									if (newScale > 3) {
    										newScale = 3;
    									}
    									// 记住使用的缩放值
    									store.scale = newScale;
    									// 图像应用缩放效果
    									eleImg.style.transform = 'scale('
    											+ newScale + ')';
    								}
    							}
    
    						},{ passive: false });
    
    						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;
    						});
    					});
    			//移动端手指页面结束
    		});
    		//遮罩层图片位置
    		function imgShow(outerdiv, innerdiv, bigimg, _this) {
    			//这是刚才判断是否PC端的函数事件
    			var flag = IsPC();
    			console.log(flag);
    			var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 
    			$(bigimg).attr("src", src);//设置#bigimg元素的src属性 
    			/*获取当前点击图片的真实大小,并显示弹出层及大图*/
    			$("<img/>").attr("src", src).load(function() {
    			//注意在使用这种方法获取窗口高度和宽度的时候,
    			//务必在html页面最上方加上一句<!DOCTYPE html>,否则获取屏幕高度时会出问题
    				var windowW = $(window).width();//获取当前窗口宽度
    				var windowH = $(window).height();//获取当前窗口高度  
    				var realWidth = this.width;//获取图片真实宽度 
    				var realHeight = this.height;//获取图片真实高度 
    				var imgWidth, imgHeight;
    				var scale = 0.8;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放 
    				if (realHeight > windowH * scale) {//判断图片高度 
    					imgHeight = windowH * scale;//如大于窗口高度,图片高度进行缩放 
    					imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
    					if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度 
    						imgWidth = windowW * scale;//再对宽度进行缩放 
    					}
    				} else if (realWidth > windowW * scale) {//如图片高度合适,判断图片宽度 
    					imgWidth = windowW * scale;//如大于窗口宽度,图片宽度进行缩放 
    					imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度 
    				} else {//如果图片真实高度和宽度都符合要求,高宽不变 
    					if (flag == false) {
    						imgWidth = realWidth;
    						imgHeight = realHeight;
    					} else if(realWidth>=1000){  //这里我怕图片太大又做了个判断
    						imgWidth = realWidth ;
    						imgHeight = realHeight;
    					}else{
    						imgWidth = realWidth *2 ;
    						imgHeight = realHeight *2;
    					}
    				}
    				$(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放 
    				var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距 
    				var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距 
    				$(innerdiv).css({
    					"top" : h,
    					"left" : w
    				});//设置#innerdiv的top和left属性 
    				$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg 
    			});
    			$(outerdiv).click(function() {//再次点击淡出消失弹出层 
    				$(this).fadeOut("fast");
    			});
    		};
    

    注意点:

    1.阻止默认行为是配合passive使用,否则控制台报错
    在这里插入图片描述
    默认使用passive:true提高滚动性能并减少崩溃,passive即顺从的,是指它顺从浏览器的默认行为。设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。如果我们阻止了这一默认行为,浏览器是无法预先知道的,必须等待事件监听器执行完成后,才知道要去阻止默认行为。等待监听器的执行是耗时的,,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。所以就有了passive属性,如果要阻止默认事件可以设置passive:false.
    2…height()方法和.css(“height”)的区别:

    返回值不同:.height()方法返回的是数字类型(20); .css(“height”)返回的是字符串类型(20px);

    本文移动端手指缩放方法方法主要参考大佬的博文:
    https://www.zhangxinxu.com/wordpress/2020/06/mobile-event-touches-zoom-sacle/

    展开全文
  •   之前需要在小程序里实现对一张图片的单指拖动双指缩放效果。试了网上很多别人的代码已经微信自己的一些控件,基本双指缩放的时候都是会以左上角为原点进行缩放,而微信自己的那些控件使用的时候又比较有局限性...
  • js实现手机端图片双指缩放变大变小插件

    万次阅读 热门讨论 2017-02-20 23:15:21
    一种是屏幕上有一张图片,直接双指缩放,如下图: 还有一种是类似于手机相册一样,一张一张,点击单张之后,全屏打开,在进行缩放操作,如下图: 接下来,介绍第一种情况插件,pinchzoom.js,用法很简单,...
  • 对于这个功能,也是查找了好多的资料,到现在其中的代码也需要好好研究研究,这个方法的缺点就是每次只能显示一张图片,并对其进行放大~至于多张图片,以后再研究~ 1、写好模板页(comImageBox.html) <ion-...
  • Android平台上查看单张图片时,通常情况下需要实现图片查看、单指移动、双指缩放、双击最大化或最小化功能。 目前网络上实现方式,都没有将此功能封装为类,零落在类和xml文件中,代码难以阅读,功能难以复用。 ...
  • 图片拖动&缩放工具类

    2020-04-14 15:34:34
    本工具类(Android)通过传入ImageView来简单实现单指拖动图片双指放大缩小功能,代码中几乎对每行代码都有注释。
  • 继承ImageView,主要通过捕获用户多指触控时的比例,计算出缩放的大小(这个根据个人喜好,可以自行调整的,若需要请动手设置,也增强大家的代码能力),然后获取图片的矩阵视图Matrix进行缩放。 话
  • Android 图片裁剪框功能代码 整个裁剪功能由两个自定义的View组件完成,首先是图片显示控件DragScaleView,主要完成图片的双指触碰缩放和单指触碰滑动,以及根据裁剪框的变化对图片进行对应的平移和缩放;...
  • 代码地址http://pangyongsheng.github.io/imgPreview/查看示例效果:一、功能介绍 图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击。。。)监听图片...
  • 一个可用手指双击放大,双指放大ImageView,忘了从哪里抄了,先把代码记下。方便以后CV用。public class PinchImageView extends ImageView { ////////////////////////////////配置参数//////////////////////...
  • Android实现图片手势缩放、移动...下面主要的代码为(复制即可使用): 三个工具类 在 Activity 和 xml 文件中设置 CSDN 下载地址:https://download.csdn.net/download/wuqingsen1/10782132 GitHub 下载地址:https:/
  • 说明 由于项目是几年前开发,很多第三方库都已经更新了,导致安装或者编译失败,如果不能正常运行,请...新闻处理,使用和主流新闻客户端类似,滑动切换多张图片,可双指缩放图片大小! 图片浏览 介绍:
  • 【5年Android从零复盘系列之十六】Android自定义View(11):手势监听处理实践之双指缩放双击复原可拖拽ImageView 1.效果 1.拖拽 2.双击复原、双指缩放 3.点击回调、关闭activity 2.监听手势实现功能 双指缩放 ...
  • PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度。 下面让我们来看看核心代码:post是base64,...
  • PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度。 下面让我们来看看核心代码: post是base64...
  • php+jquery.photoclip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度。下面让我们来看看核心代码:post是base64,...
  • PhotoView简介与使用:

    千次阅读 2019-09-11 19:17:57
    先简单说下PhotoView作用:不需要写任何代码就可以实现图片手势缩放,旋转,相比ImageView,用户体验更好。 PhotoView功能: 1.图片浏览查看 2.双指缩放 3.单点触摸缩放 4.图片缩放模式设置 使用: ...
  • 双指缩放 单点触摸缩放 图片缩放模式设置 基本用法: 导入jar包,布局XML里设置PhotoView 将ImageView传入PhotoViewAttacher 代码演示: 使用 PhotoView进行网络图片和本地图片的加载,缩放和点击事件处理 布局文
  • 支持双指缩放、旋转、平移等操作。   代码很简单,https://github.com/qiantanlong/YhzGestureDetector ,这是GitHub地址。包含手势识别工具类。 android studio中添加依赖使用方法: a...
  • 涂图·图像SDK服务TuSDK产品介绍 涂图·图像SDK服务是涂图推出一种适用于iOS平台图像SDK,提供了包括录制,图片编辑等基础功能,以及人像美颜,滤镜,贴纸,文字,漫画滤镜等特效。...双指缩放调节焦距 2.0.0

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

双指缩放图片的代码