plus做画板简单实现方法
By
admin
at 2020-02-23 • 0人收藏 • 1357人看过
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表里面设置颜色线宽等等参数, 来表述不同的线.
通过以上类似方法可以增加:
点是否在圆上, 点是否在弧线上........ 实现可选可控功能.
登录后方可回帖