搜索
查看: 1609|回复: 3

通过鼠标拖动来调整图像在plus中的显示区域

[复制链接]

39

主题

174

帖子

1037

积分

荣誉会员

htmlayout.cn 我的学习笔记

Rank: 8Rank: 8

积分
1037
发表于 2018-5-12 16:41:23 | 显示全部楼层 |阅读模式
最近要用到摄像头,界面上只是显示摄像头中一部分图像,但是要显示的图像位置不确定,所以需要能够通过手动拖动来调整显示区域。
所以,今天试着写了下这个功能的简化版。

实现方式:
闭包,鼠标Hook

虽然实现了这个功能,但是,也不知道是不是我电脑的问题,拖动的过程中总感觉一卡一卡的。好奇怪,希望有兴趣的人,帮我测试下。
当然,有更好的办法,能改进下就更好了

GIF.gif

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form(text="鼠标拖动图像调整显示区域测试";right=639;bottom=377)
  4. winform.add(
  5. plus={cls="plus";left=126;top=102;right=490;bottom=268;border={color=-16777216;width=1};clipBk=false;clipch=1;foreRepeat="scale";notify=1;z=1}
  6. )
  7. /*}}*/

  8. var bmp = gdip.bitmap( "http://bbs.aardio.com/data/attachment/forum/201804/28/234719vy3uyoqq65bb22lb.jpg.thumb.jpg" );
  9. //定义显示图像的左上点坐标
  10. var leftUpX = (bmp.width-winform.plus.width)/2;
  11. var leftUpY = (bmp.height-winform.plus.height)/2;

  12. //设置图像显示区域
  13. var setImg = function(x,y){
  14.         winform.plus.background = bmp.clone(x,y,winform.plus.width,winform.plus.height);//在图像上裁剪一块下来 ;
  15. }
  16. setImg(leftUpX,leftUpY);

  17. function 图像调整(){
  18.     var posX,posY = leftUpX,leftUpY;
  19.     var moveImg = function(x,y){
  20.         //X轴调整
  21.         if(x<0){
  22.                 if( posX<=0 ){}
  23.                 else {
  24.                         posX = posX + x;
  25.                 };       
  26.         }else {
  27.                 if( posX>=(bmp.width-winform.plus.width) ){}
  28.                 else {
  29.                         posX = posX + x;
  30.                 }
  31.         }
  32.         //Y轴调整
  33.         if(y<0){
  34.                 if( posY<=0 ){}
  35.                 else {
  36.                         posY = posY + y;
  37.                 };       
  38.         }else {
  39.                 if( posY>=(bmp.height-winform.plus.height) ){}
  40.                 else {
  41.                         posY = posY + y;
  42.                 }
  43.         }
  44.         setImg(posX,posY);
  45.     }
  46.     return moveImg;
  47. }

  48. moveImg = 图像调整();

  49. import mouse;
  50. import mouse.hook;

  51. winform.plus.wndproc = function(hwnd,message,wParam,lParam){
  52.         select(message) {
  53.                 case 0x201/*_WM_LBUTTONDOWN*/ {
  54.                         var startX,startY = win.toClient(winform.hwnd,mouse.getPos())
  55.                         var hk = mouse.hook();
  56.                         hk.proc = function(msg,x,y,mouseData,injected,flags,timeStamp,extraInfo){
  57.                                 if( injected ) return;         
  58.                             select(msg) {
  59.                                     case 0x202/*_WM_LBUTTONUP*/{
  60.                                             //释放鼠标Hook
  61.                                         hk.close();
  62.                                     }
  63.                                     case 0x200/*_WM_MOUSEMOVE*/{
  64.                                             var nextX,nextY = win.toClient(winform.hwnd,x,y);
  65.                                             moveImg(startX-nextX,startY-nextY);
  66.                                             startX,startY = nextX,nextY;
  67.                                     }  
  68.                             }          
  69.                         }       
  70.                 }       
  71.         }
  72. }

  73. winform.show()
  74. win.loopMessage();
复制代码
! www.HtmLayout.Cn 我的学习笔记
回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
发表于 2018-5-12 17:18:44 | 显示全部楼层
你是在自己的程序里,不需要用鼠标钩子就可以处理消息。
如果鼠标拖出控件外面,可以加上 winform.plus.capture = true; 就可以继续捕获鼠标消息。
钩子影响性能,而且是系统全局的,不要滥用。

另外,你每次绘图,都重新生成图像,鼠标移动一下就生成一堆新图像,当然慢。
plus控件提供自绘接口,在 winform.plus.onDrawContent 直接改变绘图坐标就可以了。

修改后的代码:
import win.ui;
/*DSG{{*/
var winform = win.form(text="鼠标拖动图像调整显示区域测试";right=639;bottom=377)
winform.add(
plus={cls=
"plus";left=126;top=102;right=490;bottom=268;border={color=-16777216;width=1};clipBk=false;clipch=1;foreRepeat="stretch";notify=1;z=1}
)
/*}}*/

import inet.http;
winform.plus.foreground =
"http://bbs.aardio.com/data/attachment/forum/201804/28/234719vy3uyoqq65bb22lb.jpg.thumb.jpg";

