Paper.js中的工具提示

Question

我是Paper.js的初学者。请告诉我如何在paper.js对象上显示工具提示？当鼠标移动到对象上时，工具提示应可见，当鼠标从对象移开时，工具提示应消失。

谢谢。

Answer 1

绘制要为其创建弹出窗口的对象时，首先将其添加到组中，然后对该对象使用onMouseEnter和onMouseLeave处理程序：

​

// Create a group
var group = new Group();
// Create a dot (circle the mouse will hover)
var point = new Point(50, 50);
var dot = new Path.Circle(point, 5);
dot.fillColor = 'blue';
// Add dot to group
group.addChild(dot);

// Create onMouseEnter event for dot
dot.onMouseEnter = function(event) {
  // Layout the tooltip above the dot
  var tooltipRect = new Rectangle(this.position + new Point(-20, -40), new Size(40, 28));
  // Create tooltip from rectangle
  var tooltip = new Path.Rectangle(tooltipRect);
  tooltip.fillColor = 'white';
  tooltip.strokeColor = 'black';
  // Name the tooltip so we can retrieve it later
  tooltip.name = 'tooltip';
  // Add the tooltip to the parent (group)
  this.parent.addChild(tooltip);
}

// Create onMouseLeave event for dot
dot.onMouseLeave = function(event) {
  // We retrieve the tooltip from its name in the parent node (group) then remove it
  this.parent.children['tooltip'].remove();
}

​