Question

正如标题所说，当我将鼠标悬停在SVG中人物的边界（打击）上时，是否可能发生事件？我在椭圆周围做了一个矩形，我希望能够使用矩形的边框来知道该做什么（调整宽度或高度）。

我怎么能用Dart做到这一点？我还没有发现任何东西，即使是java也是如此。我想创建两个矩形，比另一个大一个1px并使用bigOver的大矩形。这是唯一的方法吗？

编辑：能够理解我在上/下或左/右徘徊时能够理解是很好的

Edit2：要完成Robert Longson 给出的答案（谢谢！），这里是我如何检测矩形的哪个部分：编辑3：现在可行了

_rectangle.style.setProperty("pointer-events", "stroke");
_onMouseResize(MouseEvent e) {
  int l_x = (e.offset.x-cx+rx).abs();
  int r_x = (e.offset.x-cx-rx).abs();
  int u_y = (e.offset.y-cy+ry).abs();
  int d_y = (e.offset.y-cy-ry).abs();
  if (l_x < rx~/20) {
    if (u_y < ry~/20) {
      window.console.info('top left ');
      _rectangle.style.setProperty("cursor", "nw-resize");
    } else if (d_y < ry~/20) {
      window.console.info('bottom left ');
      _rectangle.style.setProperty("cursor", "sw-resize");
    } else {
      window.console.info('left side ');
      _rectangle.style.setProperty("cursor", "w-resize");
    }
  } else if (r_x < rx~/20) {

    if (u_y < ry~/20) {
      window.console.info('top right ');
      _rectangle.style.setProperty("cursor", "ne-resize");
    } else if (d_y < ry~/20) {
      window.console.info('bottom right ');
      _rectangle.style.setProperty("cursor", "se-resize");
    } else {
      window.console.info('right side ');
      _rectangle.style.setProperty("cursor", "e-resize");
    }
  } else {
    if (u_y < ry~/20) {
      window.console.info('top ');
      _rectangle.style.setProperty("cursor", "n-resize");
    } else if (d_y < ry~/20) {
      window.console.info('bottom ');
      _rectangle.style.setProperty("cursor", "s-resize");
    }
  }

} 请注意，rx，ry是内部椭圆的半径（此处未显示）。我根据椭圆的rx，ry，cx，cy构建矩形

Answer 1

您可以使用pointer-events属性仅在笔划上调用鼠标悬停效果。你想要pointer-events =“visibleStroke”或者可能是pointer-events =“stroke”

如果你将它与dart onmouseover处理程序结合......

element.onMouseOver.listen( (event) {
  print('onMouseOver!');
} );

那应该给你你想要的东西。如果你想做单独的上/下/左/右处理，你要么必须找出悬停使用事件坐标的地方，要么为不同的边有单独的部分。

鼠标悬停在矩形边框上

1 个答案: