如果将路径添加到drawComponent且它们重叠,则路径将按添加顺序堆叠。我可以向每个精灵添加事件侦听器,以便在鼠标悬停时可以更改颜色和笔触宽度,但是如何将重叠的路径置于最前面呢?
这是一组更改颜色的侦听器:
listeners: {
mouseover: function(line) {
line.setAttributes({ stroke: "red", "stroke-width": 8}, true );
},
mouseout: function(line) {
line.setAttributes({ stroke: "black", "stroke-width": 4 }, true );
}
}
最佳答案
好的,以下方法可行,但我必须相信有更好的方法。您可以将某些东西移到前面,方法是先将其删除再添加回去。但是,将其删除会删除mouse *侦听器,因此我不得不将侦听器上移一个缺口,就像这样(这在具有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
}
};
关于extjs - 如何在鼠标悬停时将Extjs 4绘图组件 Sprite 带到顶部?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15172274/