Question

我正在尝试在鼠标悬停时缩放SVG路径但是因为我必须转换路径，因为我将它们添加到纸张中会导致结果混乱。

请参阅： http://jsfiddle.net/chrisloughnane/Kc4q2/

使用此转换属性添加路径：

transform: 'S2.5,2.5,0,0'

并在mouse in上我动画： this.animate({transform: 's2.9,2.9,0,0'}, 200);

和mouse out我恢复时： this.animate({transform: 's2.5,2.5,0,0' }, 400, "bounce");

在这里检查后，我发现有人提到element.getBBox()，我试过这个，但我搞砸了。

var center = this.getBBox();
var adjustx = center.width / 2 ;//+ center.x;
var adjusty = center.height / 2 ;//+ center.y;
adjustx = (1 - 3)*adjustx;
adjusty = (1 - 3)*adjusty;

有人能指出我缺少的东西吗？

或者推荐一个好的工具来将SVG路径调整为新的默认值。我尝试过inkscape和http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

TIA

Answer 1

处理转型是拉斐尔最不喜欢的部分。我可能在这里错过了一个明显的解决方案，但这是我如何修复它：

在原始变换之前获取边界框，此时绘制的形状与路径指定的完全相同。
计算鼠标悬停前后形状中心之间的dx和dy差异。如果bbox是原始的预缩放边界框，那么对于dx，这将是2.5 *（bbox.x + bbox.width / 2） - 2.9（bbox.x + bbox.width / 2）。这显然可以减少。
将放大的形状向后翻转这些数量。

在代码中：

    var obj = paper.path(paths[county].path);
    obj.bbox = obj.getBBox();
    obj.attr({ transform: 'S2.5,2.5,0,0' });

    obj.mouseover(function (e) {
        var dx = -0.4 * (this.bbox.x + this.bbox.width / 2);
        var dy = -0.4 * (this.bbox.y + this.bbox.height / 2);
        this.animate({ transform: 'S2.9,2.9,0,0T' + dx + ',' + dy}, 200);
    }).mouseout(function (e) {
        this.animate({ transform: 's2.5,2.5,0,0' }, 400, "bounce");
    });

这是一个updated fiddle for you。作为参考，我有它绘制红色和蓝色矩形代表鼠标悬停前后边界框 - 我转换给消化不良时使用的策略。你自然会想要删除它们。

要记住的另一件事：不规则形状的实际中心是center of mass，而不是其边界框的中点。（如果它是一个完全对称的形状，这两个点只是相同的，地理边界很少创造。）对于像阿拉斯加州这样的形状，角落里有许多岛屿，这可能会使基于中心的缩放看起来很尴尬

如果你想变得非常花哨，你可以尝试计算每个形状的质心。但我怀疑你是否想要去那里，而且这些县似乎在中心周围大致均匀分布。

在鼠标悬停时从中心缩放SVG（Raphaël）路径

1 个答案: