एचटीएमएल 5 में ड्राइंग तीर हेड वक्र

Question

मैं नीचे 3 तीर खींचने का प्रयास कर रहा हूं। मैं शीर्ष पर सही ढंग से आकर्षित कर सकता हूं लेकिन मैं अन्य 2 तीर के सिर को सही ढंग से नहीं खींच सकता। मैं इन तीरों को आकर्षित करने के लिए HTML5 कैनवास का उपयोग कर रहा हूं।

समस्या मेरी arcTo कॉल के साथ होता है। मुझे कुछ कारणों से सही वक्र नहीं मिल सकता है। शायद मुझे बेजियर वक्र का उपयोग करना चाहिए? क्या कोई मुझे बताएगा कि ऊपर दिए गए तीर के सिर का उत्पादन करने के लिए मैं किस HTML5/जावास्क्रिप्ट कार्यों का उपयोग करता हूं?

क्या आप उपर्युक्त तीर के सिर को प्राप्त करने का उदाहरण प्रदान कर सकते हैं?

यहाँ JSFiddle गलत हो रहा क्या दिखाने के लिए: http://jsfiddle.net/hJX8X/

<canvas id="testCanvas" width="400px" height="400px"> 

</canvas> 
<script type="text/javascript"> 
<!-- 
    var canvas = document.getElementById("testCanvas"); 
    var dc  = canvas.getContext("2d"); 

    // Points which are correct (when I draw straight lines its a perfect arrow 
    var width = 400; 
    var height = 100; 
    var arrowW = 0.35 * width; 
    var arrowH = 0.75 * height; 
    var p1  = {x: 0,    y: (height-arrowH)/2}; 
    var p2  = {x: (width-arrowW), y: (height-arrowH)/2}; 
    var p3  = {x: (width-arrowW), y: 0}; 
    var p4  = {x: width,   y: height/2}; 
    var p5  = {x: (width-arrowW), y: height}; 
    var p6  = {x: (width-arrowW), y: height-((height-arrowH)/2)}; 
    var p7  = {x: 0,    y: height-((height-arrowH)/2)}; 

    dc.clearRect(0, 0, canvas.width, canvas.height); 
    dc.fillStyle = "#FF0000"; 

    dc.beginPath(); 

    dc.moveTo(p1.x, p1.y); 
    dc.lineTo(p2.x, p2.y); 
    dc.lineTo(p3.x, p3.y);  
    dc.moveTo(p3.x, p3.y); 
    dc.arcTo(p3.x, p3.y, p4.x, p4.y, 50); 
    dc.moveTo(p4.x, p4.y); 
    dc.arcTo(p4.x, p4.y, p5.x, p5.y, 50); 
    dc.moveTo(p5.x, p5.y); 
    dc.lineTo(p6.x, p6.y); 
    dc.lineTo(p7.x, p7.y); 

    dc.closePath(); 
    dc.fill(); 

    /* Draw arrow without curves 
    dc.moveTo(p1.x, p1.y); 
    dc.lineTo(p2.x, p2.y); 
    dc.lineTo(p3.x, p3.y);  
    dc.lineTo(p4.x, p4.y); 
    dc.lineTo(p5.x, p5.y); 
    dc.lineTo(p6.x, p6.y); 
    dc.lineTo(p7.x, p7.y); 
    */ 
--> 
</script> 

Answer 1

तो हम इस मार्ग है कि एक तीर बनाता है मिल गया है। मैं यह टिप्पणी किए गए है:

dc.moveTo(p1.x, p1.y); 
dc.lineTo(p2.x, p2.y); // end of main block 
dc.lineTo(p3.x, p3.y); // topmost point  
dc.lineTo(p4.x, p4.y); // endpoint 
dc.lineTo(p5.x, p5.y); // bottommost point 
dc.lineTo(p6.x, p6.y); // end at bottom point 
dc.lineTo(p7.x, p7.y); 

हम वास्तव में यह संभव के रूप में समान को छोड़कर हम अंत बिंदु (और पीछे) सिर्फ एक सीधी रेखा की तुलना में एक अलग तरीके से करने के लिए प्राप्त करना चाहते हैं रखना चाहते हैं। हम बिल्कुल पहले को छोड़कर moveTo कमांड का उपयोग नहीं करना चाहते हैं। वह वास्तव में चीजों को परेशान करता है और उन्हें समझने में कठोर बनाता है। मैं arcTo का उपयोग करने से भी बचूंगा जब तक कि आपको वास्तव में एक चाप (जैसे पाई में) का हिस्सा न हो, क्योंकि यह अन्य पथ कमांड की तुलना में काफी उलझन में है।

तो हम क्वाड्रैटिक वक्र का उपयोग करेंगे जो बेजियर की तरह हैं लेकिन केवल एक नियंत्रण बिंदु है, जिससे उन्हें बहुत सरल बना दिया जाता है। वे this (on the left) जैसे नियंत्रण बिंदु निर्दिष्ट करके काम करते हैं।

तो हम एक ही सटीक तीर कोड लेते हैं और एक पतला तीर बनाने के लिए दो वर्गिक बेजियर डालें। हम नियंत्रण बिंदुओं sorta "अंदर" तीर की बड़े पैमाने पर quadratics मोड़ अंदर की ओर बनाने के लिए होना चाहता हूँ:

dc.moveTo(p1.x, p1.y); 
dc.lineTo(p2.x, p2.y); // end of main block 
dc.lineTo(p3.x, p3.y); // topmost point 
// control point is based on p3 (topmost point) 
dc.quadraticCurveTo(p3.x + 20, p3.y + 30, p4.x, p4.y); // endpoint 
// control point is based on p5 (bottommost point) 
dc.quadraticCurveTo(p5.x + 20, p5.y - 30, p5.x, p5.y); // bottommost point 
dc.lineTo(p6.x, p6.y); // end at bottom point 
dc.lineTo(p7.x, p7.y); 

या एक वसा एक है, हम सर्वोच्च और सब से नीचा बिंदु के रूप में एक ही ऊंचाई पर नियंत्रण बिंदु डाल , और अंत बिंदु के रूप में ही एक्स के आसपास:

dc.beginPath(); 
// Draw arrow without curves 
dc.moveTo(p1.x, p1.y); 
dc.lineTo(p2.x, p2.y); // end of main block 
dc.lineTo(p3.x, p3.y); // topmost point 
// control point is based on p3 (topmost point) 
dc.quadraticCurveTo(p3.x + 120, p3.y, p4.x, p4.y); // endpoint 
// control point is based on p5 (bottommost point) 
dc.quadraticCurveTo(p5.x + 120, p5.y, p5.x, p5.y); // bottommost point 
dc.lineTo(p6.x, p6.y); // end at bottom point 
dc.lineTo(p7.x, p7.y); 

लाइव यहाँ उदाहरण: http://jsfiddle.net/Yp7DM/