用于Rectangle SVG Object / Raphael JS的Quickinfo

时间:2013-05-28 10:27:53

标签: javascript svg raphael svg-animate

我使用Raphael JS绘制矩形对象。 JS编码由运行时转换为ABAP编码并显示在内部浏览器中。 虽然显示一切都很好,但我想用鼠标滑过SVG对象时发布一个特殊的Qucikinfo。有谁知道如何通过Rectangle Objects发布快速信息?点击对象的信息也没问题。我不想使用圆形物体..

ABAP:

CONCATENATE: 'var' a_name '= paper.rect(' a_x_pos ',' a_y_pos ','
a_width ',' a_height ',' a_corner_radius ');'
INTO l_html_line SEPARATED BY space.

JS:

var name = paper.rect( x_pos, y_pos, width, height, corner_radius)

1 个答案:

答案 0 :(得分:0)

您可以查看:http://stratha.us/raphael_js_tooltip

代码非常小:

Raphael.el.tooltip = function (tp) {
  this.tp = tp;
  this.tp.ox = 0;
  this.tp.oy = 0;
  this.tp.hide();
  this.hover(
    function(event) { 
      this.mousemove(function(event) { 
        this.tp.translate(event.clientX - 
          this.tp.ox,event.clientY - this.tp.oy);
        this.tp.ox = event.clientX;
        this.tp.oy = event.clientY;
      });
      this.tp.show().toFront();
    }, 
    function(event) {
      this.tp.hide();
      this.unmousemove();
    }
  );
  return this;
};

然后你只需要打电话

name.tooltip( paper.text( 0 , 0 , "Hi, I am a tooltip" ) );

另一方面,ABAP代码看起来非常难以维护。我邀请您在codereview.stackexchange.com上发布整个代码,我相信有更好的方法可以做到这一点。