javascript 实现双指放大缩小旋转图片

Posted newmiracle宇宙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 实现双指放大缩小旋转图片相关的知识,希望对你有一定的参考价值。

javascript 实现双指放大缩小旋转图片

1 先记录 屏幕上 的手指数量 (记录方法 按下+1  松开-1)

2 记录每个手指的在屏幕上的坐标  每个手指的touchid不一样  用数组存就行 shouzhis[touchid]= x,y

 3 如果屏幕上有2个手指 

1 缩放按照2个手指的距离来计算

 

private getTouchDistance():number
{
var _distance:number = 0;
var names = this.touchPoints["names"];
_distance = egret.Point.distance( this.touchPoints[names[names.length-1]],
this.touchPoints[names[names.length-2]]);
return _distance;
}

 

2 旋转 是按照2个手指的角度来计算

  private getTouchAngle():number
    {
        var ang:number = 0;
        var names = this.touchPoints["names"];
        var p1:egret.Point = this.touchPoints[names[names.length-1]];
        var p2:egret.Point = this.touchPoints[names[names.length-2]];

        ang = Math.atan2((p1.y-p2.y),(p1.x-p2.x)) / this.c;
        return ang;
    }

 

以上是关于javascript 实现双指放大缩小旋转图片的主要内容,如果未能解决你的问题,请参考以下文章

vue 快速给图片添加,点击旋转、放大、缩小、拖动的效果

js实现Mac触摸板双指事件(上/下/左/右/放大/缩小)

canvas里有一张图,怎么实现鼠标可以拖动该图片移动,放大缩小旋转

js进行数字图像处理:亮度对比度马赛克画笔放大缩小镜像贴纸旋转颜色值显示

OpenFramework中视频或者图片进行中心旋转平移放大缩小矫正(本例以视频为准,只给出主要代码)

鸿蒙开源第三方组件——自定义图片缩放组件PinchImageView-ohos