我正在尝试创建一个HTML5拼贴编辑器,在其中您可以以与Word中所见相似的方式编辑图像(在拖动边缘时裁剪图像而不是缩放它们,能够在自由变换区域内拖动/旋转/缩放图像(因此有一种占位符功能)等)。这意味着我们需要使用SVG和剪切/遮罩,并将自由变换元素的位置绑定到这些掩模/剪切。
整个生成的SVG后来应该可扩展到打印尺寸(但这不是问题所在)。
这个想法很简单:
- 使用已经制作好的jQuery Free Transform插件 - https://github.com/gthmb/jquery-free-transform
- 将其控件区域变换绑定到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(以便单独添加转换而不是复制整个矩阵),并在应用旋转之前将其重新定位到其原点,然后恢复其适当位置。
正如您所看到的,它有点好转(旋转掩模与FT位置更接近了),但仍然没有处于正确的位置:/
[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。 - Phrogzattr("transform", "translate(250, 0) rotate(45)")
! - rodrigogq