javascript - 悬停时的 FabricJS 标签

Question

我尝试在用户悬停元素时添加标签:

var rect = new fabric.Rect({
    originX: 'top',
    originY: 'top',
    width: 150,
    height: 120,
    fill: 'rgba(255,0,0,0.5)',
    transparentCorners: true
});
var text = new fabric.Text('hello world', {
    fontSize: 30,
    originX: 'top',
    originY: 'top'
});

canvas.on('mouse:over', function(e) {
    var group = new fabric.Group([ rect, text ], {
    left: e.target.left,
    top: e.target.top
});
    canvas.add(group);
    canvas.renderAll();
});

canvas.on('mouse:out', function(e) {
    //e.target.set('fill', 'green');
    canvas.remove(group);
    canvas.renderAll();
});

但是当 mouse:out 触发时我得到:

Uncaught ReferenceError: group is not defined
    at i.<anonymous> (can.js:38)
    at i.r (fabric.min.js:1)
    at i._fireOverOutEvents (fabric.min.js:3)
    at i.findTarget (fabric.min.js:3)
    at i.__onMouseMove (fabric.min.js:4)
    at i._onMouseMove (fabric.min.js:4)

如何使用悬停元素的左侧和顶部创建一个全局组，或者有更好的方法吗？

Answer 1

group 的作用域是 mouse:over 事件的本地私有(private)变量。尝试从以下位置删除 var:

var group = new fabric.Group([ rect, text ], {

将 group 范围设置为全局:

 group = new fabric.Group([ rect, text ], {