draw.ioの図に曲線または円弧を追加するにはどうすればよいですか？

使用可能なすべてのアイテムを調べましたが、図に追加する曲線または円弧が見つかりません。どこかにありますか？

新しいエッジを接続ライブラリから曲線としてドラッグできます

または、既存の接続を選択して、エッジスタイルツールバーのドロップダウンから曲線を選択して変更することもできます。

draw.ioで曲線を取得するためのより手動のアプローチは、いくつかの要素の形状を編集することです。これにより、カーブの3つの異なるバリエーション <arc ... />、<quad ... />またはが可能になり<curve ... />ます。画像はこれら3つの曲線を示しており、さらに下にはこれらの要素を生成するために必要なコードがあります。画像には、カーブの生成を説明するためのガイドラインがいくつかあります。

形状を修正する

draw.io内の要素のスタイルと形状を編集できます。ただし、すべての要素に編集する形状があるわけではありません。基本メニューのほとんどの要素には、編集する形状があります。

形状やスタイルはから編集することができますフォーマットパネル Ctrl+Shift+Pでスタイルタブ、あなたは適切な名前いくつかのボタンが持っているスタイルの編集、画像編集、および/または編集形状を。表示されるボタンは、選択した要素によって異なります。

この回答では、[ 形状の編集 ]ボタンに焦点を当てており、それを表示するには、基本>スターを図面に追加することから始めます。Draw.ioには、小さな例を使用した形状の編集に関するいくつかのドキュメントと、弧の描画に関するSVGドキュメントへの参照があります。

以下の例のそれぞれについて、形状のある要素を挿入し、それを選択して、[ 形状の編集 ]ボタンをクリックします。内にテキストを挿入または編集し、プレビューを表示するには[ プレビュー]をクリックするか、[ 適用 ]をクリックしてダイアログを閉じ、最終結果を確認します。このコードの最終結果と、いくつかの追加されたガイドラインにより、次の画像が得られます。

編集 arc

弧は、基点と指定された点を通過する2つの楕円に基づいています。これらは実際にはベースからエンドポイントまでの4つの異なるパスを形成するため、使用するパスを選択する必要があります。

240度の円グラフのサンプルコードを次に示します。

<shape aspect="variable" h="2.0" w="2.0" name="Angle" strokewidth="inherit">
  <connections/>
  <background>
    <path>
      <move x="2.0" y="1.0"/>
      <arc x="0.5" y="1.866" rx="1.0" ry="1.0" large-arc-flag="1" sweep-flag="0" x-axis-rotation="0"/>
      <line x="1.0" y="1.0"/>
      <close/>
    </path>
  </background>  
  <foreground>
    <fillstroke/>
  </foreground>
</shape>

このコードが240度の円弧を描く理由の詳細は次のとおりです。

