支持点击放大缩小图片,拖动放大缩小图片功能

最近需要开发一个点击放大图片的功能,拖动缩小图片的功能,网上找了很多例子都没有找到适合自己需求的。

最后在别人的一个项目中看到了一个类似的功能,于是copy了出来,实现了自己的功能。


首先我找到了jar包  uk-co-senab-photoview 

jar包下载及项目demo地址   http://download.csdn.net/detail/sujun751943509/9774795

说下我遇到的问题和解决方法,首先控件支持双击和拖动 

我还需要点击 于是我查看了 

官方文档 看到有监听方法,所以我用了这个方法

pv.setOnPhotoTapListener(new OnPhotoTapListener() {

@Override
public void onPhotoTap(View arg0, float arg1, float arg2) {
Log.i("TAG", "这里只是是点击图片");

}
});

然而我发现只要点击有图片的地方才可以 触发事件 ,

于是陷入了沉思。。。。

最后又找到了这个方法

pv.setOnViewTapListener(new OnViewTapListener() {

@Override
public void onViewTap(View arg0, float arg1, float arg2) {
Log.i("TAG", "这里是点击整个photoView控件");

}
});

这个时候只要点击的是这个控件就能触发事件,问题解决 ,后来发现有好多方法 我就没一一测试了   


只为记录,不喜勿碰。



  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的JavaScript实现图片鼠标位置的放大缩小及拖拽功能的示例: HTML代码: ```html <div id="image-container"> <img id="image" src="example.jpg" /> </div> ``` CSS代码: ```css #image-container { width: 500px; height: 500px; overflow: hidden; position: relative; } #image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: move; } ``` JavaScript代码: ```javascript var container = document.getElementById("image-container"); var image = document.getElementById("image"); // 初始缩放比例为1 var scale = 1; // 鼠标按下时的位置 var mouseX = 0; var mouseY = 0; // 鼠标是否按下 var isMouseDown = false; // 鼠标按下时记录鼠标位置 container.addEventListener("mousedown", function(event) { isMouseDown = true; mouseX = event.clientX; mouseY = event.clientY; }); // 鼠标松开时重置鼠标状态 container.addEventListener("mouseup", function(event) { isMouseDown = false; }); // 鼠标移动时缩放或拖拽图片 container.addEventListener("mousemove", function(event) { if (isMouseDown) { // 鼠标按下时拖拽图片 var deltaX = event.clientX - mouseX; var deltaY = event.clientY - mouseY; image.style.left = parseInt(image.style.left) + deltaX + "px"; image.style.top = parseInt(image.style.top) + deltaY + "px"; mouseX = event.clientX; mouseY = event.clientY; } else { // 鼠标未按下时缩放图片 var deltaScale = 0; if (event.deltaY < 0) { deltaScale = 0.1; } else if (event.deltaY > 0) { deltaScale = -0.1; } scale += deltaScale; // 最小缩放比例为0.1 scale = Math.max(scale, 0.1); image.style.transform = "scale(" + scale + ")"; } }); ``` 这段代码实现了以下功能: 1. 鼠标按下并拖拽图片时,图片跟随鼠标移动。 2. 鼠标未按下时,通过滚轮上下滑动实现图片放大缩小,最小缩放比例为0.1。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值