SVG的自由变换插件 - 创建占位符元素

Question

我正在尝试创建一个HTML5拼贴编辑器，在其中您可以以与Word中所见相似的方式编辑图像（在拖动边缘时裁剪图像而不是缩放它们，能够在自由变换区域内拖动/旋转/缩放图像（因此有一种占位符功能）等）。这意味着我们需要使用SVG和剪切/遮罩，并将自由变换元素的位置绑定到这些掩模/剪切。

整个生成的SVG后来应该可扩展到打印尺寸（但这不是问题所在）。

这个想法很简单：

1. 使用已经制作好的jQuery Free Transform插件 - https://github.com/gthmb/jquery-free-transform
2. 将其控件区域变换绑定到SVG遮罩中

问题是：

即使变形的SVG遮罩具有FT div的变换和位置的精确副本，当变换包含旋转时，它的行为也很奇怪。似乎变换-原点不起作用，旋转和缩放与左上角连接在一起，而不是中心，不知道为什么：/

这里有一个fiddle，请尝试旋转元素，您将看到问题所在：

Fiddle （带有已制作的SVG的简化代码）

主要的js部分：

var refreshSVGMask = function(){

//get element transform
var elTransform = $('#ft').css("transform");

//quick parse of matrix transform:
var elMatrix = elTransform.substring(elTransform.indexOf("matrix") + 7, elTransform.indexOf(")"));

//modify matrix, to apply last two values (top and left position), which in jquery free transform are in "top" and "left" css attributes. Note - I've also tried applying same matrix, but changing "x" and "y" attributes in SVG (like: .attr("x", elTop)) -> got exactly same results. 
var elTop = parseInt($("#ft").position().top);
var elLeft = parseInt($("#ft").position().left);
var matrixChanged = elMatrix.substring(0, elMatrix.length-6) + ", " + elLeft + ", " + elTop;

//apply matrix to SVG element:
$("#SvgjsRect1008").attr("transform", "matrix("+matrixChanged+")")
.attr("transform-origin", "50%,50%"); // also - put transform origin, but it does not seem to work

};

有人知道如何修复这个问题吗？我在这上面开始变得有些疯狂了 :(

编辑1（2014年8月10日）

根据Phorgz的评论建议，我使用SVGJS库重新创建了SVG（以便单独添加转换而不是复制整个矩阵），并在应用旋转之前将其重新定位到其原点，然后恢复其适当位置。

Fiddle

正如您所看到的，它有点好转（旋转掩模与FT位置更接近了），但仍然没有处于正确的位置：/

- Paul Walczewski

---

你的Fiddle在Safari中无法工作：[Error] TypeError: null is not an object (evaluating 'elTransform.substring'); refreshSVGMask (show, line 72); (anonymous function) (show, line 91)…。在分析你的代码之前，我建议你需要进行“负”转换，将旋转中心放置在原点，然后旋转，最后再将其转回到所需位置。这里有一个类似的示例，使用HTML5画布变换（但原理相同）：http://phrogz.net/tmp/canvas_gauge.html。请参见此处的讨论：https://dev59.com/aG445IYBdhLWcg3w5OEH#4650102。 - Phrogz

你听说过D3.js（数据驱动文档）吗？它应该很容易选择你的SVG元素并快速轻松地更改attr("transform", "translate(250, 0) rotate(45)")！ - rodrigogq

Answer 1

我曾经需要开发类似于你的应用程序，发现这个库解决了大部分在画布上操作对象（如光栅图像、svg、形状、文本等）的问题，包括拖放、旋转、缩放、分层等...

http://fabricjs.com/

希望它有所帮助！

- Radomír Laučík