图片拖拽缩小放大

public class Second extends AppCompatActivity implements View.OnTouchListener{

    private ImageView imageView;

    private Matrix matrix = new Matrix();
    private Matrix savedMatrix = new Matrix();

    private static final int NONE = 0;
    private static final int DRAG = 1;
    private static final int ZOOM = 2;
    private int mode = NONE;

    // 第一个按下的手指的点
    private PointF startPoint = new PointF();
    // 两个按下的手指的触摸点的中点
    private PointF midPoint = new PointF();
    // 初始的两个手指按下的触摸点的距离
    private float oriDis = 1f;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.second);
        DisplayImageOptions options = new DisplayImageOptions.Builder()
                .cacheInMemory(true)
                .cacheOnDisk(true)
                .build();

        imageView = (ImageView) findViewById(R.id.tupian);
        Intent intent = getIntent();
        String url = intent.getStringExtra("url");
        ImageLoader.getInstance().displayImage(url,imageView,options);
        imageView.setOnTouchListener(Second.this);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        ImageView view = (ImageView) v;


        // 可以处理处理多点触摸
//        http://blog.csdn.net/fobdddf/article/details/19479153
//        http://blog.sina.com.cn/s/blog_60e96a410100mjd2.html
//        https://my.oschina.net/qianjia/blog/109282
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                // 第一个手指按下事件
                matrix.set(view.getImageMatrix());
                savedMatrix.set(matrix);
                startPoint.set(event.getX(), event.getY());
                //拖动
                mode = DRAG;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
//            event.getX(012)
                // 第二个手指按下事件
                oriDis = distance(event);
                if (oriDis > 10f) {
                    savedMatrix.set(matrix);
                    midPoint = middle(event);
                    //标记成缩放状态
                    mode = ZOOM;
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                // 手指放开事件
                mode = NONE;
                break;
            case MotionEvent.ACTION_MOVE:
                // 手指滑动事件
                if (mode == DRAG) {
                    // 是一个手指拖动
                    matrix.set(savedMatrix);
                    //移动图片
                    matrix.postTranslate(event.getX() - startPoint.x, event.getY()
                            - startPoint.y);
                } else if (mode == ZOOM) {
                    // 两个手指滑动
                    float newDist = distance(event);
                    if (newDist > 10f) {
                        matrix.set(savedMatrix);
                        float scale = newDist / oriDis;
                        //图片的缩放
                        matrix.postScale(scale, scale, midPoint.x, midPoint.y);
                    }
                }
                break;
        }


        // 设置ImageViewMatrix
        view.setImageMatrix(matrix);
        return true;
    }


    // 计算两个触摸点之间的距离
    private float distance(MotionEvent event) {
        //获取第0跟手指和第一根手指的坐标
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return (float) Math.sqrt(x * x + y * y);
    }


    // 计算两个触摸点的中点
    private PointF middle(MotionEvent event) {
        float x = event.getX(0) + event.getX(1);
        float y = event.getY(0) + event.getY(1);
        return new PointF(x / 2, y / 2);
    }
}
要实现同时实现图片拖拽和鼠标位置放大缩小,可以参考以下步骤: 1. 在 HTML 中插入一张图片,设置图片的宽度和高度,并将其放置在一个容器中。 2. 使用 CSS 设置容器的样式,将容器的宽度和高度设置为图片的一半,并将 overflow 属性设置为 hidden,这样当图片放大时,容器可以隐藏超出容器范围的部分。 3. 使用 JavaScript 监听鼠标按下事件,当鼠标按下时,记录下鼠标的位置和容器的位置。 4. 使用 JavaScript 监听鼠标移动事件,当鼠标移动时,根据鼠标的位置和容器的位置计算出容器应该移动的距离,并将容器移动到新的位置。 5. 当鼠标离开容器时,停止拖拽。 6. 使用 JavaScript 监听鼠标滚轮事件,根据滚轮的方向计算出图片应该放大缩小的比例,并将图片缩放到新的大小。 下面是一个示例代码: HTML代码: ``` <div class="container"> <img src="image.jpg" width="400" height="300" /> </div> ``` CSS样式: ``` .container { width: 200px; height: 150px; overflow: hidden; position: relative; } .container img { transition: all 0.3s ease-out; position: absolute; left: 0; top: 0; } .container:hover img { transform: scale(2); } ``` JavaScript代码: ``` var container = document.querySelector('.container'); var img = container.querySelector('img'); var containerWidth = container.offsetWidth; var containerHeight = container.offsetHeight; var isDragging = false; var startX = 0; var startY = 0; var containerLeft = 0; var containerTop = 0; container.addEventListener('mousedown', function(e) { isDragging = true; startX = e.clientX; startY = e.clientY; containerLeft = container.offsetLeft; containerTop = container.offsetTop; }); container.addEventListener('mousemove', function(e) { if (!isDragging) return; var deltaX = e.clientX - startX; var deltaY = e.clientY - startY; container.style.left = containerLeft + deltaX + 'px'; container.style.top = containerTop + deltaY + 'px'; }); container.addEventListener('mouseup', function() { isDragging = false; }); container.addEventListener('mouseleave', function() { isDragging = false; }); container.addEventListener('wheel', function(e) { e.preventDefault(); var delta = e.deltaY < 0 ? 0.1 : -0.1; var scaleX = img.offsetWidth / containerWidth + delta; var scaleY = img.offsetHeight / containerHeight + delta; img.style.transform = 'scale(' + scaleX + ',' + scaleY + ')'; }); ``` 注意:这个示例只是一个简单的实现,实际应用中可能需要处理更多的细节问题,比如边界处理、拖拽的范围限制等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值