[Web Chart系列之五] 5. 实战draw2d之figure tooltip 实现

写在前面

申明一下，关于系列五的前4篇的介绍都是基于 draw2d 的版本version 2.3.0 上的开发。

截至目前(2013/05), draw2d的最新版本已经是version 2.6.1 了。

对于tooltip 的功能，在 version 2.3.0是没有提供，但是，在version 2.6.1已经提供了实现tooltip的方式。

实现tooltip in version 2.6.1

在没有看到实现源代码之前，以为实现方式应该是在draw2d.js 给 shape 加上一个tooltip 的属性，提供一些set 或hide 的方法供调用。
实际看过之后才发现并非这样。先直接贴上如何实现的Source Code:

MyFigure = draw2d.shape.basic.Rectangle.extend({NAME : "MyFigure",init : function(){this._super();this.createPort("input");this.createPort("output");this.setDimension(50,50);this.tooltip = null;},/*** @method* Change the color and the internal value of the figure.* Post the new value to related input ports.* */onMouseEnter: function(){this.showTooltip();},onMouseLeave: function(){this.hideTooltip();},setPosition: function(x,y){this._super(x,y);this.positionTooltip();},hideTooltip:function(){          this.tooltip.remove();   this.tooltip = null;},showTooltip:function(){          this.tooltip= $('<div class="tooltip">Tooltip</div>').appendTo('body');this.positionTooltip();        },positionTooltip: function(){if( this.tooltip===null){return;}var width =  this.tooltip.outerWidth(true);var tPosX = this.getAbsoluteX()+this.getWidth()/2-width/2+8;var tPosY = this.getAbsoluteY()+this.getHeight() + 20;this.tooltip.css({'top': tPosY, 'left': tPosX});}});

可以发现，实现方式其实是叠加式的，并没有在原有的定义处进行修改，而是提供给开发者扩展的这种方式。
继承一个shape类--》mouse enter 和 mouse leave 时打开和关闭tooltip. tooltip 的实现就是在body 页面添加一个div, 设置此div的css 样式及position.
既然是这种实现方式，则在老版本上应该依据此种方式也可以添加tooltip 了。
试了一下，没有成功。原因是 onMouseEnter 和 onMouseLeave 的事件触发方法没有执行。看来要达成此效果，需要修改draw2d.js 使 shape 的mouse enter 和mouse leave的事件方法可以执行。另外就是要加入tooltip 的 CSS了。

老版本的其他解决方案

如果使用的是draw2d 的老版本，是否有其他方式实现tooltip 的功能呢？
答案肯定是有的。
实现原理和新版本的实现应该是类似的。
介绍解决方案之前先介绍一下jQueyUI
jQuery UI - jQuery user interface ，是使用jQuery 实现的一些界面元素。
在jQueryUI 1.9 版本及以上就有tooltip 的组件。(1.8 版本及以下都没有)
看一下如何实现：

<!-- by oscar999 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tooltip Test</title><script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-ui-1.10.3.custom.js"></script><link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.10.3.custom.css"><script>
$(window).load(function(){$("#div1").tooltip();
});
</script>
</head>
<body>
<div id="div1" title="This jQueryUI tooltip!">Mouse over me!</div>
</body>
</html>

实现方式是：查找页面元素是否有title 的属性，如果有的话，就添加 tooltip 的div.
所以如果我们给页面的svg的figure 添加title 的属性应该就可以显示美观的tootip 了。

如果要给Rectangle 这种shape 添加 tooltip

具体需要修改：

1. draw2d.shape.basic.Rectangle 的repaint 定义部分

新增以下部分 (定义在repaint 而不是init 的原因是在repaint 中有使用到attributes)

attributes.title = stitle;

2. draw2d.shape.basic.Rectangle 的createShapeElement 定义部分.(此部分通过raphael 创建shape)

    createShapeElement: function () {        return this.canvas.paper.rect(this.getAbsoluteX(), this.getAbsoluteY(), this.getWidth(), this.getHeight(), null, this.getTitle());}

3. raphael 创建shape 的部分添加title 属性

    //add titlepaperproto.rect = function (x, y, w, h, r ,t) {      var out = R._engine.rect(this, x || 0, y || 0, w || 0, h || 0, r || 0, t || "");this.__set__ && this.__set__.push(out);return out;};

    //add titleR._engine.rect = function (svg, x, y, w, h, r, t) {var el = $("rect");svg.canvas && svg.canvas.appendChild(el);var res = new Element(el, svg);        res.attrs = {x: x, y: y, width: w, height: h, r: r || 0, rx: r || 0, ry: r || 0, fill: "none", stroke: "#000", title: t || ""};res.type = "rect";$(el, res.attrs);return res;};