আমাদের কাছে একটি সূচনা পয়েন্ট (x, y) এবং একটি বৃত্ত ব্যাসার্ধ রয়েছে। এছাড়াও একটি ইঞ্জিন রয়েছে যা বেজিয়ার কার্ভ পয়েন্টগুলি থেকে একটি পথ তৈরি করতে পারে।
আমি কীভাবে বেজিয়ার রেখাচিত্র ব্যবহার করে একটি বৃত্ত তৈরি করতে পারি?
উত্তর:
যেমন ইতিমধ্যে বলা হয়েছে: বেজিয়ার রেখাচিত্রগুলি ব্যবহার করে চেনাশোনাটির সঠিক কোনও প্রতিনিধিত্ব নেই।
বেজিয়ে কার্ভ সঙ্গে: অন্যান্য উত্তর সম্পূর্ণ করার জন্য n
সেগমেন্ট অনুকূল অর্থে নিয়ন্ত্রণ পয়েন্ট দূরত্ব, যে বৃত্ত নিজেই বক্ররেখা মিথ্যার মাঝখানে হয় (4/3)*tan(pi/(2n))
।
সুতরাং 4 পয়েন্ট এটি (4/3)*tan(pi/8) = 4*(sqrt(2)-1)/3 = 0.552284749831
।
কম্প.গ্রাফিক্স.ফাক .াকা
বিষয় 4.04: আমি কীভাবে একটি বৃত্তের সাথে বেজিয়ার বক্ররেখা ফিট করব?
আকর্ষণীয় যথেষ্ট, বেজিয়ার রেখাঙ্কনগুলি একটি বৃত্তের আনুমানিক পরিমাণ আনতে পারে তবে পুরোপুরি কোনও বৃত্তের সাথে ফিট করে না। একটি সাধারণ অনুমানন হ'ল চারটি বেজিয়ার ব্যবহার করে একটি বৃত্ত মডেল করতে, প্রতিটি নিয়ন্ত্রণ সহ একটি দূরত্ব পয়েন্ট করে ডি = আর * 4 * (স্কয়ার্ট (2) -1) / 3 শেষ পয়েন্টগুলি (যেখানে আর বৃত্তের ব্যাসার্ধ হয়) থেকে এবং শেষ বিন্দুতে বৃত্তের দিকে একটি দিক স্পর্শক। এটি বেজিয়ার্সের মিড পয়েন্টগুলি বৃত্তে রয়েছে এবং প্রথম ডেরাইভেটিভ অবিচ্ছিন্ন থাকবে তা নিশ্চিত করবে।
এই অনুমানের মধ্যে রেডিয়াল ত্রুটিটি বৃত্তের ব্যাসার্ধের প্রায় 0.0273% হবে।
মাইকেল গোল্ডাপ, "কিউবিক বহুবচন দ্বারা বিজ্ঞপ্তি তোরণগুলির আনুমানিকতা" কম্পিউটার এডেড জ্যামিতিক ডিজাইন (# 8 1991 পিপি .2727-238)
টর ডোকেন এবং মর্টেন ডাহেলেন, "বক্ররেখা-অবিচ্ছিন্ন বেজিয়ার কার্ভগুলির দ্বারা বৃত্তগুলির ভাল অনুমান" কম্পিউটার এডেড জ্যামিতিক ডিজাইন (# 7 1990 পিপি। 33-41)। http://www.sज्ञानdirect.com/sज्ञान/ article /pii/016783969090019N (নিখরচায় নিবন্ধ)
Http://spencermortensen.com/articles/bezier-c કલ// এ অ-বেতনভিত্তিক নিবন্ধটি দেখুন
নোট করুন যে কিছু ব্রাউজার তাদের ক্যানভাস অঙ্কিত চাপটিতে বেজিয়ার রেখাচিত্র ব্যবহার করে, ক্রোম ব্যবহার করে (বর্তমান সময়ে) একটি 4 সেক্টর পদ্ধতির এবং সাফারি একটি 8 সেক্টর পদ্ধতির ব্যবহার করে, পার্থক্যটি কেবলমাত্র উচ্চ রেজোলিউশনেই লক্ষণীয়, কারণ এটি 0.0273%, এবং এছাড়াও যখন আর্কগুলি সমান্তরালভাবে আঁকা হয় এবং পর্যায়টির বাইরে চলে যায় তখন আপনি সত্যিকারের বৃত্ত থেকে আরসকে দোলনাটি লক্ষ্য করবেন। প্রভাবটি আরও লক্ষণীয় হয় যখন বক্ররেখাটি তার রেডিয়াল কেন্দ্রের চারপাশে অ্যানিমেট করে থাকে, 600px ব্যাসার্ধটি সাধারণত আকার হয় যেখানে এটি কোনও পার্থক্য করবে।
কিছু অঙ্কন এপিআইয়ের সত্যিকারের অর্ক রেন্ডারিং নেই তাই তারা বেজিয়ার কার্ভগুলিও ব্যবহার করে, উদাহরণস্বরূপ ফ্ল্যাশ প্ল্যাটফর্মে কোনও চাপ আঁকানো এপিআই নেই, সুতরাং যে কোনও ফ্রেমওয়ার্কগুলি অর্কগুলি সরবরাহ করে তারা সাধারণত একই বেজিয়ার কার্ভ পদ্ধতির ব্যবহার করে।
নোট করুন যে ব্রাউজারগুলির মধ্যে এসভিজি ইঞ্জিনগুলি একটি ভিন্ন অঙ্কন পদ্ধতি ব্যবহার করতে পারে।
আপনি যে প্ল্যাটফর্মটি ব্যবহার করার চেষ্টা করছেন তা, কীভাবে তোরণ অঙ্কনটি করা হয় তা খতিয়ে দেখার মতো, যাতে আপনি এর মতো ভিজ্যুয়াল ত্রুটিগুলি পূর্বাভাস করতে এবং মানিয়ে নিতে পারেন।
প্রশ্নের উত্তরগুলি খুব ভাল, তাই যুক্ত করার মতো খুব কম। এর দ্বারা অনুপ্রাণিত হয়ে আমি সমাধানটি চাক্ষুষভাবে নিশ্চিত করার জন্য একটি পরীক্ষা করা শুরু করেছিলাম , চারটি বেজিয়ার কার্ভ দিয়ে শুরু করে, কার্ভের সংখ্যা হ্রাস করে। আশ্চর্যরূপে আমি জানতে পেরেছিলাম যে তিনটি বাজিয়ার বক্ররেখাটি বৃত্তটি আমার পক্ষে যথেষ্ট ভাল লাগছিল , তবে নির্মাণটি কিছুটা জটিল। প্রকৃতপক্ষে আমি কালো 1 পিক্সেল-প্রশস্ত বাজিয়ার অনুমানকে একটি লাল 3-পিক্সেল-প্রশস্ত বৃত্তের (ইনস্কেপ দ্বারা উত্পাদিত) উপরে স্থাপন করতে ইনস্কেপ ব্যবহার করেছি। স্পষ্টতার জন্য আমি নীল লাইন এবং বেজিয়ার কার্ভের সীমানা বাক্সগুলি দেখায় পৃষ্ঠগুলি যুক্ত করেছি।
নিজেকে দেখতে, আমি আমার ফলাফল উপস্থাপন করছি:
1-বক্ররেখা গ্রাফ (যা কেবলমাত্র সম্পূর্ণতার জন্য এক কোণে ছিটানো ড্রপের মতো দেখায়):
(আমি এখানে এসভিজি বা পিডিএফ রাখতে চেয়েছিলাম, তবে এটি সমর্থিত নয়)
অনেক উত্তর ইতিমধ্যে কিন্তু আমি একটি চেনাশোনা খুব ভাল ঘনক্ষেত্র bezier আনুমানিক সঙ্গে একটি ছোট অনলাইন নিবন্ধ খুঁজে পেয়েছি। ইউনিট বৃত্তের ক্ষেত্রে সি = 0.55191502449 যেখানে সি অক্ষরের মধ্যবর্তী বিরতি বিন্দু থেকে স্পর্শকাতর নিয়ন্ত্রণ পয়েন্টের দূরত্ব distance
নিয়ন্ত্রণ পয়েন্ট হওয়ায় দুটি মাঝারি স্থানাঙ্কের সাথে ইউনিট বৃত্তের একক চতুর্ভুজ হিসাবে। (0,1),(c,1),(1,c),(1,0)
রেডিয়াল ত্রুটি মাত্র 0.019608% তাই আমি কেবল উত্তরগুলির তালিকায় এটি যুক্ত করেছিলাম।
নিবন্ধটি এখানে পাওয়া যাবে ঘনক বেজিয়ার কার্ভগুলির সাথে প্রায় একটি বৃত্ত
এটা সম্ভব নয়. বেজিয়ার একটি ঘনক (কমপক্ষে ... সর্বাধিক ব্যবহৃত হয়)। একটি চেনাশোনা কিউবিকের সাথে ঠিক প্রকাশ করা যায় না, কারণ একটি বৃত্তের সমীকরণে একটি বর্গমূল থাকে। ফলস্বরূপ, আপনার আনুমানিক হতে হবে।
এটি করার জন্য, আপনাকে আপনার বৃত্তটি এন-ট্যান্টগুলিতে ভাগ করতে হবে (উদাঃ, অ্যাক্ট্যান্টস)। প্রতিটি এন-ট্যান্টের জন্য, আপনি বেজিয়ার বক্ররেখার প্রথম এবং শেষ হিসাবে প্রথম এবং শেষ পয়েন্টটি ব্যবহার করেন। বেজিয়ার বহুভুজের জন্য দুটি অতিরিক্ত পয়েন্ট প্রয়োজন। দ্রুত হওয়ার জন্য, আমি এন-ট্যান্টের প্রতিটি চরম বিন্দুর জন্য স্পর্শকাগুলিকে বৃত্তে নিয়ে যাব এবং দুটি স্পর্শকের ছেদ হিসাবে দুটি পয়েন্ট বেছে নেব (যাতে মূলত আপনার বেজিয়ার বহুভুজটি একটি ত্রিভুজ)) আপনার নির্ভুলতার সাথে মানিয়ে নিতে এন-ট্যান্টের সংখ্যা বাড়ান।
অন্যান্য উত্তরগুলি সত্য সত্য বৃত্ত সম্ভব নয় এই বিষয়টি আবৃত করেছে। এই করা SVG ফাইল দ্বিঘাত বেজিয়ে রেখাচিত্র ব্যবহার করে একটি পড়তা, এবং সর্বনিকটবর্তী বস্তু আপনি পেতে পারেন হল: http://en.wikipedia.org/wiki/File:Circle_and_quadratic_bezier.svg
কিউবিক বেজিয়ার কার্ভগুলি এখানে রয়েছে: http://en.wikedia.org/wiki/File : চেনাশোনা_আর_কুবিক_বেজিয়ার.এসভিজি
যেসব লোকেরা কেবল কোড খুঁজছেন তাদের কাছে:
https://jsfiddle.net/nooorz24/2u9forep/12/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawBezierOvalQuarter(centerX, centerY, sizeX, sizeY) {
ctx.beginPath();
ctx.moveTo(
centerX - (sizeX),
centerY - (0)
);
ctx.bezierCurveTo(
centerX - (sizeX),
centerY - (0.552 * sizeY),
centerX - (0.552 * sizeX),
centerY - (sizeY),
centerX - (0),
centerY - (sizeY)
);
ctx.stroke();
}
function drawBezierOval(centerX, centerY, sizeX, sizeY) {
drawBezierOvalQuarter(centerX, centerY, -sizeX, sizeY);
drawBezierOvalQuarter(centerX, centerY, sizeX, sizeY);
drawBezierOvalQuarter(centerX, centerY, sizeX, -sizeY);
drawBezierOvalQuarter(centerX, centerY, -sizeX, -sizeY);
}
function drawBezierCircle(centerX, centerY, size) {
drawBezierOval(centerX, centerY, size, size)
}
drawBezierCircle(200, 200, 64)
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
এটি 4 বেজিয়ার কার্ভগুলির মধ্যে গঠিত বৃত্ত আঁকতে সহায়তা করে। জেএসে লিখিত তবে সহজেই অন্য কোনও ভাষায় অনুবাদ করা যায়
এসভিজি পাথ ব্যবহার করে যদি কোনও বৃত্ত আঁকার প্রয়োজন হয় তবে যদি না প্রয়োজন হয় তবে বেজিয়ার কার্ভগুলি ব্যবহার করবেন না। পথে আপনি Arc
2 টি অর্ধবৃত্ত তৈরি করতে ব্যবহার করতে পারেন ।
আমি নিশ্চিত নই যে আমার নতুন প্রশ্নটি খোলার দরকার নেই যেহেতু এটি অ্যাপ্রোক্সিমেশন সম্পর্কিত but তবে আমি যে কোনও ডিগ্রির বেজিয়ারের নিয়ন্ত্রণ পয়েন্ট পেতে সাধারণ সূত্রে আগ্রহী এবং আমি বিশ্বাস করি এটি এই প্রশ্নের মধ্যে খাপ খায়। ওয়েবে আমি যে সমস্ত সমাধান পেয়েছি সেগুলি কেবল ঘনকীয় বক্ররেখার জন্য বা অর্থ প্রদান করা হয় বা আমি এমনকি বুঝতে পারি না (আমি গণিতে খুব ভাল না)। সুতরাং আমি সিদ্ধান্ত নিলাম যে এটি নিজে থেকে সমাধান করার চেষ্টা করব। আমি প্রদত্ত কোণের উপর নির্ভর করে একটি বৃত্তের কেন্দ্র থেকে নিয়ন্ত্রণ পয়েন্টের দূরত্ব অধ্যয়ন করছিলাম এবং এখন পর্যন্ত আমি দেখতে পেয়েছি:
যেখানে N
একক বক্ররেখার জন্য নিয়ন্ত্রণ পয়েন্টের সংখ্যা এবং α
এটি বৃত্তের চাপটি কোণ।
দ্বিঘাত বক্ররেখা জন্য এটি সরলীকৃত যাবে বরং একটি অনুমান করা হয় - আমি নিখুঁত মান করেনি নিরূপণ না কিন্তু এটা চমত্কার বন্ধ আছে। এটি 1-2 নিয়ন্ত্রণ পয়েন্টের সাথে ঘনকীয় বক্ররেখার জন্য প্রায় 0.2% ব্যাসার্ধের ত্রুটি প্রদানের সাথে কার্ভের পক্ষে যুক্তিসঙ্গতভাবে ভাল কাজ করে। উচ্চ ডিগ্রি কার্ভগুলির জন্য নির্ভুলতার ক্ষতি হ'ল লক্ষণীয়। 3 কন্ট্রোল পয়েন্টের বক্ররেখার সাথে চতুষ্কোণের অনুরূপ দেখতে স্পষ্টতই আমি কিছু মিস করছি তবে আমি এটি বের করতে পারি না এবং এই পদ্ধতিটি আমার আপাতত আমার প্রয়োজনের সাথে খাপ খায়। এখানে ডেমো রয়েছে ।l ≈ r + r * PI*0.1 * pow(α/90, 2)
PI*0.1
এটিকে মৃতদের থেকে ফিরিয়ে আনার জন্য দুঃখিত, তবে আমি একটি প্রসারণযোগ্য সূত্র নিয়ে এই পৃষ্ঠাটি সহ এই পোস্টটিকে খুব সহায়ক বলে মনে করেছি ।
মূলত, আপনি অবিশ্বাস্যভাবে সহজ সূত্র ব্যবহার করে একটি কাছাকাছি বৃত্ত তৈরি করতে পারেন যা আপনাকে 4 এর চেয়ে বেশি বেজিয়ার কার্ভগুলি ব্যবহার করতে দেয়: Distance = radius * stepAngle / 3
Distance
বেজিয়ার কন্ট্রোল পয়েন্ট এবং তোরণটির নিকটতম প্রান্তের মধ্যবর্তী দূরত্বটি কোথায় , ব্যাসার্ধটি radius
বৃত্তের stepAngle
মধ্যবর্তী কোণ এবং 2π / (বক্রের সংখ্যা) দ্বারা উপস্থাপিত হিসাবে তোরণটির 2 প্রান্তের মধ্যবর্তী কোণ।
সুতরাং এটি একটি শটে আঘাত করতে: Distance = radius * 2π / (the number of curves) / 3
Distance = (4/3)*tan(pi/2n)
। বৃহত সংখ্যক আরাক্সের জন্য এটি প্রায় একই কারণ কারণ tan(pi/2)~pi/2n
উদাহরণস্বরূপ n=4
(যা সর্বাধিক ব্যবহৃত কেস) আপনার সূত্রটি দেয় Distance=0.5235...
তবে অনুকূলটিটি হল Distance=0.5522...
(যাতে আপনার ~ 5% ত্রুটি থাকে)।
এটি একটি ভারী অনুমান যা রেজোলিউশন এবং নির্ভুলতার উপর নির্ভর করে যুক্তিসঙ্গত বা ভয়ানক দেখবে তবে আমি স্কয়ারটি (2) / 2 এক্স ব্যাসার্ধটিকে আমার নিয়ন্ত্রণ পয়েন্ট হিসাবে ব্যবহার করি। আমি একটি দীর্ঘ লম্বা পাঠ্যটি পড়ি কীভাবে সেই নম্বরটি প্রাপ্ত এবং এটি পড়া মূল্যবান তবে উপরের সূত্রটি দ্রুত এবং নোংরা।