resize SVG Element: лучшая практика с несколькими элементами

Question

Какова наилучшая практика для изменения размера, например, эллипса или прямоугольника на другом элементе SVG?

Если я проверил событие onMouseMove на эллипсе, когда я вышел из него, изменение размера прекратится. Я думал, чтобы реализовать слушателя на элементе svg, а также передать информацию в эллипс, на котором я начал изменять размер. Это означает наличие общего метода Resize() на элементе svg, который переходит к Resize() выбранного эллипса.

Нет ли более простого способа?

В настоящее время я делаю это с Dart, но он должен быть таким же с javascript.

Примером является элемент <svg> с <g>, содержащий <rect> и <ellipse>. Если я начну изменять размер прямоугольника на прямоугольнике.onMouseMove, то, как только я окажусь вне его, он перестанет изменять размер. Чтобы этого избежать, я должен использовать svg.onMouseMove и использовать метод изменения размера, который изменяет размер прямоугольника. Чтобы знать, что это прямоугольник, который нужно изменить, я проверяю onMouseDown и снова проверяю цель (MouseEvent.target на Dart. Не уверен, как определить, что я касаюсь, не выполняя громоздкую проверку на id, возможно). Обратите внимание, что я пытаюсь использовать прямоугольник для изменения размера эллипса. Я показываю прямоугольник только при изменении размера.

Answer 1

Следующий код создаст круг и изменит размер, когда вы начнете перетаскивать.
Он также работает, когда мышь выходит за пределы круга.
Возможно, вы можете изменить это по своему усмотрению.

О, и мой Дарт-код может быть не лучшим, поскольку я только недавно начал изучать Дарт.
Любые улучшения приветствуются.

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; 
    }); 

    }); 

} 

Надеется, что это помогает,
С наилучшими пожеланиями,
Хендриком Ян