Question

我需要一些帮助。我有一个图像，并使用Shamasis Bhattacharya的cloneToPaper函数从this question的答案，我在另一张纸上创建一个预览图像。现在我使用.transform("t120,12s0.43,0.43,0,0...");之类的一行来转换我的预览图像。除了一个问题外，它的效果很好：当我在原始集中有一个旋转元素时，该旋转会导致变换偏斜。我尝试了变换字符串的一些变体，尝试通过手动设置x和y单独进行转换，修改矩阵等等。

据我了解，这是因为拉斐尔有一种奇怪的方法可以保持原始的x和y以及元素的矩阵分离或者什么。

有人能给我一个暗示这里出了什么问题吗？我对Raphael元素的旋转有很多麻烦，是否有一种可靠的方法来确保变换和旋转不会像那样发生碰撞？

编辑某些代码：

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...");
}

这个是将整套装置克隆到预览纸上，调整大小并在特定位置。

拉斐尔转型问题

0 个答案: