Question

如果我将路径添加到drawComponent并且它们重叠，则路径按照它们添加的顺序堆叠。我可以为每个sprite添加一个事件监听器，以便在鼠标悬停时更改颜色和笔触宽度，但是如何将重叠的路径带到前面？

这是一组改变颜色的侦听器：

listeners: {
    mouseover: function(line) {
        line.setAttributes({ stroke: "red", "stroke-width": 8}, true );
    },
    mouseout: function(line) {
        line.setAttributes({ stroke: "black", "stroke-width": 4 }, true );
    }
}

Answer 1

好的，以下是有效的，但我必须相信有更好的方法。您可以通过移除并将其添加回来将某些东西移到前面。但是，删除它会删除鼠标*侦听器，所以我不得不将侦听器移动到一个档位，就像这样（这是一个具有drawComponent属性的组件内部（此时为“me”）。

var pathout = function(line,target,opts) {
    line.setAttributes({ stroke: "blue", "stroke-width": 2 }, true );
    line.on('mouseover',pathover, this,opts);
};
var pathover = function(line,target,opts) {
    me.drawComponent.surface.remove(line,true);
    me.drawComponent.surface.add( line ).show(true);
    line.setAttributes({ stroke: "red", "stroke-width": 4}, true );
    line.on('mouseout',pathout,this,opts);

};
this.paths[pathName] = { 
    type: "path", 
    path: "M" + path.join(" L"), 
    stroke: next_color, 
    "stroke-width": 2,
    listeners: {
        mouseover: pathover,
        mouseout: pathout,
        scope: this
    }
};

Answer 2

这也是可能的，而不是重新添加。

                var marker = Ext.create('Ext.draw.Sprite',{
                    type: 'circle',
                    fill: 'red',
                    surface : me.surface,
                    radius: 2,
                    x : sprite.x,
                    y : sprite.y
                });

                marker.show(true);

如何在鼠标悬停时将Extjs 4绘制组件精灵带到顶部？

2 个答案: