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

Question

这是我遇到的一个问题：

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/