SVG的免费转换插件 - 创建占位符元素

Question

我正在尝试创建html5拼贴编辑器,您可以在其中编辑图像,类似于您在Word中看到的图像(裁剪图像而不是在拖动边缘时缩放图像,能够在自由变换区域内拖动/旋转/缩放图像(所以一种占位符功能)等).这意味着我们需要使用SVG和剪切/屏蔽,以及自由变换元素与那些掩码/剪辑的绑定位置.之后生成的整个SVG应该可以根据打印尺寸进行扩展(但这不是问题).

这个想法很简单 -

1. 使用已经制作的jQuery Free Transform插件 - https://github.com/gthmb/jquery-free-transform
2. 将它的控制区域转换绑定到SVG掩码

问题:即使转换后的SVG蒙版具有FT div的转换和位置的精确副本,当转换包含旋转时,它也会很奇怪.看起来像变换 - 原点不起作用,旋转和缩放以某种方式连接到左上角而不是中心,不知道为什么:/

这是一个小提琴,只是尝试旋转元素,你会看到问题是什么:

小提琴 (已经制作的svg的简化代码)

主要部分:

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(08/10/2014)

根据Phorgz评论给出的建议,我用SVGJS库重新创建了SVG(为了单独添加转换而不是复制整个Matrix),在应用旋转之前,我将它重新定位到它的orgin,然后恢复它的正确位置.

小提琴

正如你所看到的那样好一点(旋转掩模在某种程度上更接近FT位置),但仍然 - 它不在适当的位置:/

Answer 1

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

http://fabricjs.com/

希望能帮助到你！