Как программно соединить два svg с C #? - PullRequest
Новая
       31

Как программно соединить два svg с C #?

0 голосов
/ 27 июня 2019

Привет, я младший веб-разработчик с 5-месячным опытом, и я пытаюсь построить турнирные скобки, и мне нужно связать их с помощью линий или пути, мои тексты находятся внутри символа, который я генерирую с LINQ to XML. Проблема в том, что высота элемента будет изменена, и линии должны следовать за входными и выходными точками, в эти точки я помещаю ректы, но я не знаю их координаты, потому что я не знаю измененную высоту элемента. Я разделил начальные координаты Y ректов на начальную высоту элемента, чтобы получить проценты, но это не очень хорошее решение.

Я пытался с помощью метода jQuery .offset (), и это сработало, но босс сказал мне использовать C #. И мы используем dotnet core 2.2, и такого метода не существует.

Javascript 

function connectElements(svg, path, startElem, endElem) {
    var svgContainer = $("#svgContainer");

    // if first element is lower than the second, swap!
    if (startElem.offset().top > endElem.offset().top) {
        var temp = startElem;
        startElem = endElem;
        endElem = temp;
    }

    // get (top, left) corner coordinates of the svg container   
    var svgTop = svgContainer.offset().top;
    var svgLeft = svgContainer.offset().left;

    // get (top, left) coordinates for the two elements
    var startCoord = startElem.offset();
    var endCoord = endElem.offset();

    // calculate path's start (x,y)  coords
    // we want the x coordinate to visually result in the element's mid point
    var startX = startCoord.left + 0.5 * startElem.outerWidth() - svgLeft;    // x = left offset + 0.5*width - svg's left offset
    var startY = startCoord.top + startElem.outerHeight() - svgTop;        // y = top offset + height - svg's top offset

    // calculate path's end (x,y) coords
    var endX = endCoord.left + 0.5 * endElem.outerWidth() - svgLeft;
    var endY = endCoord.top - svgTop;

    // call function for drawing the path
    drawPath(svg, path, startX, startY, endX, endY);

}

C # 

public BracketLayout Layout(BracketGeneratorOptions opts){
float bracketOutput = 43f / 70f;
float bracketInput1 = 30f / 70f;
float bracketInput2 = 54f / 70f;

var l = new Line
       {
       StartX = p.X + opts.ElementWidth,
       StartY = p.Y + (int)(bracketOutput * opts.ElementHeight),
       EndX = p.X + opts.ElementWidth + (opts.RoundSpacing),                        
       EndY = i % 2 == 0 ? p.Y + (int)(roundOffset * (r + 1)) + (int)(bracketInput1 * opts.ElementHeight) : p.Y - spacing + (int)(roundOffset * (r + 1)) + (int)(bracketInput2 * opts.ElementHeight)
};
lines.Add(l);
}

public string Serialize(IEnumerable<BracketMatchViewModel> model, BracketLayout layout)
{
var svgDoc = XDocument.Parse(this.Template);
var defs = svgDoc.Root.Descendants().SingleOrDefault(x => x.Name.LocalName == "defs");

var bracketLines = layout.LinePath.Select(l => new XElement("line", new XAttribute("x1", l.StartX),
  new XAttribute("y1", l.StartY), new XAttribute("x2", l.EndX),
  new XAttribute("y2", l.EndY),
  new XAttribute("stroke", "white"), new XAttribute("stroke-width", "1px"))
  ).ToList();

defs.AddAfterSelf(bracketLines);
}
...