精华内容
下载资源
问答
  • 双指缩放图片,双击放大缩小图片DEMO,用的是开源库。
  • 可以在div图片上添加css动画效果,发光点,模拟地图的一些交汇方式,给大家介绍jQuery和js实现移动端双指缩放,希望对大家有所帮助。
  • 主要介绍了JS实现移动端双指缩放和旋转方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Android 双指拖动和双指缩放图片

    热门讨论 2016-12-10 15:17:32
    1.双指拖动和在拖动过程中控制图片缩放. 2.绘制的线条与背景图片实现正片叠底的混合效果.
  • Android 实现,图片双指缩放,单指移动。通过自定义ImageView控件实现。ZoomDragImageView.java代码如下:public class SwZoomDragImageView extends ImageView implements View.OnTouchListener{private static ...

    Android 实现,图片双指缩放,单指移动。通过自定义ImageView控件实现。

    ZoomDragImageView.java代码如下:

    public class SwZoomDragImageView extends ImageView implements View.OnTouchListener{

    private static final String TAG = SwZoomDragImageView.class.getSimpleName();

    private boolean support_touch = true;//支持触摸事件

    private int mode = 0;// 初始状态

    private static final int MODE_DRAG = 1;//平移

    private static final int MODE_ZOOM = 2;//缩放

    private static final float MAX_SCALE = 4f, MIN_SCALE = 1f;//最大放大倍数,最小放大倍数

    float total_scale = MIN_SCALE , current_scale;//total_scale缩放范围2-1,当小于1回弹到1;当大于2回弹到2

    private Matrix matrixNow = new Matrix();

    private Matrix matrixBefore = new Matrix();

    private Matrix mInitializationMatrix = new Matrix();//初始缩放值

    private PointF actionDownPoint = new PointF();//点击点

    private PointF dragPoint = new PointF();//平移点

    private PointF startPoint = new PointF();//滑动点

    private PointF mInitializationScalePoint = new PointF();//初始缩放点

    private PointF mCurrentScalePoint = new PointF(0, 0);//当前缩放点

    private float startDis;//滑动开始距离

    /** 两个手指的中间点 */

    private PointF midPoint = new PointF(0,0);

    public SwZoomDragImageView(Context context) {

    this(context, null);

    }

    public SwZoomDragImageView(Context context, AttributeSet attrs) {

    this(context, attrs, 0);

    }

    public SwZoomDragImageView(Context context, AttributeSet attrs, int defStyleAttr) {

    super(context, attrs, defStyleAttr);

    initData();

    }

    private void initData() {

    if (support_touch) {

    setOnTouchListener(this);

    }

    this.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

    @Override

    public void onGlobalLayout() {

    SwZoomDragImageView.this.getViewTreeObserver().removeOnGlobalLayoutListener(this);

    int[] viewLocation = new int[2];

    SwZoomDragImageView.this.getLocationInWindow(viewLocation);

    int viewX = viewLocation[0]; // x 坐标;有bug,在viewpage中。

    int viewY = viewLocation[1]; // y 坐标

    mInitializationScalePoint.set( SwZoomDragImageView.this.getWidth() / 2, viewY + SwZoomDragImageView.this.getHeight() / 2);//初始化缩放位置

    Log.i("yangxun", "控件 宽:" + mInitializationScalePoint.x + "高:" + mInitializationScalePoint.y);

    }

    });

    }

    @Override

    protected void onAttachedToWindow() {

    super.onAttachedToWindow();

    }

    @Override

    protected void onDraw(Canvas canvas) {

    canvas.drawColor(Color.BLACK);//清空画布

    if (matrixNow != null) {

    canvas.concat(matrixNow);

    // canvas.setMatrix(matrixNow);//显示有问题

    }

    super.onDraw(canvas);

    } @Override

    public void setImageMatrix(Matrix matrix) {

    matrixNow.set(matrix);

    invalidate();

    }

    public void resetImageMatrix() {

    this.matrixNow.set(mInitializationMatrix);

    invalidate();

    }

    //最小重置数值

    private void resetToMinStatus(){

    mCurrentScalePoint.set(0, 0);

    total_scale = MIN_SCALE;

    }

    //最大重置数值

    private void resetToMaxStatus(){

    total_scale = MAX_SCALE;

    }

    public float getInitializationBitmapHeight(){

    return getHeight()*total_scale;

    }

    public float getInitializationBitmapWidth(){

    return getWidth()*total_scale;

    }

    @Override

    public boolean onTouch(View v, MotionEvent event) {

    if (total_scale != 1) {

    getParent().requestDisallowInterceptTouchEvent(true);//触摸事件请求拦截

    }

    /** 通过与运算保留最后八位 MotionEvent.ACTION_MASK = 255 */

    switch (event.getAction() & MotionEvent.ACTION_MASK) {

    case MotionEvent.ACTION_DOWN://单指触摸

    mode = MODE_DRAG;

    matrixBefore.set(getImageMatrix());

    matrixNow.set(getImageMatrix());

    dragPoint.set(event.getX(), event.getY());

    actionDownPoint.set(event.getX(), event.getY());

    break;

    case MotionEvent.ACTION_POINTER_DOWN://双指触摸

    getParent().requestDisallowInterceptTouchEvent(true);//触摸事件请求拦截

    mode = MODE_ZOOM;

    startPoint.set(event.getX(), event.getY());

    startDis = distance(event);

    /** 计算两个手指间的中间点 */

    if (startDis > 10f) {

    //记录当前ImageView的缩放倍数

    matrixBefore.set(getImageMatrix());

    matrixNow.set(getImageMatrix());

    }

    break;

    case MotionEvent.ACTION_MOVE:

    if (mode == MODE_DRAG && total_scale > 1) {

    float dx = event.getX() - dragPoint.x;

    float dy = event.getY() - dragPoint.y;

    dragPoint.set(event.getX(), event.getY());

    imgTransport(dx, dy);

    } else if (mode == MODE_ZOOM) {//缩放

    float endDis = distance(event);

    midPoint = mid(event);

    if (endDis > 10f) {

    current_scale = endDis / startDis;//缩放倍数

    total_scale *= current_scale;

    matrixNow.postScale(current_scale, current_scale, midPoint.x, midPoint.y);

    invalidate();

    }

    startDis = endDis;

    }

    break;

    case MotionEvent.ACTION_UP:

    getParent().requestDisallowInterceptTouchEvent(false);//触摸事件请求取消拦截

    mode = 0;

    if(mode == MODE_DRAG)

    checkClick(event.getX(),event.getY(), actionDownPoint.x, actionDownPoint.y);

    break;

    case MotionEvent.ACTION_POINTER_UP:

    checkZoomValid();

    mode = 0;

    break;

    }

    return true;

    }

    /**

    * 平移图片

    * @param x

    * @param y

    */

    public void imgTransport(float x,float y){

    mCurrentScalePoint.set(mCurrentScalePoint.x + x, mCurrentScalePoint.y + y);

    if (mCurrentScalePoint.x >= ((total_scale - 1) * getWidth()) / 2) {

    mCurrentScalePoint.x = ((total_scale - 1) * getWidth()) / 2;

    x = 0;

    } else {

    if (mCurrentScalePoint.x <= -((total_scale - 1) * getWidth()) / 2) {

    mCurrentScalePoint.x = -((total_scale - 1) * getWidth()) / 2;

    x = 0;

    }

    }

    if (mCurrentScalePoint.y >= ((total_scale - 1) * getHeight()) / 2) {

    mCurrentScalePoint.y = ((total_scale - 1) * getHeight()) / 2;

    y = 0;

    } else {

    if (mCurrentScalePoint.y <= -((total_scale - 1) * getHeight()) / 2) {

    mCurrentScalePoint.y = -((total_scale - 1) * getHeight()) / 2;

    y = 0;

    }

    }

    Log.i(TAG, "mCurrentScalePoint.x:" + mCurrentScalePoint.x + " x:" + x);

    matrixNow.postTranslate(x, y);

    invalidate();

    }

    private boolean checkZoomValid() {

    if(mode == MODE_ZOOM){

    if(total_scale>MAX_SCALE){

    resetToMaxStatus();

    matrixNow.set(mInitializationMatrix);

    matrixNow.postScale(MAX_SCALE, MAX_SCALE, mInitializationScalePoint.x, mInitializationScalePoint.y);

    matrixNow.postTranslate(mCurrentScalePoint.x, mCurrentScalePoint.y);

    invalidate();

    return false;

    }else if(total_scale

    好了,现在直接使用该类,就可以直接对图片进行相应操作。

    展开全文
  • 实现了双指移动控制摄像机显示范围大小。也可以用于untiy双指控制某个物体旋转,放大缩小
  • 点击图片放大,实现移动端双指缩放,单指拖拽功能 记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失 一.实现效果: 页面原...

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

    一.实现效果:

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

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

    二.代码实现:

    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/

    展开全文
  • selector:要缩放的图片,bg:图片的背景容器 var touchScale = function(seletor, bg) { var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight, one = false, $touch = $(seletor),...

    1.可通过修改图片的宽高来缩放图片
    2.可通过修改transform进行缩放图片,使用transform默认的作用中心是元素的中心点,需要通过transform-origin:0 0调整作用中心点
    3.不足:没有实现从手指触碰的位置为作用中心达到缩放效果

    代码如下 :

    一.js

    selector:要缩放的图片

    var touchScale = function(seletor) {
        // 参数one是为了区分屏幕上现在是一根手指还是两根手指,因为在滑动的时候两根手指先离开一根会触发一根手指移动图片位置这个方法
          var one = false, 
              $touch = $(seletor),
              imgLeft = parseInt($touch.css('left')),
              imgTop = parseInt($touch.css('top')),
              originalWidth = $touch.width(),
              originalHeight = $touch.height(),
              baseScale = parseFloat(originalWidth/originalHeight);
          var store = {
            scale: 1
          };
          function siteData(name) {
              imgLeft = parseInt(name.css('left'));
              imgTop = parseInt(name.css('top'));
          }
          // 获取坐标之间的距离
          function getDistance(start, stop) {
            return Math.hypot(stop.x - start.x, stop.y - start.y);
          }
          // $(seletor).parent().selector让我们可以选择类,不一定要指定id
          // $('#'+).on('touchstart touchmove touchend', function(event){
          $(document).on('touchstart touchmove touchend', $(seletor).parent().selector, function(event){
              var $me = $(seletor),
                  touch1 = event.originalEvent.targetTouches[0],  // 第一根手指touch事件
                  touch2 = event.originalEvent.targetTouches[1],  // 第二根手指touch事件
                  fingers = event.originalEvent.touches.length;   // 屏幕上手指数量
              //手指放到屏幕上的时候,还没有进行其他操作
              if (event.type == 'touchstart') {
                  // 阻止事件冒泡
                  event.preventDefault();
                  // 第一个触摸点的坐标
                  store.pageX = touch1.pageX;
                  store.pageY = touch1.pageY;
                  if (fingers == 2) {
                      store.pageX2 = touch2.pageX;
                      store.pageY2 = touch2.pageY;
                      store.moveable = true;
                      one = false;
                  }
                  else if (fingers == 1) {
                      one = true;
                  }
                  store.originScale = store.scale || 1;
              }
              //手指在屏幕上滑动
              else if (event.type == 'touchmove') {
                  event.preventDefault();
                  if (fingers == 2) {
                      if (!store.moveable) {
                          return;
                      }
                      // 双指移动
                      if (touch2) {
                        if(!store.pageX2) {
                          store.pageX2 = touch2.pageX;
                        }
                        if(!store.pageY2) {
                          store.pageY2 = touch2.pageY;
                        }
                      }else{return
                      }
                      // 双指缩放比例计算:originScale/scale=初始距离/后来距离,即:scale=originScale*(后来距离/初始距离)
                      var zoom = getDistance({
                          x: touch1.pageX,
                          y: touch1.pageY
                      }, {
                          x: touch2.pageX,
                          y: touch2.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
                      // 图片缩放效果
                      $me.css({
                          'left' : imgLeft,
                          'top' : imgTop,
                          // 1.通过修改宽高缩放图片
                          'width' : originalWidth*newScale,
                          'height' : (originalWidth*newScale)/baseScale,
                          // 2.通过修改transform缩放图片,transform-origin作用中心点
                          // 'transform': 'scale('+newScale+')',
                          // 'transform-origin': '0 0' 
                      });
                  }else if (fingers == 1) {
                      if (one) {
                          $me.css({
                              'left' : imgLeft + (touch1.pageX - store.pageX),
                              'top' : imgTop + (touch1.pageY - store.page)
                          });
                      }
                  }
              }
              //手指移开屏幕
              else if (event.type == 'touchend') {
                 store.moveable = false;
                 delete store.pageX2;
                 delete store.pageY2;
              }
          });
      };
      touchScale('#map')
    
    二.html
    <div class="mapImgBox">
    	<div id="map"></div>
    </div>
    
    三.css
    .mapImgBox{
    	width: 100%;
    	height: 65vh;
    	border-radius: 10px;
    	background-color: #7F7F7F;
      	overflow: auto;
    }
    #map{
    	width: 40%;
    	height: 100%;
    	margin: 0 auto;
    	background-image: url(../images/map.png);
    	background-repeat:no-repeat;
    	background-size: 90% 90%;
    	background-position: center;
    }
    

    文章参考:
    通过transform缩放
    通过width、height缩放

    展开全文
  • 2、 双指缩放图片。 3、单指拖拽图片。 为此这个图片查看器需要考虑以下的技术点: 一、双击缩放图片: 1、如果图片高度比屏幕的高度小得多,那么就将图片放大到高度与屏幕高度相等,否则就放大一个特定的倍数。 2、...
  • 这是一个移动端图片浏览双指放大组件,暂不支持双击缩放
  • cocos2d-x 地图双指缩放,单指拖动,双击自动放大
  • 一:小程序实现图片双指缩放介绍1:大体思路监听图片加载完成 给图片初始化宽高 ▶ 双手指触发开始 计算两个手指坐标的距离 ▶ 双手指移动 计算两个手指坐标和距离 ▶ 根据探测到用户的手指距离变化,确定图片缩放...

    一:小程序实现图片双指缩放介绍

    1:大体思路

    监听图片加载完成 给图片初始化宽高 ▶ 双手指触发开始 计算两个手指坐标的距离 ▶ 双手指移动 计算两个手指坐标和距离 ▶ 根据探测到用户的手指距离变化,确定图片缩放倍数,然后根据倍数给图片赋值新的宽高进行缩放图片。

    2:需要的标签

    实现图片的缩放,需要一个容器存放图片。微信为视图组件提供了 scroll-view 和 view 两种容器。图片放大的情况下是需要滑动屏幕进行查看的,所以我用了scroll-view。容器里面放的就是image标签

    2:小程序实现图片双指缩放的事件

    scroll-view标签上面需要两个事件:bindtouchstart (双手指触发开始事件) bindtouchmove(双指移动事件)

    image标签上面绑定一个事件:bindload(微信小程序image图片加载完成监听)

    二:html代码

    二:css代码

    page {

    height: 100%;

    }

    .content {

    height: 100%;

    font-size: 0;

    }

    ::-webkit-scrollbar {

    width: 0;

    height: 0;

    color: transparent;

    }

    .images image {

    text-align: center;

    }

    四:js代码

    1:初始化变量

    data: {

    dataimg: '',//图片地址

    distance: 0,//手指移动的距离

    scale: 1,//图片的比例

    baseWidth: null,//图片真实宽度

    baseHeight: null,//图片真实高度

    scaleWidth: '',//图片设显示宽度

    scaleHeight: '',//图片设显示高度

    },

    2:初始化时候加载图片

    var that = this;

    that.setData({

    dataimg: CONF.imgUrl+'static/prize/map1.jpg',

    })

    3:监听图片加载完成

    /**

    * 监听图片加载成功时触发

    */

    imgload: function(e) {

    this.setData({

    'baseWidth': e.detail.width, //获取图片真实宽度

    'baseHeight': e.detail.height, //获取图片真实高度

    'scaleWidth': '100%', //给图片设置宽度

    'scaleHeight': '100%' //给图片设置高度

    })

    },

    4:双指开始移动,计算两个手指的坐标

    /**

    * 双手指触发开始 计算开始触发两个手指坐标的距离

    */

    touchstartCallback: function(e) {

    // 单手指缩放开始,不做任何处理

    if (e.touches.length == 1) return;

    // 当两根手指放上去的时候,将距离(distance)初始化。

    let xMove = e.touches[1].clientX - e.touches[0].clientX;

    let yMove = e.touches[1].clientY - e.touches[0].clientY;

    //计算开始触发两个手指坐标的距离

    let distance = Math.sqrt(xMove * xMove + yMove * yMove);

    this.setData({

    'distance': distance,

    })

    },

    5:双手指移动 计算两个手指坐标和距离

    /**

    * 双手指移动 计算两个手指坐标和距离

    */

    touchmoveCallback: function(e) {

    // 单手指缩放不做任何操作

    if (e.touches.length == 1) return;

    //双手指运动 x移动后的坐标和y移动后的坐标

    let xMove = e.touches[1].clientX - e.touches[0].clientX;

    let yMove = e.touches[1].clientY - e.touches[0].clientY;

    //双手指运动新的 ditance

    let distance = Math.sqrt(xMove * xMove + yMove * yMove);

    //计算移动的过程中实际移动了多少的距离

    let distanceDiff = distance - this.data.distance;

    let newScale = this.data.scale + 0.005 * distanceDiff

    // 为了防止缩放得太大,所以scale需要限制,同理最小值也是

    if (newScale >= 1) {

    newScale = 1

    let scaleWidth = newScale * this.data.baseWidth + 'px'

    let scaleHeight = newScale * this.data.baseHeight + 'px'

    this.setData({

    'distance': distance,

    'scale': newScale,

    'scaleWidth': scaleWidth,

    'scaleHeight': scaleHeight,

    'diff': distanceDiff

    })

    }

    //为了防止缩放得太小,所以scale需要限制

    if (newScale <= 0.3) {

    newScale = 0.3

    this.setData({

    'distance': distance,

    'scale': newScale,

    'scaleWidth': '100%',

    'scaleHeight': '100%',

    'diff': distanceDiff

    })

    }

    },

    展开全文
  • var pageX,pageY,position_top,position_left; function setGesture(el) { var ... 标签:function,双指,touches,obj,缩放,pageX,pageY,var,移动 来源: https://blog.csdn.net/beichen3997/article/details/89948486
  • 【项目记录】alloyfinger双指缩放拖动图片实现 我整理过的: https://github.com/13265001145/JSplugin/tree/master/alloyfinger demo:http://test.cc007.top/test.html 官方的: ... http://www.fly63.com/nav/1432
  • Android 图片双指缩放 单指拖拽 单指移动图片到边界回弹
  • 本例实现了最简单的单指移动、双指缩放的图片组件,效果如下: 功能:1.单指移动,双指缩放。2.可控制缩放范围,防止过或过小;初始化时自动缩放至组件大小,并居中显示。3.边界控制,防止图片“移出去了”。4....
  • 图片的单指拖拽双指缩放

    千次阅读 2017-02-23 13:54:49
    双指缩放 : //无任何手势模式 public static final int NONE = 0 ; //缩放模式 public static final int SCALE = 1 ; //当前处在什么模式 int mode = NONE; //图片的matrix...
  • dataZoom: [ { zoomLock: true, //是否锁定选择区域(或叫做数据窗口)的大小。 }, ]
  • Creator双指缩放拖动无黑边 源码在文末 效果 因为PC端不可以双指操作,所以这是现在手机上录屏再到电脑录GIF的结果 节点结构 遮挡节点 目标节点,也就是需要缩放和拖动的奥利给图片 创建一个脚本挂在canvas上 ...
  • 目前流行的图片浏览器,支持滑动缩小,拖动消失,双指放大,方便使用
  • 通过cocos2d-x实现:TiledMap地图的学习-双指缩放,单指拖动,双击自动放大。
  • 通过双指移动的距离与初始距离的关系判断缩放 规定阈值,最大与最小缩放 开始操作 上传图片 由于上传的图片需要放大与缩小,所以我们首先要在style动态绑定width 和height,其次要设置overflow为scroll。 然后开...
  • 双指拖动缩放图片

    千次阅读 2017-04-10 18:46:53
    Muilti-touch 双指缩放文字 import android.util.FloatMath; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.widget.TextView; ...
  • 在移动端svg的随便手指拖动 算法 怎么根据手指移动的位移来指定svg的translate的值 以及缩放的时候怎么配合拖动
  • Android从零开始实现可以双指缩放,自由移动,双击放大的自定义ImageView 之前一直都是用别人的轮子,总感觉心里不踏实,所以自己也尝试这造一些别人造过的轮子,提升自己,也可以在平时开发中工作中更熟练的使用。 ...
  • 查看示例效果:一、功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击。。。)监听图片手势事件,通过 transform-matrix 实现图片的各种变换;二...
  • Demo 使用说明 使用 请参考demo...读取图片链接 readFile(file) 读取File save() 保存结果,返回 blob,dataUrl scaleInCenter(scale) 以canvas中心为中心缩放 rotateZ(deg) 以canvas中心为中心旋转 其他使用请参考demo
  • 首先引入js文件,需要jq,pinchzoom.js。 pinchzoom.js需要在jq环境下... $('div.pinch-zoom')下的每一个图片元素都可以进行双指缩放,双击放大。     转载于:https://www.cnblogs.com/well-nice/p/4891119.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,235
精华内容 894
关键字:

双指缩放拖动大图