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();
}

Paper.js中的工具提示

1 个答案: