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

popdes

最近要用到摄像头，界面上只是显示摄像头中一部分图像，但是要显示的图像位置不确定，所以需要能够通过手动拖动来调整显示区域。
所以，今天试着写了下这个功能的简化版。

实现方式:
闭包，鼠标Hook

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

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. 
   
9. var bmp = gdip.bitmap( "http://bbs.aardio.com/data/attachment/forum/201804/28/234719vy3uyoqq65bb22lb.jpg.thumb.jpg" );
   
10. //定义显示图像的左上点坐标
    
11. var leftUpX = (bmp.width-winform.plus.width)/2;
    
12. var leftUpY = (bmp.height-winform.plus.height)/2;
    
13. 
    
14. //设置图像显示区域
    
15. var setImg = function(x,y){
    
16.         winform.plus.background = bmp.clone(x,y,winform.plus.width,winform.plus.height);//在图像上裁剪一块下来 ;
    
17. }
    
18. setImg(leftUpX,leftUpY);
    
19. 
    
20. function 图像调整(){
    
21.     var posX,posY = leftUpX,leftUpY;
    
22.     var moveImg = function(x,y){
    
23.         //X轴调整
    
24.         if(x<0){
    
25.                 if( posX<=0 ){}
    
26.                 else {
    
27.                         posX = posX + x;
    
28.                 };       
    
29.         }else {
    
30.                 if( posX>=(bmp.width-winform.plus.width) ){}
    
31.                 else {
    
32.                         posX = posX + x;
    
33.                 }
    
34.         }
    
35.         //Y轴调整
    
36.         if(y<0){
    
37.                 if( posY<=0 ){}
    
38.                 else {
    
39.                         posY = posY + y;
    
40.                 };       
    
41.         }else {
    
42.                 if( posY>=(bmp.height-winform.plus.height) ){}
    
43.                 else {
    
44.                         posY = posY + y;
    
45.                 }
    
46.         }
    
47.         setImg(posX,posY);
    
48.     }
    
49.     return moveImg;
    
50. }
    
51. 
    
52. moveImg = 图像调整();
    
53. 
    
54. import mouse;
    
55. import mouse.hook;
    
56. 
    
57. winform.plus.wndproc = function(hwnd,message,wParam,lParam){
    
58.         select(message) {
    
59.                 case 0x201/*_WM_LBUTTONDOWN*/ {
    
60.                         var startX,startY = win.toClient(winform.hwnd,mouse.getPos())
    
61.                         var hk = mouse.hook();
    
62.                         hk.proc = function(msg,x,y,mouseData,injected,flags,timeStamp,extraInfo){
    
63.                                 if( injected ) return;         
    
64.                             select(msg) {
    
65.                                     case 0x202/*_WM_LBUTTONUP*/{
    
66.                                             //释放鼠标Hook
    
67.                                         hk.close();
    
68.                                     }
    
69.                                     case 0x200/*_WM_MOUSEMOVE*/{
    
70.                                             var nextX,nextY = win.toClient(winform.hwnd,x,y);
    
71.                                             moveImg(startX-nextX,startY-nextY);
    
72.                                             startX,startY = nextX,nextY;
    
73.                                     }  
    
74.                             }          
    
75.                         }       
    
76.                 }       
    
77.         }
    
78. }
    
79. 
    
80. winform.show()
    
81. win.loopMessage();

复制代码

JacenHe

你是在自己的程序里，不需要用鼠标钩子就可以处理消息。
如果鼠标拖出控件外面，可以加上 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();

popdes

Jacen.He 发表于 2018-5-12 17:18
你是在自己的程序里，不需要用鼠标钩子就可以处理消息。
如果鼠标拖出控件外面，可以加上 winform.plus.ca ...

谢谢Jacen大人，

popdes

结贴：
投桃报李， 终于在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. 
   
9. var bmp = gdip.bitmap( "http://bbs.aardio.com/data/attachment/forum/201804/28/234719vy3uyoqq65bb22lb.jpg.thumb.jpg" );
   
10. //定义显示图像的左上点初始坐标
    
11. var leftUpX = (bmp.width-winform.plus.width)/2;
    
12. var leftUpY = (bmp.height-winform.plus.height)/2;
    
13. 
    
14. //设置图像显示区域
    
15. function 图像调整(){
    
16.     var posX,posY = -leftUpX,-leftUpY;
    
17.     var moveImg = function(graphics,x=0,y=0){
    
18.         //X轴调整
    
19.         if(x>=0){
    
20.                 if( posX>=0 ){ }
    
21.                 else {
    
22.                         posX = posX + x;
    
23.                         if(posX>0) posX = 0;
    
24.                 };       
    
25.         }else {
    
26.                 if( posX <= (winform.plus.width-bmp.width) ){}
    
27.                 else {
    
28.                         posX = posX + x;
    
29.                         if(posX <= (winform.plus.width-bmp.width)) posX = winform.plus.width-bmp.width;
    
30.                 }
    
31.         }
    
32.         //Y轴调整
    
33.         if(y>=0){
    
34.                 if( posY>=0 ){ }
    
35.                 else {
    
36.                         posY = posY + y;
    
37.                         if( posY>=0 ) posY = 0;
    
38.                 };       
    
39.         }else {
    
40.                 if( posY<=(winform.plus.height - bmp.height) ){}
    
41.                 else {
    
42.                         posY = posY + y;
    
43.                         if( posY<=(winform.plus.height - bmp.height) ) posY = winform.plus.height - bmp.height;
    
44.                 }
    
45.         }
    
46.         graphics.drawImage( bmp,posX,posY);
    
47.     }
    
48.     return moveImg;
    
49. }
    
50. 
    
51. moveImg = 图像调整();
    
52. 
    
53. var startX,startY;
    
54. var drawX,drawY = 0,0;
    
55. winform.plus.onMouseDown = function(wParam,lParam){
    
56.     winform.plus.capture = true;
    
57.     startX,startY = ..win.getMessagePos(lParam);
    
58.     win.ui.waitCursor(true,::User32.LoadCursor(null,0x7F86/*_IDC_SIZEALL*/));
    
59. }
    
60. 
    
61. winform.plus.onMouseClick = function(wParam,lParam){
    
62.     winform.plus.capture = false;
    
63.     win.ui.waitCursor(false);
    
64. }
    
65. 
    
66. winform.plus.onMouseMove = function(wParam,lParam){
    
67.     if( wParam & 0x1/*_MK_LBUTTON*/ ){
    
68.         var x,y = win.getMessagePos(lParam);
    
69.         drawX = x-startX;
    
70.         drawY = y-startY;
    
71.         winform.plus.redraw();
    
72.         startX,startY = x,y;
    
73.     }
    
74. }
    
75. 
    
76. //winform.plus.background = 0xFFFFFFFF;
    
77. winform.plus.onDrawContent = function(graphics,rc){
    
78.     moveImg(graphics,drawX,drawY);
    
79. }
    
80. 
    
81. winform.show()
    
82. win.loopMessage();

复制代码