Question

我正在使用SVG路径在两个Angular Material树组件之间绘制连接线。我有一个问题，因为当我展开树节点时，路径会向上或向下移动，但我希望它保持在同一位置。当我折叠树节点时，我想将路径从子节点移动到父节点。

我尝试进行转换：转换或矩阵转换，但是我不知道如何计算值。

我应该使用转换还是编辑路径的“ d”属性？

这是我创建svg的方法：

createSVG() {
  let svgContainer = document.getElementById('svg-main-container');
  this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");                                                    
  this.svg.setAttribute('id', 'svg-canvas');
  this.svg.setAttribute('style', `position:absolute;left:0;top:0;display:inline-block;height:100%;width:100%`);
  this.svg.setAttribute('viewBox', '0 0 100 100');
  this.svg.setAttribute("preserveAspectRatio", "none");
  this.svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
  svgContainer.appendChild(this.svg);
  this.svgService.svg = this.svg;
  return this.svg;
}

这是我绘制连接路径的方式：

drawConnector(a,b){
  let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  let d = `M${a.x_left},${a.y_left} C50,${a.y_left} 50 ${b.y_right} ${b.x_right} ${b.y_right}`;
  path.setAttributeNS(null, "d", d);
  path.setAttributeNS(null, "fill", "none");
  path.setAttributeNS(null, "stroke", "#555");
  path.setAttributeNS(null, "stroke-width", "1.5px");
  path.setAttributeNS(null, "vector-effect", "non-scaling-stroke");
  path.setAttribute("id", this.svgService.draggedElementId);
  path.setAttribute("class", this.svgService.draggedElementId);
  this.svgService.svg.appendChild(path);
}

我如何连接元素：

connectDivs(leftId, rightId, color, tension) {

  leftId = this.svgService.draggedElementId
  rightId = this.svgService.droppedElementId

  this.svgService.connections.push({leftId,rightId});

  let svgContainer = document.getElementById('svg-component');
  let mainBox = svgContainer.getBoundingClientRect();

  let points = [];

  //left element
  let left = document.getElementById(leftId);
  let leftPosition = left.getBoundingClientRect()
  let x_left = this.mapCoordinates(leftPosition.left - mainBox.left + leftPosition.width/2, mainBox.left, mainBox.left + mainBox.width, 0, 100);
  let y_left = this.mapCoordinates(leftPosition.top - mainBox.top + leftPosition.height/2, mainBox.top, mainBox.top + mainBox.height, 0, 100);

  points.push({x_left, y_left});

  //right element
  let right = document.getElementById(rightId);
  let rightPosition = right.getBoundingClientRect()
  let x_right = this.mapCoordinates(rightPosition.left - mainBox.left + rightPosition.width/2, mainBox.left, mainBox.left + mainBox.width, 0, 100);
  let y_right = this.mapCoordinates(rightPosition.top - mainBox.top + rightPosition.height/2, mainBox.top, mainBox.top + mainBox.height, 0, 100);
  points.push({x_right, y_right});

  this.drawConnector(points[0], points[1]);
}

以及当树展开时我如何尝试转换路径：

expandLines(node){
  let nodeElement = document.getElementById(node.id);
  let svgContainer = document.getElementById('svg-main-container');
  let svgBox = svgContainer.getBoundingClientRect();
  let nodePosition = nodeElement.getBoundingClientRect() //position of collapsed/expanded tree element
  let x_node = this.mapCoordinates(nodePosition.left - svgBox.left + nodePosition.width/2, svgBox.left, svgBox.left + svgBox.width, 0, 100);
  let y_node = this.mapCoordinates(nodePosition.top - svgBox.top + nodePosition.height/2, svgBox.top, svgBox.top + svgBox.height, 0, 100);

  let svgCanvas = document.getElementById('svg-canvas');
  let svgCanvasBox = svgCanvas.getBoundingClientRect();
  let path = svgCanvas.getElementsByClassName(node.id)[0];
  let pathPosition = path.getBoundingClientRect();
  let x_path = this.mapCoordinates(pathPosition.left - svgCanvasBox.left + pathPosition.width/2, svgCanvasBox.left, svgCanvasBox.left + svgCanvasBox.width, 0, 100);
  let y_path = this.mapCoordinates(pathPosition.top - svgCanvasBox.top + pathPosition.height/2, svgCanvasBox.top, svgCanvasBox.top + svgCanvasBox.height, 0, 100);

  let trans_x = x_path + x_node;
  let trans_y = y_path - y_node;

  //path.setAttribute('transform',`translate(${trans_x}, ${trans_y})`);
  path.setAttribute('transform', `matrix(1,0,0,1,${trans_x},${trans_y})`);
}

mapCoordinates(n, a, b, _a, _b){
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

我所拥有的图像：

restores are what matters

How my tree with path look like

Answer 1

您正在将viewBox属性和preserveAspectRatio="none"组合在一起。这样的效果是，<svg>元素始终设置为填充包含元素的高度，如果容器的大小发生变化，它会不断重新缩放SVG内部所有坐标的含义。

通常建议添加一个viewBox，在特殊情况下，忽略这两个属性实际上会有所帮助。 <svg>元素本身的坐标系（“初始视口”）和其内容的坐标系（“初始用户坐标系”）是两个different entities：

每个SVG视口都会生成一个视口坐标系和一个用户坐标系，最初是相同的。在视口的元素上提供viewBox可以相对于视口坐标系转换用户坐标系...

只有在没有viewBox属性的情况下，即使<svg>元素的大小改变，两个坐标系也会重合。

当您拥有与SVG之外的内容相关的坐标时，例如a, b参数，如果它们之间没有坐标转换，则只有当树的大小发生变化时，它们才有机会保持有意义。

您的代码手动进行了一些坐标转换，以从屏幕视口坐标转换为假定的100 * 100 viewBox。删除所有。您需要的是连接的项目到<svg>元素的相对垂直位置。从水平方向看，您只会走到<svg>的侧面：

connectDivs(leftId, rightId, color, tension) {

  leftId = this.svgService.draggedElementId
  rightId = this.svgService.droppedElementId

  this.svgService.connections.push({leftId,rightId});

  let svgContainer = document.getElementById('svg-component');
  let mainBox = svgContainer.getBoundingClientRect();

  let points = [];

  //left element
  let left = document.getElementById(leftId);
  let leftPosition = left.getBoundingClientRect();
  // you always want the left side of the <svg> element
  let x_left = 0;
  let y_left = leftPosition.top - mainBox.top + leftPosition.height/2;

  points.push({x_left, y_left});

  //right element
  let right = document.getElementById(rightId);
  let rightPosition = right.getBoundingClientRect();
  // the right side of the <svg> element
  let x_right = mainBox.width;
  let y_right = rightPosition.top - mainBox.top + rightPosition.height/2;

  this.drawConnector(points[0], points[1]);
}

如何转换SVG路径

1 个答案: