在 d3 和 svg 中旋转后使用 path.getPointAtLength 获取点坐标答案

【问题标题】：get point coordination using path.getPointAtLength after rotation in d3 and svg在 d3 和 svg 中旋转后使用 path.getPointAtLength 获取点坐标
【发布时间】：2018-08-24 12:58:50
【问题描述】：

我想在旋转路径后得到一些点

我使用下面的代码来旋转路径

let path= svg.append("path")
.attr("class","offset control")
.attr("d", lineFunction(offsetLineData))

.style("stroke-width", 0.5)
.style("stroke", "red")
.style("fill", "none")
.attr("transform","rotate(90,"+p.x+","+p.y+")")
.attr('transform-origin',"center")

然后我想得到路径的终点和起点

path.node().getPointAtLength(0)

但它会返回不旋转的坐标旋转后如何获得点的 x 和 y

【问题讨论】：

标签： d3.js svg

【解决方案1】：

将 SVG 视为嵌套坐标系的树。每个元素都有自己的坐标，并通过如何重新计算它们的规则安装到其父元素中。这些规则可以是显式的transform 属性，也可以是width、height 和viewBox 的隐式组合（“将A 放入大小B”）。

transform 属性被认为是到父元素的链接。这意味着，如果您要求元素的几何属性，大多数时候您会在应用变换之前获得值。应用后会要求父坐标系中的几何值。

由于这种复杂性，有几个 SVG API 函数可以找出这些坐标系如何组合在一起。 getPointAtLength() 在应用transform 属性之前为您提供坐标。

var localPoint = path.node().getPointAtLength(0)

首先，您必须找出transform 属性的作用。这看起来有点复杂，部分原因是该属性可以动画并且可以包含函数列表，部分原因是API......嗯......：

// construct a neutral matrix
var localMatrix = path.node().viewportElement.createSVGMatrix()
var localTransformList = path.node().transform.baseVal
 // is there at least one entry?
if (localTransformList.length) {
    // consolidate multiple entries into one
    localMatrix = localTransformList.consolidate().matrix
}

然后您可以将找到的转换应用到该点

var transformedPoint = localPoint.matrixTransform(localMatrix)

有几个函数将返回一个SVGMatrix 来转换坐标系中的数据应用transform 属性（即在上述步骤之后）：

请求转换到最近的视口（大多数情况下是最近的父<svg>）元素：element.getCTM()
请求转换为屏幕像素：element.getScreenCTM()
要求转换为任意元素：element.getTransformToElement(...)

【讨论】：