บทความก่อนหน้านี้พูดคุยเกี่ยวกับวิธีการโค้งของผ้าใบและบทความนี้พูดคุยเกี่ยวกับวิธี Arcto ที่เกี่ยวข้องกับมัน
อาร์คและอาร์คโตสามารถมองเห็นได้จากชื่อของพวกเขา Arcto ยังเป็นวิธีการวาดเส้นโค้งและเส้นโค้งที่เขาวาดก็เป็นส่วนโค้งของวงกลมที่สมบูรณ์แบบ แต่พารามิเตอร์และส่วนโค้งของเขานั้นไม่เกี่ยวข้อง ~
ctx.arcto (x1, y1, x2, y2, รัศมี); พารามิเตอร์ Arcto รวมถึงสองจุดและไม่มีจุดที่แสดงถึงจุดศูนย์กลางของวงกลมในสองจุดนี้ เฉพาะพารามิเตอร์สุดท้ายคือรัศมีของวงกลมแสดงว่า Arcto และวงกลมมีความสัมพันธ์เล็กน้อย
มีบทความน้อยมากเกี่ยวกับ Arcto Online และในที่สุดฉันก็พบบทความที่เป็นต่างประเทศ และไม่มีเครื่องมือที่ใช้งานง่ายสำหรับการวาดภาพผ้าใบดังนั้นฉันสามารถเดาได้ว่า Arcto ทำให้ฉันเดาได้นาน -
สำหรับคำอธิบายที่ใช้งานง่ายฉันใช้วิธีเสริม: ทุกที่ที่ Arcto ถูกวาดฉันใช้ lineto เพื่อวาดจุดที่สอดคล้องกันเพื่อดูความสัมพันธ์ของพวกเขา เพียงแค่วาดเส้นเสริม
var x0 = 100
y0 = 400
x1 = 500
Y1 = 400
x2 = 450
Y2 = 450;
ctx.beginpath ();
ctx.moveto (x0, y0);
ctx.strokestyle = "#f00";
ctx.lineWidth = 2;
ctx.arcto (x1, y1, x2, y2,20);
ctx.stroke ();
ctx.beginpath ();
ctx.strokestyle = "rgba (0,0,0,0.5)";
ctx.lineWidth = 1;
ctx.moveto (x0, y0);
ctx.lineto (x1, y1);
ctx.filltext ('x1, y1', x1+10, y1+10)
ctx.lineto (x2, y2);
ctx.filltext ('x2, y2', x2+10, y2)
ctx.stroke ();
ดูเหมือนว่ามีรหัสจำนวนมาก แต่จริงๆแล้วมันง่ายมาก ฉันใช้ตัวแปรหลายตัวเพื่อประหยัดค่าพิกัดและส่วนที่เหลือคือการดำเนินการผ้าใบ
คำอธิบายตัวแปร: x0, y0 เป็นจุดเริ่มต้นพิกัด, x1, y1 เป็นพิกัดจุดแรกและ x2, y2 เป็นจุดที่สองพิกัด เส้นตรงที่วาดโดย lineto เป็นเส้นสีดำโปร่งแสง 1px และเส้นที่วาดโดย Arcto เป็นเส้นสีแดง 2px
รีเฟรชหน้าและคุณจะเห็นภาพด้านล่าง
ฉันต้องบอกว่าเส้นสีแดงนี้ดูเหมือนเบ็ด
ดังนั้นจึงพบกฎของ Arcto จริง ๆ แล้วมันเกิดมุมผ่านเส้นตรงสองเส้นที่จุดเริ่มต้นจุด 1 และจุด 2 และสองบรรทัดนี้ยังเป็นเส้นสัมผัสของวงกลมพารามิเตอร์
รัศมีของวงกลมกำหนดว่าวงกลมจะแยกขอบกับเส้น มันเหมือนลูกบอลกลิ้งเข้าไปในมุมที่ตายแล้ว ยิ่งลูกบอลเล็กลงเท่าไหร่มันก็ยิ่งเข้ามามากเท่าไหร่ก็ยิ่งใกล้ถึงมุมที่ตายแล้ว ลูกบอลที่ใหญ่กว่านั้นตรงกันข้าม
นี่เป็นปัญหาทางวิชาการที่ร้ายแรงมากดังนั้นไม่ต้องการ YY
มาทำให้ลูกบอลใหญ่ขึ้น!
ctx.arcto (x1, y1, x2, y2,50); // รัศมีเปลี่ยนเป็น 50
ดังที่แสดงในรูปคุณจะเห็นว่าส่วนโค้งมีขนาดใหญ่และไม่ได้สัมผัสกับเส้นตรง
แน่นอนว่าพวกเขายังคงแทนเจนต์เพราะแทนเจนต์ขยายออกไปไม่สิ้นสุด
เรายังคงสำรวจดำเนินการต่อเพื่อขยายวงกลมและลดระยะห่างระหว่างจุดเริ่มต้นและจุดแรก
var x0 = 400; // จุดเริ่มต้น x พิกัดการเปลี่ยนแปลงจาก 100 เป็น 400
-
ctx.arcto (x1, y1, x2, y2,100); // รัศมีของวงกลมมีขนาดใหญ่กว่า 100 และคุณจะเห็นร่างแปลก ๆ
เดิมทีมันเป็นเบ็ด แต่ตอนนี้มันงอและหันไปทางทิศทางตรงกันข้าม! มันเป็นเหมือนที่วางขวดไวน์
อย่างไรก็ตามโปรดทราบว่าวงกลมนี้ยังคงสัมผัสกับสองบรรทัด! แต่ตอนนี้ความยาวของสองบรรทัดไม่สามารถตอบสนองวงกลมนี้ได้! เขาขยายสายไฟทั้งสองแบบไร้สาย!
เบ็ดนี้จะกลับด้านเมื่อใด หากคุณมีเรขาคณิตที่ดีคุณสามารถพยายามทำความเข้าใจสมการแทนเจนต์ของคะแนนและวงกลม
มีจุดสำคัญมากในวิธี Arcto จุดสำคัญนี้คือ (x1, y1) ในรหัส ตราบใดที่ระยะทางจากมันไปยังจุดแทนเจนต์ของวงกลมเกินระยะทางจากจุดเริ่มต้น (x0, y0) มันจะกลับกัน
จากรูปเราจะเห็นได้ว่าพิกัดของจุดนี้ (x2, y2) สามารถเปลี่ยนได้อย่างไม่สิ้นสุด ตราบใดที่มันเป็นจุดบนแทนเจนต์เสมอกราฟที่วาดโดย Arcto จะไม่เปลี่ยนแปลงเลยเมื่อรัศมีของวงกลมยังคงไม่เปลี่ยนแปลง สิ่งนี้ต้องการความสนใจเป็นพิเศษ
ให้ฉันใช้ความรู้ทางเรขาคณิตที่ฉันไม่สามารถอยู่บนโต๊ะเพื่อตรวจสอบข้อเสนอนี้ เพื่อประโยชน์ในการคำนวณฉันเปลี่ยนมุมระหว่างสองบรรทัดเป็น 90 องศาก่อน
var x0 = 100
y0 = 400
x1 = 500
Y1 = 400
x2 = 500
Y2 = 450;
หลังจากการเปลี่ยนแปลงมันจะเปิด 90 องศา! เรารักษารัศมีของลูกบอลไม่เปลี่ยนแปลง หลังจากสดชื่น:
เราทำให้ Y2 ใหญ่ขึ้นนั่นคือขยายเส้นสัมผัสเปลี่ยนเป็น 550 และรีเฟรช:
เส้นสัมผัสจะขยายออกไป แต่เส้นสีแดงที่วาดโดย Arcto ไม่ได้เปลี่ยนแปลงเลย