TWaver自动化设计平台Legolas —— 交互事件响应动作

本文通过扳手式和旋转式阀门的实例,详细介绍了Legolas中交互事件响应动作的应用方法,包括如何添加onclick动作及实现阀门状态变化的过程。

http://v.youku.com/v_show/id_XOTYxMzYxNTA4.html

在“自定义数据响应动作”篇中,介绍了“动作”相关内容,了解到“动作”分为多种,各种动作的添加方式相同,但是应用方式各自不同。

在视频中能看到两种阀门(扳手式和旋转式)的不同动作,这里就以它们的实现为例,来介绍交互事件响应动作的使用
交互事件响应动作指人机交互时的事件响应动作,例如鼠标、键盘,w3c中对各种交互事件有规范的命名,Legolas中交互事件响应动作也遵循w3c中命名规范,在事件名前“on”前缀。
对于交互事件响应动作的应用,当交互事件触发时,模板对象会按照命名规则查找对应的动作并执行,所以无需手动绑定

选中扳手式阀门,对其添加onclick交互动作


function (event){
    var self = this;
    var dialogSetting = {
        "title":'阀门',
        "size":{"width":260,"height":100},
    }
    var onLoaded = function(dview){
        var vi = dview.getVIsByID("valveControl")[0];
        vi._refVi = self;
        var angle = self.getValue('angle');
        vi.setData(angle==90?'close':'open');
        settingView = dview;
    }
    var diagramSetting = {
        "type":DIAGRAMCONTENTTYPE[1],
        "src":"handleValve01Control",
        "isRuntime":true,
        "onLoaded":onLoaded
    }
    Toolkits.showDiagramViewDialog(dialogSetting,diagramSetting);
}

代码意思为当点击模板对象后,弹出对话框

Toolkits.showDiagramViewDialog(dialogSetting,diagramSetting);

表示弹出对话框内容为diagram,这里用到了diagram的嵌套。方法参数分别为弹出框的配置参数和diagram的配置参数。在diagramSetting指定了需要加载的diagram名

这里需要加载的是handleValve01Control图纸,从下图可以看到handleValve01Control图纸中只有一组单选按钮,那么改变阀门状态的动作又在哪呢?选中单选按钮能看到在其“动作”列表中定义了changeValue动作

function (v){
    var angle = 0;
    if(v == 'close'){
        angle = 90;
    } 
    this._refVi.rotatePartByAxis('handle', {x:0,y:1,z:0}, {x:0,y:15,z:0}, angle);
}
this._refVi为点击的模板对象

到这里对扳手式阀门交互就完成了,是不是很简单
对于旋转式阀门只是弹出的图纸不同而已

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值