plus做画板简单实现方法

aardio的新建工程里面, 有个示例 [简单画板] , 很完整了, 位置如下:

我这里新增一个 [点选功能] , 能够删除所选择的线

简单的代码示例如下:

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=642;border="dialog frame")
winform.add(
button={cls="button";text="画";left=680;top=595;right=757;bottom=635;z=6};
button2={cls="button";text="随机生成";left=593;top=596;right=670;bottom=636;z=9};
button3={cls="button";text="删除所选线";left=596;top=539;right=760;bottom=579;z=10};
plus={cls="plus";left=0;top=0;right=760;bottom=537;bgcolor=8421376;notify=1;z=1};
q1={cls="edit";left=59;top=606;right=155;bottom=635;edge=1;z=2};
q2={cls="edit";left=161;top=606;right=257;bottom=635;edge=1;z=3};
static={cls="static";text="起点";left=2;top=606;right=57;bottom=635;transparent=1;z=7};
static2={cls="static";text="终点";left=308;top=606;right=363;bottom=635;transparent=1;z=8};
z1={cls="edit";left=371;top=604;right=467;bottom=633;edge=1;z=4};
z2={cls="edit";left=471;top=604;right=567;bottom=633;edge=1;z=5}
)
/*}}*/

import console
console.open()

var mtab = {};
var panding = function(mtab,x,y,fuzzyDistance){
	if(mtab){
       for(i=1;#mtab;1){
        	if(math.sqrt((mtab[i][1]-mtab[i][3])**2 + (mtab[i][2]-mtab[i][4])**2) + fuzzyDistance >= math.sqrt((mtab[i][1]-x)**2 + (mtab[i][2]-y)**2) + math.sqrt((mtab[i][3]-x)**2 + (mtab[i][4]-y)**2))
        	{
        		return true,i; 
        	}
       }
       return false,null;
   }
}

var selLine = null;
winform.plus.onMouseClick = function(wParam,lParam){
    var x,y = win.getMessagePos(lParam);
	console.log(x,y)
	var ret,sel = panding(mtab,x,y,2)
	selLine = sel;
	console.log(ret,selLine)
	winform.plus.redraw()
	
}
winform.plus.onMouseEnter = function(wParam,lParam){
	win.ui.waitCursor(true,::User32.LoadCursor(null,0x7F03/*_IDC_CROSS*/));
}
winform.plus.onMouseLeave = function(wParam,lParam){
    win.ui.waitCursor(false);
}

winform.plus.onDrawBackground = function(graphics,rc,backgroundColor,clr){
    var pen = gdip.pen(0xFF006666,2);
    var pensel = gdip.pen(0xFFC43152,2);
	//graphics.drawLine(pen,(rc.right-rc.left)/2,rc.top,(rc.right-rc.left)/2,rc.bottom);
	
	if(mtab){
       for(i=1;#mtab;1){
           if(selLine==i){  
           		graphics.drawLine(pensel,mtab[i][1],mtab[i][2],mtab[i][3],mtab[i][4]);	
           }else {  
           		graphics.drawLine(pen,mtab[i][1],mtab[i][2],mtab[i][3],mtab[i][4]);
           }
       }
   }
	
	pen.delete()
	pensel.delete()
	return true;//返回true阻止绘制默认背景
}

winform.plus.orphanWindow(true)



winform.button.oncommand = function(id,event){

	table.push(mtab,{winform.q1.text;winform.q2.text;winform.z1.text;winform.z2.text});
	winform.plus.redraw()
	console.dump(mtab)
}

winform.button2.oncommand = function(id,event){
	var q1 = math.random(0,500);
    var q2 = math.random(0,500);
    var z1 = math.random(0,500);
    var z2 = math.random(0,500);
    winform.q1.text = q1;
    winform.q2.text = q2;
    winform.z1.text = z1;
    winform.z2.text = z2;
}

winform.button3.oncommand = function(id,event){
    if(selLine){
    	table.remove(mtab,selLine);
    	selLine = null;
		winform.plus.redraw()	
    }
    
}

winform.show();
win.loopMessage();

以上只是演示用, 实际应该要在mtab表里面设置颜色线宽等等参数, 来表述不同的线.

通过以上类似方法可以增加:

点是否在圆上, 点是否在弧线上........ 实现可选可控功能.