仅使用snap.svg

Question

我正在制作一个“几何变换”页面，旨在用于教师。我正在使用Snap.svg。

我的问题涉及多边形点的命名。我想为多边形的每个点添加一个名称（A，B，C，...）。问题在于命名通过转换找到的“图像”多边形。

如果这是一个简单的翻译，那么这不是问题。 但是一旦它旋转，缩放或具有对称性，它也会转动/缩放字母。

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

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

的东西

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

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

我已经尝试过：

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

字符串版本：

var t = 'r50,60,80';

Matrix版本：

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