拉斐尔变换 - 缩放然后旋转，倾斜效果

Question

这是我遇到的一个问题的 jsfiddle：

http://jsfiddle.net/Tw4Qh/1/

鉴于此 html：

<div id="box"></div>

还有这个js（都在jsfiddle中演示过）：

var paper = Raphael('box', 300, 300);
var center = { x:150, y:150 }, size = { x:10, y:10 };
var look = { stroke:'#000000', 'stroke-width':1,
    fill:'#888888', opacity:1, 'stroke-opacity':0.9,
    'fill-opacity': 0.7, 'stroke-dasharray': '- '
};
var path = paper.path('').attr(look);

function reset() {
    // reset to small square
    path.attr({ path:[
        [ 'M', center.x - size.x, center.y - size.y ],
        [ 'L', center.x + size.x, center.y - size.y ],
        [ 'L', center.x + size.x, center.y + size.y ],
        [ 'L', center.x - size.x, center.y + size.y ],
        [ 'z' ]
    ] }).transform([]);
    console.log(path._.transform);
}

function add_state_one() {
    // move down and left slightly and scale up
    path.transform(path._.transform.concat([
        [ 'T', -50, 10 ],
        [ 'S', 2.5, 7.5 ]
    ]));
    console.log(path._.transform);
}

function add_state_two() {
    // use bounding box center
    var bb = path.getBBox(),
        center = { x:(bb.x + bb.x2)/2, y:(bb.y + bb.y2)/2 };
    path.transform(path._.transform.concat([
        [ 'R', 30, center.x, center.y ],
        [ 'S', 0.8, 0.7, center.x, center.y ]
    ]));
    console.log(path._.transform);
}

function add_state_three() {
    // use original center
    path.transform(path._.transform.concat([
        [ 'R', 45, center.x, center.y ],
        [ 'S', 0.7, 0.5, center.x, center.y ]
    ]));
    console.log(path._.transform);
}

// buttons
var blook = { 'stroke-dasharray':'', stroke:'transparent' };
var btn = {
    rst:paper.path([ [ 'M', 0, 0 ], [ 'L', 10, 0 ],
               [ 'L', 10, 10 ], [ 'L', 0, 10 ], [ 'z' ] ])
        .attr(look).attr(blook).click(reset),
    st1:paper.path([ [ 'M', 20, 0 ], [ 'L', 30, 0 ],
            [ 'L', 30, 10 ], [ 'L', 20, 10 ], [ 'z' ] ])
        .attr(look).attr(blook).attr({ fill:'#0000ff' })
        .click(add_state_one),
    st2:paper.path([ [ 'M', 40, 0 ], [ 'L', 50, 0 ],
            [ 'L', 50, 10 ], [ 'L', 40, 10 ], [ 'z' ] ])
        .attr(look).attr(blook).attr({ fill:'#ff0000' })
        .click(add_state_two),
    st3:paper.path([ [ 'M', 60, 0 ], [ 'L', 70, 0 ],
            [ 'L', 70, 10 ], [ 'L', 60, 10 ], [ 'z' ] ])
        .attr(look).attr(blook).attr({ fill:'#00ff00' })
        .click(add_state_three)
};

// click grey
reset();

基本上我需要应用比例，然后应用旋转，旋转不受比例影响。

想象你有一个正方形。现在您对其应用比例，使其成为一个高矩形。现在你想旋转这个生成的矩形，使它保持一个矩形，有直角，但呈 45 度角。我们正在尝试实现一个矩形，它在一个角上保持平衡，倾斜 45 度角。相反，如 jsfiddle 中所示，当我应用缩放（生成矩形），然后旋转（将其倾斜到角落）时，我会以倾斜的矩形（或看起来怪异的菱形）结束。

我相信有些机构知道如何做到这一点。最终，我计划从多个原点添加多个不同的变换（平移、旋转和缩放），但我不希望这种倾斜效应发生。只是想弄清楚这一点。任何帮助表示赞赏。

谢谢

Answer 1

我遇到了同样的问题，经过一段时间试图找到它的确切来源，我发现了不规则刻度的原因。每当您的 x 和 y 轴缩放不同时，就会发生这种情况。

我为解决这个问题所做的是在旋转之前撤消不规则缩放，然后重做。要撤消它，您应该按原始比例的倒数重新缩放它。在您的示例中，要使状态 2 正常工作，您可以这样做：

function add_state_two() {
    // use bounding box center
    var bb = path.getBBox(),
        center = { x:(bb.x + bb.x2)/2, y:(bb.y + bb.y2)/2 };
    path.transform(path._.transform.concat([
        [ 'S', 1/2.5, 1/7.5, center.x, center.y ],
        [ 'R', 30, center.x, center.y ],
        [ 'S', 2.5*0.8, 7.5*0.7, center.x, center.y ]
    ]));
    console.log(path._.transform);
}

首先我让它回到原来的 1:1 比例。然后旋转它，然后重新缩放它。请注意，我将第二个刻度上的原始值乘以新值，因此您没有两个单独的刻度。应该可以的。

http://jsfiddle.net/Tw4Qh/2/