SVGのパス内の2次ベジェ曲線関数

パス内に2次ベジェ曲線を作成する機能があります。たとえば、次のようにSVGのパス内の2次ベジェ曲線関数

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> 
</svg>

Qは二点M10 80とT 180 80与え52.5 10, 95 80を座標取得する方法上の任意のアイデア。

カーブは、ラインの傾きに基づいています。したがって、水平線には曲線はありませんが、45度の場合は最大の曲線になります。

出典

2016-08-31 jamescharlesworth

-1

ご質問はunanswerableです：

UPDATE、もう少し情報は、単にヤフーパイプコネクターに似た曲線を有するパスを作成しようとしています。あなたは十分な情報を提供していません。

X座標を計算するのは簡単です。しかし、Yの値は何でもかまいません。パスをどのくらいカーブしたいかによって決まります。

出典

2016-08-31 12:04:02

Hmm、カーブがパスの傾きに基づいていた場合はどうなりますか？たとえば、パスが水平の場合、カーブはありません。しかし、45度であれば、曲線は最大になります。 – jamescharlesworth

あなたが望むものなら、その要件を追加するために質問を更新してください。しかし、最初の角度を指定するだけで簡単な三角法の質問に変わります。あなたはX座標（正確に半分のように見えます）を知っていて、角度を知っています。 Y座標はその情報をもとに簡単に計算されます。 –

ありがとう、私は質問を更新しました – jamescharlesworth

SVGのパス内の2次ベジェ曲線関数

答えて

関連する問題