Làm cách nào để thêm đường cong hoặc cung vào sơ đồ trên draw.io?

Tôi đã xem qua tất cả các mục có sẵn nhưng không thể tìm thấy một đường cong hoặc cung để thêm vào sơ đồ của tôi. Nó có ở đâu đó không?

Bạn có thể kéo vào một cạnh mới dưới dạng đường cong từ thư viện Kết nối

Hoặc bạn có thể thay đổi kết nối hiện có bằng cách chọn nó và chọn đường cong từ trình đơn thả xuống của thanh công cụ kiểu cạnh

Một cách tiếp cận thủ công hơn để có được các đường cong trong draw.io, là chỉnh sửa hình dạng của một số phần tử. Điều này cho phép ba biến thể khác nhau của đường cong <arc ... />, <quad ... />hoặc <curve ... />. Hình ảnh cho thấy ba đường cong này, và xa hơn nữa là mã cần thiết để sản xuất các yếu tố này. Hình ảnh có một số hướng dẫn bổ sung để giúp minh họa việc tạo đường cong.

Sửa đổi hình dạng

Chúng tôi có thể chỉnh sửa kiểu và hình dạng của các thành phần trong draw.io. Tuy nhiên, không phải tất cả các yếu tố đều có hình dạng cần chỉnh sửa. Hầu hết các yếu tố trong menu Cơ bản không có hình dạng để chỉnh sửa.

Hình dạng và kiểu có thể được chỉnh sửa từ Bảng định dạng Ctrl+Shift+P trong tab Kiểu và ở đó bạn có một số nút có tên thích hợp là Chỉnh sửa kiểu , Chỉnh sửa ảnh và / hoặc Chỉnh sửa hình . Những nút nào đang hiển thị phụ thuộc vào yếu tố được chọn.

Đối với câu trả lời này, chúng tôi tập trung vào nút Chỉnh sửa hình dạng và để hiển thị nó, chúng tôi bắt đầu bằng cách thêm một Basic> Star vào bản vẽ của chúng tôi. Draw.io có một số tài liệu về chỉnh sửa hình dạng với một ví dụ nhỏ và tham chiếu đến tài liệu SVG về vẽ vòng cung , là cơ sở để tôi thử nghiệm cho đến khi tôi tìm thấy các ví dụ mã được sử dụng trong câu trả lời này.

Đối với mỗi ví dụ dưới đây, chèn một số phần tử có hình dạng, chọn nó và nhấp vào nút Chỉnh sửa hình dạng . Chèn hoặc chỉnh sửa văn bản trong và nhấn Xem trước để xem trước hoặc Áp dụng để đóng hộp thoại và xem kết quả cuối cùng của bạn. Kết quả cuối cùng của mã này, với một số hướng dẫn bổ sung dẫn đến hình ảnh này:

Chỉnh sửa một arc

Vòng cung dựa trên hai hình elip đi qua điểm gốc và điểm cụ thể. Vì chúng thực sự tạo thành bốn đường dẫn khác nhau từ điểm gốc đến điểm cuối, bạn phải chọn đường dẫn nào bạn đang sử dụng.

Dưới đây là mã ví dụ cho phân khúc bánh 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>

Dưới đây là các chi tiết về lý do tại sao mã này vẽ một hình tròn cách ly 240 độ:

