调整 SVG 元素大小：多个项目的最佳实践

Question

在另一个 SVG 元素上调整椭圆或矩形的最佳做法是什么？

如果我不在椭圆上检查onMouseMove 事件，则调整大小将停止。我正在考虑在svg 元素上实现监听器，并将信息传递给我开始调整大小的椭圆。这意味着在svg 元素上有一个通用的Resize() 方法，该方法传递给选定椭圆的Resize()。

没有更简单的方法吗？

我目前正在使用Dart，但它应该与javascript 相同。

一个例子是一个<svg> 元素，其中一个<g> 包含<rect> 和一个<ellipse>。如果我开始在 rectangle.onMouseMove 上调整矩形的大小，那么当我在它外面时，它就会停止调整大小。为了避免这种情况，我必须使用 svg.onMouseMove，并使用调整矩形大小的 resize 方法。要知道它是要调整大小的矩形，我检查 onMouseDown 并再次检查目标（Dart 上的 MouseEvent.target。不知道如何检测我正在触摸的内容，而无需对 id 进行繁琐的检查）。请注意，我要完成的是使用矩形来调整椭圆的大小。我只在调整大小时显示矩形。

Answer 1

以下代码将在您开始拖动时创建一个圆圈并调整其大小。
当鼠标移出圆圈时也可以使用。
也许您可以根据自己的喜好进行修改。

哦，我的 Dart 代码可能不是最好的，因为我最近才开始学习 Dart。
欢迎任何改进。

import 'dart:html';
import 'dart:svg';
import 'dart:math' as math;

void main() {

  // add new svg
  var svg = new SvgSvgElement();
  svg.style.width = '400px';
  svg.style.height = '400px';
  svg.style.border = '1px solid black';
  var body = document.querySelector('body');
  body.append(svg);

  // add group
  var g = new SvgElement.tag('g');
  svg.append(g);

  // center of circle
  var center = new math.Point(200, 200);
  var startR = 70;
  var newR = 70;

  // add circle
  var circle = new CircleElement();
  circle.setAttribute('cx', center.x.toString());
  circle.setAttribute('cy', center.y.toString());
  circle.setAttribute('r',  startR.toString());
  circle.setAttribute('fill', 'green');
  g.append(circle);

  circle.onMouseDown.listen((MouseEvent E) {
    var startOffset = E.offset;
    var startDistance = startOffset.distanceTo(center);
    math.Point offset = E.offset;

    // now start listening for document movements so we don't need to stay on the circle
    var move = document.onMouseMove.listen((MouseEvent E) {
      // calculate new position
      var movement = E.movement;
      offset = new math.Point(
          // multiply with 0.5 to make the mouse move faster than the circle grows
          // that way we show that the mouse movement also works outside the circle element
          offset.x + movement.x * 0.5,
          offset.y + movement.y * 0.5
      );

      // calculate new distance from center
      var distance = offset.distanceTo(center);

      // calculate new radius for circle
      newR = distance / startDistance * startR;
      // resize circle
      circle.setAttribute('r', newR.toString());
    });

    // and stop all listening on mouseup
    var up = document.onMouseUp.listen(null);
    up.onData((MouseEvent E) {
      move.cancel();
      up.cancel();
      startR = newR;
    });

  });

}

希望这会有所帮助，
亲切的问候，
亨德里克·扬