Как переместить svg-объект в новые координаты - PullRequest
Новая
       3

Как переместить svg-объект в новые координаты

0 голосов
/ 27 февраля 2020

снова вопрос к svg-объектам.

давайте представим, что у меня есть две строки, сгруппированные по g-tag: 

<g id="a29">
  <line class="hotwater graphic" x1="280" y1="50" x2="550" y2="50" id="g29"></line>
  <line class="hotwater graphic" x1="280" y1="70" x2="550" y2="70" id="g29"></line>
</g>

Я перемещаю эти строки, перетаскивая мышь и назначая преобразование в группу, поэтому я получаю следующее: 

<g id="a29" transform="translate(10 90)">
  <line class="hotwater graphic" x1="280" y1="50" x2="550" y2="50" id="g29"></line>
  <line class="hotwater graphic" x1="280" y1="70" x2="550" y2="70" id="g29"></line>
</g>

Теперь я хочу сохранить строки в базе данных, и для этого я хочу добавить перевод к точкам линий. Конечно, я могу менять точку за точкой, но что, если у меня есть ломаная линия или прямоугольник?

Нет ли способа исправить эти точки позиционирования за один шаг, независимо от типа svg? Возможно, d3 js предлагает такую ​​функцию?

Спасибо, Карстен

1 Ответ

0 голосов
/ 27 февраля 2020

Хорошо, теперь я сделал это "безобразно", я думаю: 

var svgGroup = d3.select(ObjectToSave);                     //The grouped Element
var transform = getTranslation(svgGroup.attr('transform')); //Transformation of the Group
var xOrigin = 0;
var yOrigin = 0;
var xDifference = 0;
var yDifference = 0;

if (transform != null && transform != "" && transform != "translate(0)" && Id != null) {
    xDifference = parseInt(transform[0]);
    yDifference = parseInt(transform[1]);
}

for (var i = 0; i < ObjectToSave.childNodes.length; i++) {
  var svgElement = d3.select(ObjectToSave.childNodes[i]);    //inner element

    //If the inner Element has a Transformation, also recognize it:
    if (svgElement.attr('transform')) {
        transform = getTranslation(d3.select(ObjectToSave.firstElementChild).attr('transform'));
        if (logLevel >= 12) console.log("Transform of Element: " + transform[0] + "/" + transform[1]);
        xOrigin = TryParseInt(transform[0]);
        yOrigin = TryParseInt(transform[1]);
    }

    var svgType = svgGroup.node().firstChild.tagName;
    switch (svgType.toLowerCase()) {
        case 'line':
            svgElement
                .attr('x1', (parseInt(svgElement.attr('x1')) + xOrigin + xDifference))
                .attr('y1', (parseInt(svgElement.attr('y1')) + yOrigin + yDifference))
                .attr('x2', (parseInt(svgElement.attr('x2')) + xOrigin + xDifference))
                .attr('y2', (parseInt(svgElement.attr('y2')) + yOrigin + yDifference))
                .attr('transform', null);
            break;
        case 'circle':
        case 'ellipse':
            svgElement
                .attr('cx', (parseInt(svgElement.attr('cx')) + xOrigin + xDifference))
                .attr('cy', (parseInt(svgElement.attr('cy')) + yOrigin + yDifference))
                .attr('transform', null);
            break;
        case 'rect':
            svgElement
                .attr('x', (parseInt(svgElement.attr('x')) + xOrigin + xDifference))
                .attr('y', (parseInt(svgElement.attr('y')) + yOrigin + yDifference))
                .attr('transform', null);
            break;
        case 'polyline':
        case 'polygon':
            var actPoints = svgElement.attr('points').split(",");
            for (var c = 0; c < actPoints.length; c+=2) {
                actPoints[c] = actPoints[c] - 0 + xOrigin + xDifference;
                actPoints[c+1] = actPoints[c+1] - 0 + yOrigin + yDifference;
            }
            svgElement.attr('points', actPoints)
            .attr('transform', null);
            break;
    }
    svgString += svgElement.node().outerHTML.replace(' xmlns="http://www.w3.org/2000/svg"', "");
}
//Now ready to save to database.

... возможно, есть лучший способ и, конечно, я должен проверить это, но на самом деле это работает.

...