• Hầu hết các hình dạng sẽ cần phải có shape, backgroundvà / hoặc foreground. Khi tôi chọn sử dụng backgroundnó là vì điều đó cho phép tôi thêm bóng vào hình rất dễ dàng. Tôi đã làm cho khung hình cơ sở của hình dạng là một hình vuông có chiều cao và chiều rộng bằng 2,0, điều này là để cho phép một vòng tròn đơn vị đầy đủ được bao gồm trong hình dạng
• Chúng ta cần vẽ path
  • Chúng ta sẽ bắt đầu ở 0 độ, chuyển thành <move x="2.0" y="1.0">lệnh
  • Sau đó, chúng ta vẽ một điểm arcđi từ điểm trước trong đường dẫn cho đến điểm kết thúc (x, y), với bán kính của các hình elip ( rxvà ry) trong đó sweep-flagvà large-arc-flagchọn phần hình elip chính xác, và liệu các hình elip này có được xoay ( x-axis-rotation) hay không. Để có được 240 độ, chúng ta cần những điều sau đây:
    • Sử dụng trig cơ bản hoặc Vòng tròn đơn vị tương tác, chúng tôi tìm thấy tọa độ trên vòng tròn đơn vị tương ứng với 240 độ: (cos(240°), sin(240°) = (-0.5, -0.866)dịch thành hình dạng của chúng tôi cần phải (1+x, 1-y)cung cấpx="0.5" y="1.866"
    • Độ lớn hơn 180, vì vậy chúng tôi chọn large-arc-flag="1"
    • Và chúng ta đang vẽ đường dẫn ngược chiều kim đồng hồ, điều này mang lại sweep-flag="0"
  • Để làm cho nó trở thành một phân khúc bánh đẹp, chúng tôi thêm một linemặt sau vào trung tâm, tọa độ 1.0, 1.0và sau đó closelà đường dẫn
• Điều này xác định toàn bộ đường dẫn sẽ có một bóng, nhưng nó hoàn toàn không được vẽ. Điều này được thực hiện bằng cách sử dụng fillstrokelệnh trong foregroundphần

Lưu ý rằng nếu bạn chỉ muốn phân đoạn vòng cung, bạn có thể bỏ các thẻ linevà closethẻ, và thay thế fillstrokebằng một đơn giản stroke. Hãy thử nghiệm với việc thay đổi sweep-flagvà large-arc-flag, và các thẻ khác. Trong ví dụ của tôi, tôi đã sử dụng rx=ry=1biến đổi dấu chấm lửng thành hình tròn, nhưng thực hiện thử nghiệm thay đổi bán kính, quét hoặc các công cụ hình cung lớn và xem điều gì sẽ xảy ra.

Một số tọa độ khác để có được một số góc tiêu chuẩn như sau:

• 45 ° trên vòng tròn đơn vị: (0.707, 0.707)cung cấp chox="1.707" y="0.293"
• 60 ° trên vòng tròn đơn vị: (0.5, 0.866)cung cấp chox="1.5" y="0.134"
• 225 ° = 180 ° + 45 °: (-0.707, -0.707)mang lạix="0.293" y="1.707"
• n ° trên vòng tròn đơn vị : (cos(n), sin (n) `` mang lạix="1+cos(n)" y="1-sin(n)"
• Lưu ý các giá trị 0.707(& 0.293), 0.5, 0.866(& 0.134), mà cơn đau xuất hiện thường xuyên liên quan đến 30 °, 45 ° & 60 ° và n*90°góc xung quanh vòng tròn ...

Lưu ý việc sử dụng moveđể chỉ định điểm gốc, và sau đó chuỗi chuỗi của arcvà line(và bạn có thể đã sử dụng quadvà curve) để tạo đường dẫn dài hơn.

Chỉnh sửa một quad

Một quadđường cong là một đường cong bậc hai, đó là đường cong mà bạn nhận được khi bắt đầu với một đường thẳng từ điểm cơ sở thông qua điểm kiểm soát, và quay lại cho đến khi bạn kết hợp các dòng từ điểm kiểm soát thông qua điểm kết thúc.

Đây là một ví dụ:

<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>

Giải thích về quadđường cong:

• Đặt điểm gốc, <move x="0" y="0" />
• Đưa ra một điểm kiểm soát cho quad,x1="0.25" y1="1"
• Và chỉ định điểm cuối, x2="1" y2="1"

Loại đường cong này có thể hữu ích khi bạn muốn kiểm soát góc của các đoạn đường bắt đầu và kết thúc của đường cong. Đó là, nếu bạn muốn tạo nhiều phân đoạn đường cong và muốn chúng có các khớp đẹp.

Chỉnh sửa một curve

curveHình dạng cuối cùng , đang sử dụng hai điểm kiểm soát, loại hoạt động như lực hấp dẫn kéo theo đường thẳng cho đến điểm cuối. Đây là mã:

<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>

• Đặt điểm gốc, <move x="0" y="0" />
• Cho hai điểm kiểm soát vào curve,x1="0.1" y1="0.4" x2="0.9" y2="0.3"
• Và chỉ định điểm cuối, x3="1" y3="1"

Lưu ý rằng tôi đã sử dụng phía trên bên trái làm điểm bắt đầu và phía dưới bên phải làm điểm kết thúc cho cả quadvà và curve, điều này tất nhiên có thể được thay đổi nếu bạn muốn một hướng chung khác của đường cong.

Một trong những cách để vẽ vòng cung là kéo đường cong Hai chiều từ bảng Misc đến vùng vẽ và sau đó nhấp vào đường cong để xem các điểm "màu xanh" được gọi là "điểm tham chiếu". Bạn có thể loại bỏ các điểm mốc này để thay đổi cấu trúc của nó. Nhấp chuột phải và chọn loại bỏ điểm. Xóa các điểm cách không cần thiết cho đến khi bạn chỉ có 3 điểm cách, 2 ở các cạnh và một điểm ở giữa. Bằng cách kéo điểm tham chiếu ở giữa 2 điểm, bạn có thể có được một đường cong có độ cong khác nhau.