พิมพ์สมการ LaTeX บนแคนวาส

บทเรียนนี้สอนการใช้เครื่องมือ Math — ไอคอน fx ในแถบเครื่องมือ จะพิมพ์นิพจน์ LaTeX ดูการแสดงผล KaTeX แบบ live เปลี่ยนสีและขนาด แล้ว export เป็น SVG หรือ PNG ไฟล์ที่ได้นำไปใช้ในรูปประกอบบทความวิจัย สไลด์ หน้า Notion หรือบล็อกได้ทันที

เครื่องมือ Math เป็นส่วนหนึ่งของไวท์บอร์ดไม่จำกัดขนาดของ drawtonomy ดังนั้นแคนวาสเดียวกันจึงวางเลน ยานพาหนะ และคนเดินเท้าร่วมกับสมการได้ — สะดวกมากเมื่อต้องการให้สมการอยู่ติดกับแผนภาพที่อธิบาย แต่ถ้าต้องการใช้แค่สมการอย่างเดียวก็ได้เช่นกัน: เครื่องมือ Math ทำงานบนแคนวาสเปล่าเป็นโปรแกรมแก้ไขสูตรแบบ standalone

1. เลือกเครื่องมือ Math

เปิด drawtonomy.com แล้วคลิกไอคอน fx ในแถบเครื่องมือด้านล่าง — อยู่ระหว่างเครื่องมือ Text (T) กับ Freehand:

$เครื่องมือ Math (fx) เป็นปุ่มที่ active อยู่ในแถบเครื่องมือด้านล่าง$

เคล็ดลับ: ถ้าต้องการใช้คีย์บอร์ดแทน ให้กด / ซึ่งเป็น shortcut แบบ Notion สำหรับเครื่องมือ Math

2. คลิกตำแหน่งที่ต้องการวางสมการ

คลิกที่ใดก็ได้บนแคนวาส drawtonomy จะเปิด editor แบบ inline ตรงตำแหน่งนั้น ครึ่งบนเป็นช่อง LaTeX input แบบ plain-text ครึ่งล่างเป็น live KaTeX preview โดยมีตัวอย่างสูตรกำลังสอง เป็น placeholder จางๆ

$Math editor ว่างเปล่า — ครึ่งบนเป็น textarea สำหรับโค้ด LaTeX ครึ่งล่างเป็น live KaTeX preview พร้อม placeholder ตัวอย่าง$

คำแนะนำคีย์บอร์ดที่แสดงด้านล่าง — Del: delete · Arrows: move · Esc: deselect — บอกสิ่งที่ทำได้ขณะ editor เปิดอยู่

3. พิมพ์ LaTeX

ลองพิมพ์สูตรที่คุ้นเคย:

E = mc^2

ขณะพิมพ์ บานหน้าต่างล่างจะ render ใหม่แบบ real-time ไม่มีปุ่ม “render” — ทุกครั้งที่กดคีย์ preview จะอัปเดตทันที:

$Math editor แสดง E = mc^2 ในช่อง input พร้อม KaTeX rendering ด้านล่าง$

ลองสูตรที่ซับซ้อนขึ้น ลบ input แล้วพิมพ์สูตรกำลังสอง:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

\frac, \sqrt, \pm และ ^ render ออกมาเหมือนในบทความจริงทุกประการ:

$Math editor แสดงสูตรกำลังสองพร้อม fraction, square root และ ± ที่ render ใน preview$

เครื่องมือ Math รองรับ vocabulary KaTeX ทั้งหมด รวมถึง extension mhchem สำหรับเคมี — ดูรายการคำสั่งทั้งหมดได้ที่ Math reference

4. ยืนยัน: กด Esc

กด Esc (หรือคลิกนอก editor) เพื่อจบการแก้ไข textarea จะหายไปและเหลือแต่สมการที่ render แล้วบนแคนวาส โดยปรับขนาดให้พอดีอัตโนมัติ:

$สมการที่ยืนยันแล้วบนแคนวาส — แสดงแต่สูตรที่ render พร้อมกรอบเลือก$

