[置顶] 基于HTML5 Canvas实现用户交互

    很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用到HT for Web（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html）写了个Demo进行示例。

    场景如下所示，在该场景中双击温度和湿度下的Node，会生成输入框供用户填写内容，这之后，用户按下“Enter”键可以将输入内容传到Node中，同时删除输入框，地址：：http://www.hightopo.com/demo/GraphInput/display.html

 

 

接下来我们探讨一下具体实现：

准备工作如下：

<script src='ht.js'></script>

 

dataModel = new ht.DataModel();
graphView = new ht.graph.GraphView(dataModel);
graphView.addToDOM();

 

1、利用系统中定义好的矢量资源进行反序列化来实现场景图：

 

ht.Default.xhrLoad('TemperatureIndex.json', function(text) {
    var json = ht.Default.parse(text);                    
    if(json.title) document.title = json.title;
    dataModel.deserialize(json);
} 

 

2、双击事件

    本例双击会产生输入框，在我们的HT中，GraphView默认内置了一些交互器，以实现基本的选择、单双击、缩放、平移和编辑等交互的功能