0

私Raphaelが目指していたのは、大きな直角のない1つの円弧だけでした。

ですから、直角のない滑らかな曲線が 1 本だけです。

これはかなり基本的なもので、ラファエル楕円弧を使用しています。

http://jsfiddle.net/mailrox/uuAjV/1/で確認できます。

コードは次のとおりです。

    var raph = Raphael(0, 0, 1000, 1000);

var x = 150;
var y = 150;
var r = 100; //radius
var value = 100;
var maxValue = 360;

var pi = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var t = (pi/2) * 3; //translate
var rad = (pi*2 * (maxValue-value)) / maxValue + t;

var p = [
  "M", x, y,
  "l", r * cos(t), r * sin(t),
  "A", r, r, 0, +(rad > pi + t), 1, x + r * cos(rad), y + r * sin(rad),
  "z"
];

var param = {"stroke-width": 30}

var d = raph.path(p).attr(param);

私が行った1つの方法は、線の直角部分をマスクすることですが、これはなく、現在のパスと上部のマスクの両方を管理するのとは対照的に、一度だけ素​​敵な曲線を作成したいと思います。

このおかげで助けてくれて本当にありがとう！

4

2 に答える 2

2

これを試して。SVG パス定義からクローズ パス (「z」) を削除するだけです (このソリューションはテストしていないことに注意してください)。

var raph = Raphael(0, 0, 1000, 1000);

var x = 150;
var y = 150;
var r = 100; //radius
var value = 100;
var maxValue = 360;

var pi = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var t = (pi/2) * 3; //translate
var rad = (pi*2 * (maxValue-value)) / maxValue + t;

var p = [
  "M", x, y,
  "l", r * cos(t), r * sin(t),
  "A", r, r, 0, +(rad > pi + t), 1, x + r * cos(rad), y + r * sin(rad)
];

var param = {"stroke-width": 30}

var d = raph.path(p).attr(param);

jsフィドル

于 2013-01-03T15:09:26.430 に答える