LabVIEW论坛
直播中

3708407

7年用户 149经验值
擅长:可编程逻辑
私信 关注
[问答]

二维图片框 在 鼠标处 滚轮 缩放 图片,像 CAD 一样,,

大家好,如何实现,二维图片框 在 鼠标处 滚轮 缩放 图片,像 CAD 一样,,*附件:图片在鼠标处缩放.rar

已退回36积分

回帖(1)

独当一面

2024-1-8 11:49:26
要实现二维图片框在鼠标处滚轮缩放图片的功能,你可以通过以下步骤实现:

1. 获取鼠标滚轮事件:使用鼠标事件监听器,获取鼠标滚轮事件。在滚轮滚动时触发事件。

2. 缩放图片:根据滚轮滚动的方向,增加或减少图片的缩放比例。你可以使用CSS的`transform`属性来缩放图片。例如,`transform: scale(1.2)`表示将图片放大到原来的1.2倍。

   如果要实现图片在鼠标所在位置缩放,你可以先获取鼠标当前的位置坐标,然后根据缩放比例计算图片的新位置,保持鼠标位置不变,再应用缩放。

3. 更新图片位置:根据缩放后的图片大小和新位置,更新图片的CSS样式。

下面是一种实现方式的代码示例:

```html







  





```

将上述代码保存成一个HTML文件打开,就可以在图片上实现类似CAD的滚轮缩放效果。你只需将`src="path/to/your/image.jpg"`替换成你自己的图片路径。
举报

更多回帖

发帖
×
20
完善资料,
赚取积分