เส้นสีน้ำเงินคือกรอบเลือก คลิกที่ว่างเพื่อยกเลิกการเลือก

หากต้องการ แก้ไขใหม่ ดับเบิลคลิกที่สมการ editor จะเปิดขึ้นพร้อม โค้ด LaTeX ต้นฉบับ — drawtonomy เก็บโค้ดต้นฉบับไว้ ไม่ใช่แค่รูปภาพ ที่ render แล้ว ดังนั้นสมการทุกตัวจึงแก้ไขได้ตลอด

5. เปลี่ยนสีและขนาด

เมื่อเลือกสมการแล้ว ให้ดูที่แผง Math (LaTeX) มุมบนขวา:

Color — คลิก swatch ใดก็ได้เพื่อเปลี่ยนสี (ดำเหมาะพิมพ์งาน เทาหลายระดับ แดง/ส้ม/เหลือง/เขียว/น้ำเงิน/ม่วง) สำหรับสีของแบรนด์ คลิก More… เพื่อดู palette เต็ม
Size — ลาก slider จาก 8 px (ขนาด footnote) ถึง 200 px (ขนาด poster) สมการทั้งหมดจะ rescale ตามสัดส่วน

ตั้งสีเป็นแดงและขนาดเป็น 60 px:

$สมการเดิมในสีแดงที่ 60 px พร้อมแผง Math (LaTeX) แสดง swatch แดงที่เลือกและ slider ขนาด 60 px$

6. Export

เมื่อสมการดูถูกต้องแล้ว ให้ export ผ่าน Menu → Export:

รูปแบบ	เหมาะสำหรับ
SVG	LaTeX (`\includegraphics`), Notion, เว็บไซต์, สไลด์ เป็น vector ขยายได้ไม่แตก
PNG	สถานที่ที่ไม่รองรับ SVG (Word, แอปแชทบางตัว)
PDF	งาน build LaTeX ที่ต้องใช้ figure แบบ PDF ตัวอักษรถูก convert เป็น path ไม่มี font dependency
EPS	LaTeX toolchain รุ่นเก่า (`latex` + `dvips`) ก็ convert เป็น path เช่นกัน
.drawtonomy.svg	รูปแบบ native ของ drawtonomy เป็น SVG ปกติที่เปิดใน drawtonomy แล้วยังแก้ไขโค้ด LaTeX ได้

สำหรับงานทั่วไป SVG และ PNG ครอบคลุมเกือบทุกกรณี สำหรับบทความ LaTeX PDF ให้ผลที่คาดเดาได้มากที่สุด

ความสามารถอื่นของเครื่องมือ Math

ฟีเจอร์เพิ่มเติมที่ควรรู้:

เคมี (mhchem) — \ce{2 H2 + O2 -> 2 H2O} แสดงลูกศร reaction ได้ถูกต้อง

$สมการเคมี mhchem ใน live preview$
สมการหลายบรรทัดพร้อมหมายเลข — ใช้ \begin{align} ... \end{align} เพื่อใส่หมายเลขสมการแบบบทความวิจัย ทั้งเนื้อหาสมการและ tag (1)(2)(3) รับประกันไม่ทับซ้อนกันแม้ขนาดใหญ่

$สมการ Maxwell ที่ render ในสภาพแวดล้อม align พร้อมหมายเลข (1)–(4)$
สมการยาว — textarea จะ wrap และ preview pane จะ scroll ทำให้แม้แต่การพิสูจน์ครึ่งหน้ายังแก้ไขได้สะดวก
Cmd+A แล้ว Delete — เลือกทุก shape บนแคนวาส (รวมถึง math) แล้วล้างทั้งหมด
ลาก input box — ขณะแก้ไข คลิกแล้วลาก (ระยะ 5 px) เพื่อขยับ editor โดยไม่เสียตำแหน่งเคอร์เซอร์
Undo / Redo — Cmd+Z / Cmd+Shift+Z การเปลี่ยนสีและขนาด แต่ละครั้งเป็น undo step แยกกัน การลาก size slider จะรวมเป็น step เดียว