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

Question

我正在尝试创建 html5 拼贴编辑器，您可以在其中以类似于在 Word 中看到的方式编辑图像(在拖动边缘时裁剪图像而不是缩放图像，能够在自由变换中拖动/旋转/缩放图像区域(占位符功能)等)。这意味着我们需要使用 SVG 和剪辑/蒙版，并将自由变换元素的位置绑定(bind)到这些蒙版/剪辑。 整个生成的 SVG 稍后应该可以针对打印尺寸进行缩放(但这不是这里的问题)。

这个想法很简单——

1. 使用已经制作好的 jQuery Free Transform 插件 - https://github.com/gthmb/jquery-free-transform
2. 绑定(bind)它的控件 区域转换为 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(为了单独添加转换而不是复制整个 Matrix )，在应用旋转之前我已经将它重新定位到它的原点，然后恢复它的适当的位置。

Fiddle

如您所见，它稍微好一点(旋转 mask 在某种程度上更接近 FT 位置)，但仍然 - 它不在正确的位置:/

Answer 1

我不得不开发与您类似的应用程序，我发现这个库解决了在 Canvas 上操作对象的大部分问题，例如光栅图像、svg、形状、文本等...包括拖放、旋转、缩放、分层等...

http://fabricjs.com/

希望对您有所帮助!