0

我正在尝试在鼠标悬停时缩放 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

蒂亚

4

1 回答 1

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

这是一个更新的小提琴给你。作为参考，我让它绘制了代表鼠标悬停前后边界框的红色和蓝色矩形——每当转换让我消化不良时，我都会使用这种策略。您自然会想要删除它们。

要记住的另一件事：不规则形状的实际中心是其质心，而不是其边界框的中点。（只有当它是一个完全对称的形状时，这两个点才相同，而地理边界很少会产生这种形状。）对于像阿拉斯加州这样的形状，在拐角处有很多岛屿，这会使基于中心的缩放看起来很尴尬.

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

于 2013-01-02T16:38:34.573 回答