Question

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

这个想法很简单 -

使用已经制作的jQuery Free Transform插件 - https://github.com/gthmb/jquery-free-transform
绑定它的对手面积转换为SVG蒙版

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

这是一个小提琴，只是尝试旋转元素，你会看到问题所在：

Fiddle （已经制作了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（2014年10月8日）

根据Phorgz发表评论的建议，我已经用SVGJS库重新创建了SVG（为了单独添加转换而不是复制整个Matrix），在应用轮换之前我已经将它重新定位到它上面了＃39 ; s orgin，然后恢复它的正确位置。

Fiddle

正如你所看到的那样好一点（旋转的面具在某种程度上更接近FT的位置），但仍然 - 它不在适当的位置：/

Answer 1

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

http://fabricjs.com/

希望它有所帮助！

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

编辑1（2014年10月8日）

1 个答案: