การวาดวงกลมด้วยเส้นทางอาร์คของ SVG

คำถามสั้น ๆ : การใช้เส้นทาง SVG เราสามารถวาด 99.99% ของวงกลมและปรากฏขึ้น แต่เมื่อเป็น 99.99999999% ของวงกลมแล้ววงกลมจะไม่ปรากฏขึ้น จะแก้ไขอย่างไร?

เส้นทาง SVG ต่อไปนี้สามารถวาดวงกลมได้ 99.99%: (ลองดูที่http://jsfiddle.net/DFhUF/1381/และดูว่าคุณเห็น 4 arcs หรือ 2 arcs เพียง 2 แต่โปรดทราบว่าถ้าเป็น IE มันจะเป็น แสดงผลใน VML ไม่ใช่ SVG แต่มีปัญหาที่คล้ายกัน)

M 100 100 a 50 50 0 1 0 0.00001 0

แต่เมื่อมันเป็น 99.99999999% ของวงกลมแล้วไม่มีอะไรจะแสดงเลย?

M 100 100 a 50 50 0 1 0 0.00000001 0    

และนั่นก็เท่ากับ 100% ของวงกลม (มันยังคงเป็นส่วนโค้งไม่ใช่หรือเป็นเพียงส่วนโค้งที่สมบูรณ์มาก)

M 100 100 a 50 50 0 1 0 0 0 

จะแก้ไขได้อย่างไร? เหตุผลก็คือฉันใช้ฟังก์ชั่นเพื่อวาดเปอร์เซ็นต์ของส่วนโค้งและถ้าฉันต้องการ "กรณีพิเศษ" ส่วนโค้ง 99.9999% หรือ 100% เพื่อใช้ฟังก์ชั่นวงกลมนั่นจะเป็นเรื่องโง่

อีกกรณีทดสอบบน jsfiddle โดยใช้ RaphaelJS อยู่ที่http://jsfiddle.net/DFhUF/1381/
(และถ้าเป็น VML บน IE 8 แม้แต่วงที่สองจะไม่แสดง ... คุณต้องเปลี่ยนเป็น 0.01)

ปรับปรุง:

นี่เป็นเพราะฉันแสดงส่วนโค้งสำหรับคะแนนในระบบของเราดังนั้น 3.3 คะแนนจะได้ 1/3 ของวงกลม 0.5 รับครึ่งวงกลมและ 9.9 คะแนนรับ 99% ของวงกลม แต่จะเกิดอะไรขึ้นถ้ามีคะแนนที่เป็น 9.99 ในระบบของเรา ฉันต้องตรวจสอบว่ามันอยู่ใกล้กับ 99.999% ของวงกลมหรือไม่และใช้arcฟังก์ชั่นหรือcircleฟังก์ชั่นตามลำดับหรือไม่? ถ้าอย่างนั้นคะแนน 9.9987 ล่ะ จะใช้อันไหนดี? มันไร้สาระที่จะต้องรู้ว่าคะแนนประเภทใดจะจับคู่กับ "วงกลมที่สมบูรณ์เกินไป" และเปลี่ยนเป็นฟังก์ชันวงกลมและเมื่อเป็น "วงกลมบางอัน 99.9%" ของวงกลมหรือคะแนน 9.9987 จากนั้นใช้ฟังก์ชันอาร์ค .

เช่นเดียวกับส่วนโค้งของ XAML เพียงปิดส่วนโค้ง 99.99% ด้วย a Zและคุณจะได้วงกลม!

ฉันรู้ว่ามันช้าไปหน่อยในเกม แต่ฉันจำคำถามนี้ได้ตั้งแต่ตอนที่มันยังใหม่อยู่และฉันมีดิลมาที่คล้ายกันและฉันบังเอิญพบวิธีแก้ปัญหา "ถูกต้อง" หากใครยังมองหา

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

ในคำอื่น ๆ นี้:

<circle cx="100" cy="100" r="75" />

สามารถบรรลุเป็นเส้นทางกับสิ่งนี้:

  <path 
        d="
        M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
  />

เคล็ดลับคือการมีสองโค้งส่วนที่สองยกขึ้นจากจุดที่เหลือแรกและใช้เส้นผ่านศูนย์กลางเชิงลบเพื่อกลับไปยังจุดเริ่มต้นส่วนโค้งเดิม

เหตุผลที่มันไม่สามารถทำได้ครบวงจรในหนึ่งส่วนโค้ง (และฉันแค่คาดเดา) เพราะคุณจะบอกให้วาดส่วนโค้งจากตัวเอง (สมมติว่า 150,150) กับตัวเอง (150,150) ซึ่งทำให้ ในฐานะ "โอ้ฉันมีอยู่แล้วไม่จำเป็นต้องมีส่วนโค้ง!"

ประโยชน์ของโซลูชันที่ฉันเสนอคือ:

1. มันง่ายในการแปลจากวงกลมไปยังเส้นทางโดยตรงและ
2. ไม่มีการทับซ้อนกันในสองเส้นโค้ง (ซึ่งอาจทำให้เกิดปัญหาหากคุณใช้เครื่องหมายหรือรูปแบบ ฯลฯ ) มันเป็นเส้นต่อเนื่องที่สะอาดแม้จะวาดเป็นสองชิ้น

สิ่งเหล่านี้จะไม่เกิดขึ้นถ้าพวกเขายอมให้ทางเดินข้อความยอมรับรูปร่าง แต่ฉันคิดว่าพวกเขากำลังหลีกเลี่ยงการแก้ปัญหาเพราะองค์ประกอบรูปร่างเช่นวงกลมไม่มีเทคนิค "จุดเริ่มต้น"

การสาธิต jsfiddle: http://jsfiddle.net/crazytonyi/mNt2g/

ปรับปรุง:

หากคุณใช้เส้นทางสำหรับการtextPathอ้างอิงและคุณต้องการให้ข้อความแสดงผลที่ขอบด้านนอกของส่วนโค้งคุณจะต้องใช้วิธีการเดียวกัน แต่เปลี่ยนค่าสถานะการกวาดจาก 0 เป็น 1 เพื่อให้ปฏิบัติกับด้านนอกของ เส้นทางเป็นพื้นผิวแทนด้านใน (คิดว่า1,0เป็นคนนั่งอยู่ตรงกลางและวาดวงกลมรอบตัวเองในขณะ1,1ที่บางคนกำลังเดินไปรอบ ๆ ศูนย์ในระยะรัศมีและลากชอล์กอยู่ข้างๆหากมีความช่วยเหลือ) นี่คือรหัสข้างต้น แต่มีการเปลี่ยนแปลง:

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,1 (r * 2),0
    a r,r 0 1,1 -(r * 2),0
    "
/>

ในการอ้างอิงถึงวิธีการแก้ปัญหาของแอนโทนี่นี่คือฟังก์ชั่นที่จะได้รับเส้นทาง:

function circlePath(cx, cy, r){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
}

แนวทางที่แตกต่างอย่างสิ้นเชิง:

แทนที่จะเล่นซอกับพา ธ เพื่อระบุส่วนโค้งใน svg คุณสามารถใช้องค์ประกอบวงกลมและระบุเส้นขีด -dasharray ในโค้ดหลอก:

with $score between 0..1, and pi = 3.141592653589793238

$length = $score * 2 * pi * $r
$max = 7 * $r  (i.e. well above 2*pi*r)

<circle r="$r" stroke-dasharray="$length $max" />

ความเรียบง่ายของมันเป็นข้อได้เปรียบหลักของวิธีการหลายอาร์คพา ธ (เช่นเมื่อสคริปต์คุณเพียงแค่เสียบค่าเดียว

ส่วนโค้งเริ่มต้นที่จุดขวาสุดและสามารถเลื่อนไปรอบ ๆ โดยใช้การแปลงแบบหมุน

หมายเหตุ: Firefox มีข้อผิดพลาดแปลก ๆ ที่มีการหมุนมากกว่า 90 องศาหรือมากกว่านั้น ดังนั้นในการเริ่มต้นส่วนโค้งจากด้านบนใช้:

<circle r="$r" transform="rotate(-89.9)" stroke-dasharray="$length $max" />

Adobe Illustrator ใช้เส้นโค้งเบซิเยร์เช่น SVG และสำหรับวงกลมมันจะสร้างสี่จุด คุณสามารถสร้างวงกลมที่มีสองคำสั่งวงรีรูปไข่ ... แต่แล้วสำหรับวงกลมใน SVG ฉันจะใช้<circle />:)

เป็นความคิดที่ดีที่การใช้คำสั่ง arc สองคำสั่งเพื่อวาดวงกลมทั้งหมด

ฉันมักจะใช้วงรีหรือองค์ประกอบวงกลมเพื่อวาดวงกลมเต็ม

คำตอบของแอนโทนี่และแอนโทนีฉันได้รวมความสามารถในการหมุนวงกลมที่สร้างขึ้นโดยไม่ส่งผลกระทบต่อภาพลักษณ์โดยรวม สิ่งนี้มีประโยชน์หากคุณใช้เส้นทางสำหรับภาพเคลื่อนไหวและคุณต้องควบคุมตำแหน่งที่จะเริ่มต้น

function(cx, cy, r, deg){
    var theta = deg*Math.PI/180,
        dx = r*Math.cos(theta),
        dy = -r*Math.sin(theta);
    return "M "+cx+" "+cy+"m "+dx+","+dy+"a "+r+","+r+" 0 1,0 "+-2*dx+","+-2*dy+"a "+r+","+r+" 0 1,0 "+2*dx+","+2*dy;
}

สำหรับคนอย่างฉันที่กำลังมองหาคุณลักษณะวงรีเพื่อการแปลงเส้นทาง:

const ellipseAttrsToPath = (rx,cx,ry,cy) =>
`M${cx-rx},${cy}a${rx},${ry} 0 1,0 ${rx*2},0a${rx},${ry} 0 1,0 -${rx*2},0`

เขียนเป็นฟังก์ชั่นดูเหมือนว่า:

function getPath(cx,cy,r){
  return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";
}

คำตอบเหล่านี้ซับซ้อนเกินไป

วิธีที่ง่ายกว่าในการทำเช่นนี้โดยไม่ต้องสร้างสองอาร์คหรือแปลงเป็นระบบพิกัดที่ต่างกัน

นี้จะถือว่าพื้นที่ผืนผ้าใบของคุณมีความกว้างและความสูงwh

`M${w*0.5 + radius},${h*0.5}
 A${radius} ${radius} 0 1 0 ${w*0.5 + radius} ${h*0.5001}`

เพียงใช้ธง "ส่วนโค้งยาว" เพื่อให้ธงเต็มเต็ม จากนั้นสร้างส่วนโค้ง 99.9999% เป็นวงกลมเต็ม สายตามันเหมือนกัน หลีกเลี่ยงการใช้ธงปัดโดยเริ่มจากวงกลมที่จุดขวาสุดในวงกลม (รัศมีหนึ่งแนวนอนจากศูนย์กลาง)

อีกวิธีหนึ่งก็คือใช้ Cubic Bezier Curves สองเส้น สำหรับคน iOS ที่ใช้pocketSVGซึ่งไม่รู้จักพารามิเตอร์ svg arc

C x1 y1, x2 y2, xy (หรือ c dx1 dy1, dx2 dy2, dx dy)

พิกัดชุดสุดท้ายที่นี่ (x, y) เป็นตำแหน่งที่คุณต้องการให้เส้นสิ้นสุด อีกสองคนเป็นจุดควบคุม (x1, y1) เป็นจุดควบคุมสำหรับการเริ่มโค้งของคุณและ (x2, y2) สำหรับจุดสิ้นสุดของเส้นโค้งของคุณ

<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0" />

ฉันทำ jsfiddle เพื่อทำที่นี่:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}

function describeArc(x, y, radius, startAngle, endAngle){

var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);

var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");

return d;       
}
console.log(describeArc(255,255,220,134,136))

ลิงค์

สิ่งที่คุณต้องทำคือเปลี่ยนอินพุตของ console.log และรับผลลัพธ์ในคอนโซล