小编Pau*_*ski的帖子

我正在尝试创建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: …