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