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

これがあなたのための更新されたフィドルです。参考までに、マウスオーバー前後のバウンディングボックスを表す赤と青の長方形を描画します。これは、変換によって消化不良が発生するたびに使用する戦略です。当然、それらを削除する必要があります。

もう1つ覚えておくべきことは、不規則な形状の実際の中心は重心であり、バウンディングボックスの中間点ではありません。（これらの2つのポイントは、地理的な境界がめったに作成されない完全に対称的な形状である場合にのみ同じです。）アラスカ州のように、角にたくさんの島があり、中心ベースのスケーリングがぎこちなく見える場合があります。 。

本当に凝ったものにしたい場合は、各形状の重心を計算してみてください。しかし、私はあなたがそこに行きたいとは思わない、そしてこれらの郡は中心の周りにほぼ均等に質量が分布しているように見える。

于 2013-01-02T16:38:34.573 に答える