Javascript 拉斐尔变换问题

我需要一点帮助。我有一张图片，使用Shamasis Bhattacharya的clonetopper函数从答案到，我在另一张纸上创建了一张预览图片。 现在我用一条线变换预览图像，如.transformt120,12s0.43,0.43,0,0。。。；。它工作得很好，除了一个问题：当我在原始集合中有一个旋转的元素时，旋转会导致变换倾斜。我尝试了一些变换字符串的变体，尝试通过手动设置x和y来分别进行转换，修补矩阵的反转等等

据我所知，这是因为拉斐尔有一种奇怪的方法，将原始的x和y以及元素的矩阵分开

谁能告诉我这里出了什么问题？我在拉斐尔元素的旋转方面遇到了很多麻烦，有没有可靠的方法来确保变换和旋转不会像那样碰撞

编辑某些代码：

function setTextDrag(element, paper, param){                
var ox=0;
var oy=0;
var para = param;
var BBox = element.getBBox();

var start = function () {
    var inv = element.matrix.invert();
    var BBox = element.getBBox();
    ox = element.attr("x");
    oy = element.attr("y");
    //console.log(element.attr('x')+"vs"+element.matrix.x(element.attr("x"), element.attr("y")));
},
move = function (dx, dy) {
    var inv = element.matrix.invert();
    var newx = ox + dx;
    var newy = oy + dy;
    var BBox = element.getBBox();

    if ((newx-((BBox.width/2)+param.glue))<0) {newx = BBox.width/2+param.glue;}
    if ((newx+((BBox.width/2)+param.border))>paper.width) {newx = paper.width-((BBox.width/2)+param.border);}
    if ((newy-((BBox.height/2)+param.border))<0) {newy = BBox.height/2+param.border;}
    if (param.adborder)
    {
        if ((newy+((BBox.height/2)+param.adborder))>paper.height) {newy = paper.height-((BBox.height/2)+param.adborder);}
    }
    else
    {
        if ((newy+((BBox.height/2)+param.border))>paper.height) {newy = paper.height-((BBox.height/2)+param.border);}
    }
    if ((param.nodrag)&&((newy+((BBox.height/2)+param.nodrag))>paper.height)) 
    {
        if ((newx+((BBox.width/2)+param.nodragx))>paper.width)
        {
            newx = paper.width-((BBox.width/2)+param.nodragx);
        }
    }
    {
        element.attr({x: inv.x(newx,newy), y: inv.y(newx,newy)});
        //element.transform("T"+newx+","+newy);
    }
    //element.attr({x: newx, y: newy});
    //console.log("el:"+element.matrix+" x:"+element.attr("x")+" y:"+element.attr("y"));
}, 
end = function () {
    var inv = element.matrix.invert();
    var BBox = element.getBBox();
    if ((param.noStickEnd)&&(param.noStickStart))
    {
        if((BBox.y2>param.noStickStart) && (BBox.y<param.noStickEnd))
        {
            if (oy < param.noStickStart) {var newy = param.noStickStart - BBox.height/2;}
            if (oy > param.noStickEnd) {var newy = param.noStickEnd + BBox.height/2;}

            element.attr({x: ox, y: newy});
        }
    }
    refreshSelections();
};      
paper.set(element).drag(move, start, end);      
}


function setTextRot(element, paper, rotation, param) {
var current = param.curr;//.split().rotate;
element.transform("r"+rotation);
var BBox = element.getBBox();
var adborder = param.border;
if (param.adboard) {adborder=param.adborder;}
if (((BBox.x-param.glue < 0)||(BBox.y-param.border < 0)||(BBox.x2+param.border > paper.widht)||(BBox.y2+param.adborder > paper.height))||
    ((param.noStickStart)&&(param.noStickEnd)&&(BBox.y2>param.noStickStart)&&(BBox.y<param.noStickEnd)))
{
    element.transform("r"+current);
}
if (param.nodrag&&param.nodragx&&((BBox.y2+param.nodrag > paper.height)&&(BBox.x2+param.nodragx > paper.width)))
{
    element.transform("r"+current);
}
refreshSelections();
}

这两个事件设置为移动和旋转给定纸张上的文本元素，即原始SVG。这些参数设置了一些不允许文本进入的边界。看起来有点凌乱，因为一开始就有很多实验来让事情顺利进行

function moveBmSVG() {
var st = bm_paper.set();
st.push(bm_img);
var list = $$(document.getElementsByClassName('bm_text_input'));
var listCount = list.length;    
for( var i = 0; i < listCount; i++) 
{
    if (!bm_text[i].data("deleted")) {st.push(bm_text[i]);}
}
var moved = st.cloneToPaper(act_paper);
/*moved.forEach(function(elem) {
    var x = elem.attr("x");
    var y = elem.attr("y");
    var inv = elem.matrix.invert();

    x = 540;
    y = 44;

    x = inv.x(x,y);
    y = inv.y(x,y);

    elem.transform("..."+"s0.43,0.43,0,0t"+x+","+y);
});*/
moved.transform("s0.43,0.43,0,0t540,44...");
}

---

这一个是将整个集合克隆到预览纸上，调整大小并放置在特定位置。

大写字母“S”和“T”是绝对变换。听起来这就是你想要的。谢谢，但遗憾的是，在这种情况下，大写或小写似乎没有什么区别。有可能在小提琴上弹出这个例子吗？我认为我无法在任何合理的时间内管理一把工作小提琴。不过，我在我的问题中加入了代码的要点。也许这能让我更好地了解我的想法。