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

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，而不是其边界框的中点。 （只有当它是一个完全对称的形状时，这两个点才相同，而地理边界很少会产生这种形状。）对于像阿拉斯加州这样的形状，在拐角处有很多岛屿，这会使基于中心的缩放看起来很尴尬.

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