HTML5画布中如何实现弹出框效果

　　介绍

这篇文章将为大家详细讲解有关HTML5画布中如何实现弹出框效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

用户鼠标移入时,有弹出框出现,这样的需求很常见。这在处理HTML元素实现时简单,但是如果是对HTML5画布构成的图形进行处理,这种方法不再适用,因为帆布使用的是另外一套机制,无论在画布上绘制多少图形,画布都是一个整体。而图形本身实际都是帆布的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。然而,在Web中HT,这种需求很容易实现,场景如下:

HTML5画布中如何实现弹出框效果

这个场景图是基于HT Web的JSON文件,可能大家对怎么生成这样的JSON文件有疑惑,其实这里是基于这个麻雀虽小五脏俱全的“HTML5拓扑图编辑器”(http://www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html)进行了扩展,很容易就自定义出满足我需求拓扑编辑器。不仅如此,在这个演示中,定义的三种类型弹框的矢量图,只要tips1.json&,,,只要tips2.json&,,,只要tips3.json&,是通过这个矢量编辑器(http://www.hightopo.com/demo/vector-editor/index.html)简单绘制了下,也还蛮好用。在上述场景中,用户将鼠标移入到草地等对象时,会有弹出框显示它的详细信息,演示地址:http://www.hightopo.com/demo/blog_meadow_20170605/index.html

具体实现如下:

<强>准备工作

,引入我们的HT (http://www.hightopo.com/):

& lt; script  src=https://www.yisu.com/zixun/ht.js的> 　　dataModel=new ht.DataModel (); 　　graphView一样=new ht.graph.GraphView(模型); 　　graphView.addToDOM ();

HT提供了自定义的JSON格式的矢量描述形式,以HT标准定义的JSON矢量格式,也可以作为图片进行注册和使用,HT的矢量方式比传统格式更节省空间,缩放不失真,戳Web了HT解详细信息。这里,将三种形状的JSON弹出框注册成图片以便后续调用:

ht.Default.setImage (& # 39; tips1& # 39;,, & # 39;符号/tips1.json& # 39;); 　　ht.Default.setImage (& # 39; tips2& # 39;,, & # 39;符号/tips2.json& # 39;); 　　ht.Default.setImage (& # 39; tips3& # 39;,, & # 39;符号/tips3.json& # 39;);

然后获取有交互效果的对象,其中各个对象中的属性名是给各个图元设置好的标签名:
,

//树 　　var  tree =, { 　　,,,,& # 39;tree1& # 39;,,,真的, 　　,,,,& # 39;tree2& # 39;,,,真的, 　　,,,,& # 39;tree3& # 39;:,真的 　　};//草地 　　var  grass =, { 　　,,,,& # 39;grass1& # 39;,,,真的, 　　,,,,& # 39;grass2& # 39;,,,真的, 　　,,,,& # 39;grass3& # 39;:,真的 　　,};//山 　　var  mountain =, { 　　,,,& # 39;山# 39;:真实 　　};

<>强弹出框

,,,其实弹出框的本质是一个节点,当用户鼠标移入移出时,

1,控制节点的隐藏和显示可以达到弹框的效果;

2,鼠标位置的改变伴随着节点位置的改变;

3,鼠标移入到不同的对象上时,节点上的贴图也跟着发生变化;

4节点中的属性值也随着鼠标位置发生变化。

,,,所以,要实现弹框,首先应新建节点,并将其的层级设置为,只要higher&,,在这之前还需要将场景图的JSON文件反序列化,并且给反序列化后的图元均设置为层级,只要lower&,,防止被已有的图元挡住:

ht.Default.xhrLoad (& # 39; meadow.json& # 39;,,函数(文本),{ 　　,,,const  json =, ht.Default.parse(文本),,,,,,,,,,,,,,,,,,,, 　　,,,如果(json.title), document.title =, json.title; 　　,,,dataModel.deserialize (json); 　　,,,//设置层级 　　,,,dataModel.each(功能(数据){ 　　,,,,,,,data.setLayer(& # 39;低# 39;); 　　,,,}); 　　,,,//新建节点 　　,,,var  node =, new  ht.Node (),,,,,,,,,,,,,,,,,,,, 　　,,,node.s (& # 39; 2 d.visible& # 39;假); 　　,,,node.setLayer(& # 39;高# 39;); 　　,,,dataModel.add(节点); 　　})

,然后,对底层的DIV监听mousemove事件,判断鼠标的位置是否在上述三个对象之上,根据对象类型,调用布局()函数对节点重新布局:

graphView.getView () .addEventListener (& # 39; mousemove& # 39;,,函数(e), { 　　,,,,node.s (& # 39; 2 d.visible& # 39;假); 　　,,,,var  hoverData =, graphView.getDataAt (e); 　　,,,,pos =, graphView.getLogicalPoint (e); 　　,,,,如果(! hoverData),返回; 　　,,,,如果(树(hoverData.getTag ())) { 　　,,,,,,,布局(节点,pos, & # 39; tips1& # 39;); 　　,,,,},else  if (草(hoverData.getTag ())), { 　　,,,,,,,布局(节点,pos, & # 39; tips2& # 39;); 　　,,,,},else  if (山(hoverData.getTag ())), { 　　,,,,,,,布局(节点,pos, & # 39; tips3& # 39;); 　　,,,,} 　　});

HTML5画布中如何实现弹出框效果