• ほとんどの形状は持っている必要がありますshape、backgroundおよび/またはforeground。使用するbackgroundことを選択したのは、それによって図形に非常に簡単に影を付けることができるからです。シェイプのベースキャンバスを高さと幅の正方形が2.0になるように作成しました。これは、完全な単位円をシェイプ内に含めることができるようにするためです。
• 私たちは描く必要があります path
  • 0度から始めます。これは<move x="2.0" y="1.0">コマンドに変換されます
  • 次にarc、パスの前のポイントから終点までの経路を描きます。楕円の(x, y)半径（rxおよびry）を使用して、正しい楕円部分sweep-flagをlarge-arc-flag選択し、楕円を回転させるかどうか（x-axis-rotation）を選択します。240度を取得するには、次のものが必要です。
    • 基本TRIGまたは使用インタラクティブユニットサークル：我々は、240度に対応する単位円上の座標を見つける(cos(240°), sin(240°) = (-0.5, -0.866)ことを私達の形状のニーズに翻訳(1+x, 1-y)与えるをx="0.5" y="1.866"
    • 次数は180よりも大きいので、 large-arc-flag="1"
    • そして、私たちは反時計回りに経路を描いています。 sweep-flag="0"
  • 円グラフのセグメントを美しくするlineために、中心に座標を追加し、1.0, 1.0次にcloseパスを追加します。
• これはシャドウを取得するパス全体を定義しますが、厳密にはまだ描画されていません。これはfillstroke、foregroundセクションのコマンドを使用して行われます

円弧セグメントだけが必要な場合は、lineおよびcloseタグをドロップfillstrokeして、を単純なに置き換えることができますstroke。変更して実験を行いますsweep-flagとlarge-arc-flag、および他のタグ。私の例ではrx=ry=1、省略記号を円に変換するのに使用しましたが、半径の変更、スイープ、または大弧の要素を試して、何が起こるかを確認します。

いくつかの標準角度を取得するための他のいくつかの座標は次のとおりです。

• ：単位円上45° (0.707, 0.707)いますx="1.707" y="0.293"
• 単位円上の60°：(0.5, 0.866)これはx="1.5" y="0.134"
• 225°= 180°+ 45°：(-0.707, -0.707)これによりx="0.293" y="1.707"
• 単位円上のn°：(cos(n)、sin（n） ``x="1+cos(n)" y="1-sin(n)"
• 値注0.707（＆ ）0.293、0.5（＆0.866 0.134）、定期的に30に関連する再発れ°、45°と60°とn*90°円の周りの角度...

使用を注意してくださいmove基点を指定し、その後、デイジーのチェーンarcとline（そして、あなたは使うことができたquadとcurve）長いパスを生成します。

編集 quad

quad曲線は、制御点を介してベースポイントからラインを起動したとき、あなたが得る曲線である二次曲線であり、そしてあなたは、エンドポイントを介して制御ポイントからのラインと一致するまで、振り向きます。

次に例を示します。

<shape aspect="variable" h="1" w="1" name="Quad" strokewidth="inherit">
  <connections />
  <background>
    <path>
      <move x="0" y="0"/>
      <quad x1="0.25" y1="1" x2="1" y2="1"/>
    </path>
  </background>
  <foreground>
    <stroke/>
  </foreground>
</shape>

quad曲線の説明：

• 基点を設定し、 <move x="0" y="0" />
• に制御点を与えquad、x1="0.25" y1="1"
• そして終点を指定し、 x2="1" y2="1"

この種のカーブは、カーブの開始線セグメントと終了線セグメントの角度を制御する場合に役立ちます。つまり、複数の曲線セグメントを作成し、それらに素敵なジョイントを持たせたい場合です。

編集 curve

最終的なcurve形状は、2つの制御点を使用しています。この制御点は、終点まで引力で線を引いたときに機能します。これがコードです：

<shape aspect="variable" h="1" w="1" name="curve" strokewidth="inherit">
  <connections />
  <background>
    <path>
      <move x="0" y="0"/>
      <curve x1="0.1" y1="0.4" x2="0.9" y2="0.3" x3="1" y3="1"/>
    </path>
  </background>
  <foreground>
    <stroke/>
  </foreground>
</shape>

• 基点を設定し、 <move x="0" y="0" />
• に2つの制御点を与えcurve、x1="0.1" y1="0.4" x2="0.9" y2="0.3"
• そして終点を指定し、 x3="1" y3="1"

quadとの両方で左上を始点、右下を終点として使用していることに注意してください。curveもちろん、曲線の別の一般的な方向が必要な場合は、これを変更できます。

円弧を描画する方法の1つは、Miscパネルから作図領域に双方向カーブをドラッグし、カーブをクリックして、「ウェイポイント」と呼ばれる「青色」のポイントを表示することです。これらのウェイポイントを削除して、その構造を変更できます。右クリックしてウェイポイントの削除を選択します。不要なウェイポイントを削除して、ウェイポイントを3つだけにします。2つのウェイポイントの間にあるウェイポイントをドラッグすると、異なる曲率のカーブを取得できます。