Question

调整大小的最佳做法是在另一个SVG元素上使用Ellipse或Rectangle吗？

当我离开时，如果我在椭圆上检查onMouseMove事件，则调整大小停止。我正在考虑在svg元素上实现监听器，并将信息传递给我开始调整大小的椭圆。这意味着在Resize()元素上使用通用svg方法，该方法将传递到所选椭圆的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;
    });

  });

}

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

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

1 个答案: