2

「再生」ボタンのアイコンを作成するために Raphael.js を使用しています。ただし、三角形は円の端に近すぎます。マウスオーバーで、ストロークの幅を広げています。問題は、三角形が実際に円の外に出てしまうことです。これは私が望んでいるものではありません。HTML は id を持つ単なる div です:

<html>
 <head>
 </head>
 <body>
  <div id="playB"></div>
 </body>
</html>

JavaScriptはかなり長いので、ここにjsfiddleがあります

この場合、SVG のパスを「移動」する最も簡単な方法は何ですか? つまり、右からさらに上から開始します。いろいろ試してみましたが、アイコンのサイズを変更する以外に、パスの各数値にxを掛けると、アイコンをまったく操作できません。この場合、アイコンの特定の要素を移動します。

4

3 に答える 3

2

三角形の位置を調整するには、パスを分割する必要があります。2番目の「M」がパスのどこにあるかを選択することで、これを目で確認できました。

var playB = Raphael('playB', 200, 200);
var circle =          playB.path("M64,5.864C31.892,5.864,5.864,31.892,5.864,64c0,32.108,26.028,58.136,58.136,58.136c32.108,0,58.136-26.028,58.136-58.136C122.136,31.892,96.108,5.864,64,5.864z");
var triangle =  playB.path("M26.736,102.728L97.264,62L26.736,21.272V102.728z");

次に、三角形を移動できます。

triangle.attr("transform", "T15,0");

プロパティとアニメーションをそのまま維持するには、両方を Raphael セットに追加します。

var playBP = playB.set();
playBP.push(circle, triangle);
playBP.attr({
  'stroke-width': 5,
  'stroke': "#000",
  'fill': "#fff",
  'opacity': 1
});

次に、1 つの小さな変更のみが必要です。マウスオーバー コマンドの「this」を「playBP」に変更します。これは冗長に思えるかもしれませんが、「これ」とはセットではなく、マウスオーバーされた単一の要素を指します。

var speed = 5;

playBP.mouseover(function(){
  playBP.animate({
    'stroke-width': 10,
    'stroke': "#fff",
    'fill': "#000",
    'opacity': .9
  }, 1000, 'elastic');

});
playBP.mouseout(function(){
  playBP.stop().animate({
    'stroke-width': 5,
    'stroke': "#000",
    'fill': "#fff",
    'opacity': 1    
  }, speed*4, 'elastic');

});

jsFiddle が更新されました

単にパスを修正したい場合は、次のように Raphael.mapPath() 関数を使用して、三角形の調整された x/y を取得できます。

console.log(Raphael.mapPath(triangle.attr("path"), triangle.matrix));
于 2013-01-09T19:11:34.743 に答える
0

私は簡単な方法を取り、inkscape 内のパスを変更しました。やり方はとても簡単です。興味があれば、私がやったことは次のとおりです。

  • Inkscape でパスを作成し、それを選択します。
  • Ctrl-shift-x で xml エディターを起動します。パスを選択する必要があります。
  • 「d」属性をクリックします。
  • 下のボックスで、値をフィドルの値に置き換えます。
  • セットをクリックします。
  • パスは、フィドルのパスに似るように変更されます。

次に、三角形のノードを選択して移動しました。xml エディターに戻り、"d" 値を選択して、それをフィドルに入力します。

var playBP =          playB.path("M 64,5.864 C 31.892,5.864 5.864,31.892 5.864,
64 5.864,96.108 31.892,122.136 64,122.136 96.108,122.136 122.136,96.108 122.136,
64 122.136,31.892 96.108,5.864 64,5.864 z M 38.640816,102.728 109.16882,
62 38.640816,21.272 z");

出来上がり。

于 2013-01-10T17:27:04.040 に答える
-1

el.transform('t{x},{y}')たとえば、 を使用して、el.transform('t1,1')要素をそれぞれ 1 ピクセルずつ右および下に移動します。必要に応じて、負の値を含め、x と y を別の値に置き換えることができます。

于 2013-01-09T17:42:56.757 に答える