zoukankan      html  css  js  c++  java
  • Halcon HWindowControl 控件中图像的缩放与移动

    写在前面,在较高的版本中有提供一个更好的显示控件 HSmartWindowControl 。

    • 缩放时,将鼠标的当前位置作为缩放的中心
    • 移动时,修改图像的原点即可

    使用 Halcon 中 HWindowControl 控件的 ImagePart 来实现图像缩放。
     ImagePart 指示的是要在 HWindowControl 的窗体中显示图像的哪个部分。

    首先 HWindowControl 控件的尺寸是固定的,当我们在这个固定的尺寸中,相对原来显示的一幅完整的图像,现在只显示图像的一部分,即可达到放大效果。
    即想放大时,我们便缩小 ImagePart ;想缩小时,我们便放大 ImagePart 。

    例如:一幅 800*600 的图像,
    一开始我们将 ImagePart 设置为 (0, 0) -> (800*600) ;
    现在我们将其设置为 (0, 0) -> (400, 300) ,
    之前用整幅图像去填充 HWindowControl 控件,现在用半幅图像去填充它,显然这部分图像就会被放大。放大的倍数是 2 。

    现在可以缩放了,再看看如何实现以鼠标的当前位置作为中心,进行缩放?

    要保证鼠标中心位置,即保证鼠标所指的图像相对位置不变即可。

    首先,假设图像的宽度为 Width ,图像的高度为 Height ,缩放比例为 Scale 。
    那么,显然初始状态时 ImagePart 的宽度为 Width, 高度为 Height ;
    缩放后 ImagePart 的宽度为 Width * ( Scale / 1 ) , 高度为 Height * ( Scale / 1 )

    OK , 再假设缩放前鼠标的坐标为 ( X, Y ) , ImagePart 的起始坐标为 ( X0, Y0 ) , 终点坐标为 (X1, Y1) 。
    那么,鼠标的相对坐标为 ( (X - X0) / (X1 - X0) * 100%, (Y - Y0) / (Y1 - Y0) * 100% )

    那么,相对坐标 乘以 缩放后的大小,即可得到缩放后的鼠标坐标。
    那么,缩放前鼠标坐标 减去 缩放后鼠标坐标 得到 缩放后 ImagePart 的起始坐标;
    那么,缩放后 ImagePart 的起始坐标 加上 缩放后图像的大小,即可得到缩放后 ImagePart 的终点坐标。

    最后,调用 HWindowControl.ImagePart() , 即可实现缩放功能。

    其实,假如理解了图像的缩放,图像的移动就简单多了,只需先记录下初始 ImagePart 的起点和终点坐标,初始鼠标坐标,移动过程中根据 当前鼠标坐标 减去 初始鼠标坐标 ,即可得到移动后的 ImagePart 的起点和终点坐标。

  • 相关阅读:
    HTML5/CSS3滑块动画菜单
    基于HTML5手机登录注册表单代码
    基于HTML5手机上下滑动翻页特效
    基于jQuery+HTML5页面整屏滑动切换代码
    基于html5可拖拽图片循环滚动切换
    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片
    HTML5实现摇一摇
    html5桌面通知,notification的使用,右下角出现通知框
    html5全局属性
    HTML5 QQ登录背景动态图片
  • 原文地址:https://www.cnblogs.com/ybqjymy/p/14343740.html
Copyright © 2011-2022 走看看