var startX,startY;
var drawX,drawY = 0,0;
winform.plus.onMouseDown =
function(wParam,lParam){
    winform.plus.capture =
true;
    startX,startY = ..win.getMessagePos(lParam);
    win.ui.waitCursor(
true,::User32.LoadCursor(null,0x7F86/*_IDC_SIZEALL*/));
}

winform.plus.onMouseClick =
function(wParam,lParam){
    winform.plus.capture =
false;
    win.ui.waitCursor(
false);
}

winform.plus.onMouseMove =
function(wParam,lParam){
   
if( wParam & 0x1/*_MK_LBUTTON*/ ){
        
var x,y = win.getMessagePos(lParam);
        drawX,drawY = x-startX,y-startY;
        winform.plus.redraw();
    }
}

winform.plus.background = 0xFFFFFFFF;
winform.plus.onDrawContent =
function(graphics,rc){
    graphics.translate(drawX,drawY);
}

winform.show()
win.loopMessage();



回复

使用道具 举报

39

主题

174

帖子

1037

积分

荣誉会员

htmlayout.cn 我的学习笔记

Rank: 8Rank: 8

积分
1037
 楼主| 发表于 2018-5-12 17:25:45 | 显示全部楼层
Jacen.He 发表于 2018-5-12 17:18
你是在自己的程序里,不需要用鼠标钩子就可以处理消息。
如果鼠标拖出控件外面,可以加上 winform.plus.ca ...

谢谢Jacen大人,
! www.HtmLayout.Cn 我的学习笔记
回复

使用道具 举报

39

主题

174

帖子

1037

积分

荣誉会员

htmlayout.cn 我的学习笔记

Rank: 8Rank: 8

积分
1037
 楼主| 发表于 2018-5-12 18:50:56 | 显示全部楼层
结贴:
投桃报李, 终于在Jacen的指点下,完善了这个功能:
增加了各种边界判断,位置判断
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form(text="鼠标拖动图像调整显示区域测试";right=639;bottom=377)
  4. winform.add(
  5. plus={cls="plus";left=126;top=102;right=490;bottom=268;border={color=-16777216;width=1};clipBk=false;clipch=1;foreRepeat="center";notify=1;z=1}
  6. )
  7. /*}}*/

  8. var bmp = gdip.bitmap( "http://bbs.aardio.com/data/attachment/forum/201804/28/234719vy3uyoqq65bb22lb.jpg.thumb.jpg" );
  9. //定义显示图像的左上点初始坐标
  10. var leftUpX = (bmp.width-winform.plus.width)/2;
  11. var leftUpY = (bmp.height-winform.plus.height)/2;

  12. //设置图像显示区域
  13. function 图像调整(){
  14.     var posX,posY = -leftUpX,-leftUpY;
  15.     var moveImg = function(graphics,x=0,y=0){
  16.         //X轴调整
  17.         if(x>=0){
  18.                 if( posX>=0 ){ }
  19.                 else {
  20.                         posX = posX + x;
  21.                         if(posX>0) posX = 0;
  22.                 };       
  23.         }else {
  24.                 if( posX <= (winform.plus.width-bmp.width) ){}
  25.                 else {
  26.                         posX = posX + x;
  27.                         if(posX <= (winform.plus.width-bmp.width)) posX = winform.plus.width-bmp.width;
  28.                 }
  29.         }
  30.         //Y轴调整
  31.         if(y>=0){
  32.                 if( posY>=0 ){ }
  33.                 else {
  34.                         posY = posY + y;
  35.                         if( posY>=0 ) posY = 0;
  36.                 };       
  37.         }else {
  38.                 if( posY<=(winform.plus.height - bmp.height) ){}
  39.                 else {
  40.                         posY = posY + y;
  41.                         if( posY<=(winform.plus.height - bmp.height) ) posY = winform.plus.height - bmp.height;
  42.                 }
  43.         }
  44.         graphics.drawImage( bmp,posX,posY);
  45.     }
  46.     return moveImg;
  47. }

  48. moveImg = 图像调整();

  49. var startX,startY;
  50. var drawX,drawY = 0,0;
  51. winform.plus.onMouseDown = function(wParam,lParam){
  52.     winform.plus.capture = true;
  53.     startX,startY = ..win.getMessagePos(lParam);
  54.     win.ui.waitCursor(true,::User32.LoadCursor(null,0x7F86/*_IDC_SIZEALL*/));
  55. }

  56. winform.plus.onMouseClick = function(wParam,lParam){
  57.     winform.plus.capture = false;
  58.     win.ui.waitCursor(false);
  59. }

  60. winform.plus.onMouseMove = function(wParam,lParam){
  61.     if( wParam & 0x1/*_MK_LBUTTON*/ ){
  62.         var x,y = win.getMessagePos(lParam);
  63.         drawX = x-startX;
  64.         drawY = y-startY;
  65.         winform.plus.redraw();
  66.         startX,startY = x,y;
  67.     }
  68. }

  69. //winform.plus.background = 0xFFFFFFFF;
  70. winform.plus.onDrawContent = function(graphics,rc){
  71.     moveImg(graphics,drawX,drawY);
  72. }

  73. winform.show()
  74. win.loopMessage();
复制代码
! www.HtmLayout.Cn 我的学习笔记
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-12-18 22:44 , Processed in 0.093750 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表