Twaver-HTML5基础学习(29)界面交互

最新推荐文章于 2022-05-02 07:30:00 发布

六卿

最新推荐文章于 2022-05-02 07:30:00 发布

阅读量659

点赞数 3

分类专栏： # Twaver HTML5 2d基础文章标签：交互 twaver html5 2d 拓扑

本文链接：https://blog.csdn.net/qq_43291759/article/details/124517477

版权

Twaver HTML5 2d基础专栏收录该内容

41 篇文章 9 订阅

订阅专栏

界面交互

拓扑图上的鼠标、键盘、触屏交互通过一堆Interaction组成，每个Interaction包含独立的事件监听和卸载操作，其中最基本的实现类是twaver.network.interaction.BaseInteraction，其他交互类都是从它继承衍生出来的

下面是BaseInteraction{}的实现代码，其中的setUp函数用于添加监听事件，tearDown函数卸载监听，实现交互监听类时，通常需要重写这两个方法。

twaver.vector.interaction.BaseInteraction = function (network) {
    this.network = network;
};
_twaver.ext('twaver.vector.interaction.BaseInteraction', Object, {
    setUp: function () {
    },
    tearDown: function () {
    },
    addListener: function () {
        for (var i = 0; i &lt; arguments.length; i++) {
            var type = arguments[i];
            $html.addEventListener(type, 'handle_' + type, this.network.getView(), this);
        }
    },
    removeListener: function () {
        for (var i = 0; i &lt; arguments.length; i++) {
            $html.removeEventListener(arguments[i], this.network.getView(), this);
        }
    },
});

上面的其实也不太懂…

交互模式

Network中预定义了一些常用的几种交互模式，包括默认模式、编辑模式、创建连线模式、创建多点连线、多边形网元以及触控交互模式，此外放大镜模式也很容易实现。

//设置默认模式
setDefaultInteractions:function(lazyMode)
//设置编辑模式
setEditInteractions:function(lazyMode)
//设置创建网元模式，type可为网元类型或者function,如:twaver.Node或者MyElement(自定义交互模式)
setCreateElementInteractions:function(type)
//设置创建连线模式
setCreateLinkInteractions:function(type)
//设置创建形状连线模式
setCreateShapeLinkInteractions:function(type)
//设置创建形状网元模式
setCreateShapeNodeInteractions:function(type)
//设置触屏模式
setTouchInteraction:function()

默认交互模式:

(正常模式)

network.setDefaultInteractions(false)

在这里插入图片描述

(lazy模式):

network.setDefaultInteractions(true)

在这里插入图片描述
开启后拖动node节点会出现一个方框。

编辑模式

network.setEditInteractions(true)

在这里插入图片描述

所有的图元都可以手动进行改变大小和位置

网元交互模式

// 设置创建网元模式
network.setCreateElementInteractions(twaver.Node)

在这里插入图片描述

点击任意位置或者拖动node元素都会留下痕迹，生成新的node元素

创建Link交互模式:

network.setCreateLinkInteractions(twaver.Node)

在这里插入图片描述
没看出来会用在什么场景，也就是增加了根线，但是点击其他坐标的时候，link会消失

创建ShapeLink交互模式:

network.setCreateShapeLinkInteractions(twaver.ShapeLink);

一开始：
在这里插入图片描述
连接后：

移动后：

创建ShapeNode交互模式:

network.setCreateShapeNodeInteractions();

在这里插入图片描述

Note:Network初始化的时候会检测设备，判断当前设备支持的交互方式，设置对应的交互模式。

放大镜交互模式:

/**
 * network:Network
 * scale:放大倍数,默认值为2
 * xRadius:放大镜的宽度,默认值为100
 * yRadius:放大镜的高度,默认值为100
 */ 
twaver.vector.interaction.MagnifyInteraction = function(network, scale, xRadius, yRadius) {}

network.setInteractions([
     new twaver.vector.interaction.DefaultInteraction(network),
     new twaver.vector.interaction.MagnifyInteraction(network,2,100,100)
]);

在这里插入图片描述

// 交互监听器

network.setInteractions([
       new twaver.vector.interaction.DefaultInteraction(network),
       new twaver.vector.interaction.MagnifyInteraction(network,4,300,300)
   ]);