使用 snap.svg 仅从转换中提取翻译数据

Question

我正在制作一个 "geometric transformation" 页面，专供教师使用。我正在使用 Snap.svg.

我的问题与多边形点的命名有关。我想为多边形的每个点添加一个名称（A、B、C、...）。问题来自命名 'image' 多边形，通过转换找到。

如果是简单的翻译，那就没问题了。但是一旦它旋转、缩放或对称，它也会 turns/scales 字母。

工作页面（法语，抱歉）：http://dev.scolcours.ch/_dev/svg_dev_3.php

基本上，为了创建多边形和图像，我使用了类似于：

p = s.polygon(points);
img = p.clone();
img.transform(t);

有没有办法获取克隆和转换后的 img 多边形的绝对坐标，以便我可以手动放置所有点字母？

我已经尝试过的：

在点上应用从多边形到图像的相同转换（字符串）（这是上面链接页面的版本）。
改用矩阵并提取 dx 和 dy 值（使用 matrix.split() ）。但它也不起作用。对于旋转，点不遵循多边形图像。我正在使用这个：

字符串版本：

var t = 'r50,60,80';

矩阵版本：

var m = new Snap.Matrix();
m.rotate(50,60,80);
// Then to extract the translation
var mXY = m.split();
var t = 't'+mXY.dx+' '+mXY.dy;

然后我有这样的事情：

希望您能理解并帮助我找到解决方案（无需手动计算所有点 - 这是我最后的解决方案）。

正如 Ian 所建议的，这是一个只有旋转的 jsFiddle：http://jsfiddle.net/ap1ay4m5/1/

罗勒

Answer 1

globalMatrix 将为我们提供元素的完整矩阵。

矩阵方法 matrix.x() 和 matrix.y() 将为我们提供 x,y 分量。

所以我们可以遍历这些点并获取新值以定位...

var ptsarray = [];
var pts = img.attr('points')

var m = img.transform().globalMatrix;

for( var c = 0; c < pts.length ; c += 2 ) {     
  img_pts.push(this.text(m.x( pts[c], pts[c+1] ), m.y( pts[c], pts[c+1] ) , nums[c/2].attr('text')).addClass('img_nom'));

}

jsfiddle

使用 snap.svg 仅从转换中提取翻译数据

Extract translation data only from a transformation using snap.svg

svg

snap.svg