Question

我在同一组中有三个形状。这个小组已经改变了。我想从该组中的一个元素中画一条线。我试图通过以下方式访问此元素坐标：

s.select("#hitboxHeel").getBBox().cx and s.select("#hitboxHeel").getBBox().cy

然而，这给出了一些奇怪的坐标，远离它们应该的位置。如何获得点的实际位置，从而能够绘制线？

Answer 1

我遇到了类似的问题，并从此帖中找到了解决方案：Rectangle coordinates after transform

在这里，您基本上想要将形状的“聚合”变换矩阵应用于未转换的坐标（对于笨拙的措辞而言，不好意思）。此矩阵还包含父元素的转换（此处为组节点），因此您不必担心它们。所以，给定：

您的原生 svg元素节点
您的原生 svg容器 svg
您想要转换的原始兴趣点坐标（变换前） x 和 y
原始点 transformedPoint

`

// get the component transform matrix
var ctm = node.getCTM();
var svgPoint = svg.createSVGPoint(); 
svgPoint.x = x;
svgPoint.y = y;
// apply the matrix to the point
var transformedPoint = svgPoint.matrixTransform(ctm); 



// an example using d3.js ( svg > g > rect )
// get the center of the rectangle after tansformations occured
var svg = d3.select('body').append('svg')
    .attr('width', 500)
    .attr('height', 500)
    .attr('id', 'myCanvas')
    .style('margin', 100)
var g = svg.append('g')
    .attr('transform', 'translate(-10,10)')
var r = g.append('rect')
    .attr('x', 300).attr('y', 100).attr('width', 79).attr('height', 150)
    .attr('transform', 'translate(-54,300)rotate(-30,30,20)')
    .attr('stroke', 'black')
    .attr('fill', 'red')
var pt = svg.node().createSVGPoint()
pt.x = parseInt(r.attr('x')) + parseInt(r.attr('width')) / 2
pt.y = parseInt(r.attr('y')) + parseInt(r.attr('height')) / 2
var ctm = r.node().getCTM()
var center = pt.matrixTransform(ctm)
console.log('the transformed rectangle center', center)

// draw the center to confirm the accuracy of the process    
svg.append('circle') 
    .attr('cx', center.x).attr('cy', center.y).attr('r', 5)
    .attr('stroke', 'black')
    .attr('fill', 'blue')

`

如何使用snap.svg从转换组中其他元素的中心绘制svg线？

1 个答案: