এসভিজির তোরণ পাথ দিয়ে বৃত্ত অঙ্কন

146

সংক্ষিপ্ত প্রশ্ন: এসভিজি পাথ ব্যবহার করে আমরা একটি বৃত্তের 99.99% আঁকতে পারি এবং এটি প্রদর্শিত হয়, তবে এটি যখন একটি বৃত্তের 99.99999999% হয়, তখন বৃত্তটি প্রদর্শিত হবে না। কীভাবে এটি স্থির করা যায়?

নিম্নলিখিত এসভিজি পাথটি একটি চেনাশোনাটির 99.99% আঁকতে পারে: ( http://jsfiddle.net/DFhUF/1381/ এ চেষ্টা করে দেখুন এবং আপনি 4 টি আর্ক বা কেবল 2 টি আরক দেখেন তবে নোট করুন যে এটি যদি হয় তবে এটি হয় ভিএমএলে রেন্ডার হয়েছে, এসভিজি নয়, তবে একই সমস্যা রয়েছে)

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% চাপ দেওয়া হয় "বিশেষ ক্ষেত্রে" দরকার হয়, তবে তা নির্বোধ হতে হবে।

আবার, রাফেলজেএস ব্যবহার করে জসফিডেলের উপর একটি পরীক্ষার কেসটি http://jsfiddle.net/DFhUF/1381/ এ রয়েছে
(এবং এটি যদি আই 8 তে ভিএমএল হয়, তবে দ্বিতীয় চেনাশোনাটিও প্রদর্শিত হবে না ... আপনাকে এটিকে পরিবর্তন করতে হবে 0.01)

হালনাগাদ:

এটি কারণ আমাদের সিস্টেমে স্কোরের জন্য আমি একটি চাপ প্রদান করছি, সুতরাং 3.3 পয়েন্টগুলি একটি বৃত্তের 1/3 পেতে পারে। 0.5 অর্ধ বৃত্ত পায়, এবং 9.9 পয়েন্ট 99% একটি বৃত্ত পেয়েছে। কিন্তু যদি আমাদের সিস্টেমে স্কোরগুলি 9.99 হয়? এটি কি চেনাশোনাটির 99.999% এর কাছাকাছি রয়েছে কিনা তা পরীক্ষা করে দেখতে হবে এবং সেই অনুসারে কোনও arcফাংশন বা কোনও circleফাংশন ব্যবহার করব? তারপরে 9.9987 এর স্কোর সম্পর্কে কী বলা যায়? কোনটি ব্যবহার করবেন? "খুব সম্পূর্ণ চেনাশোনাতে" কী ধরণের স্কোর তৈরি করা উচিত এবং এটি একটি বৃত্ত ফাংশনে স্যুইচ করবে এবং এটি যখন একটি বৃত্তের "নির্দিষ্ট 99.9%" বা 9.9987 স্কোর হয়, তখন আর্ক ফাংশনটি ব্যবহার করা জেনে রাখা হাস্যকর is ।

— 太極者無極而生生
সূত্র

@ এমনিটেক অবশ্যই এটি কাজ করে ... এটি তখন চেনাশোনাগুলির 99% হয় (কেবল মোটামুটি ভাষায়)।

— কেসটি হ'ল

1

এই লিঙ্কগুলির উভয়ই একই জিনিসটিতে যায় এবং এটি সাফারিতে দুর্দান্ত কাজ করে।

— মার্ক বেসে

ঠিক আছে, একই লিঙ্কটি, আমি কেবল লোকদের আগেই পরীক্ষার কেসটি দেখতে চাই তাই আমি প্রশ্নের শুরুতে লিঙ্কটি যুক্ত করি। ডান সাফারি এটি করবে, কত দুর্দান্ত ... ক্রোম এবং ফায়ারফক্স করবে না ... ধরণের অদ্ভুত কোজ সাফারি এবং ক্রোম উভয়ই ওয়েবকিট ... তবে এসভিজি ইঞ্জিন কি ওয়েবকিটের উপর নির্ভর করে?

— অবিচ্ছিন্নতা

@ মার্সিন কেমন লাগছে? আপনি 4 টি আরক বা 2 টি আর্ক দেখতে পাচ্ছেন? আপনি এমনকি কোড তাকান?

— অবিচ্ছিন্নতা

2

র‌্যাফেল.জেএস লোড করে ক্রস-অরিজিন ত্রুটিটি পেতে, রাফেলের সাথে একটি আপডেট করা জেসফিল্ড একটি লাইব্রেরি হিসাবে অন্তর্ভুক্ত: jsfiddle.net/DFhUF/1381

— এরিকোসো

35

এক্সএএমএল এর তোরণটির জন্যও একই। একটি দিয়ে 99.99% চাপটি কেবল বন্ধ করুন Zএবং আপনি একটি বৃত্ত পেয়েছেন!

— টড মেইন
সূত্র

সুতরাং আপনি কি জিসফিল নমুনায় তৃতীয় কেসটি বন্ধ করে এটিকে কাজ করতে পারেন?

— অবিচ্ছিন্নতা

হ্যাঁ, মানটি কমিয়ে 0.0001 করার সাথে। সমস্যাটি বিভিন্ন ব্রাউজারের ওয়েবকিট প্রয়োগের সাথে সম্পর্কিত, নিজেরাই এসভিজি নয় not তবে এইভাবে আপনি এসভিজি / এক্সএএমএলএলস আর্ক উপাদানটিতে একটি বৃত্ত তৈরি করেন।

— টড মেইন

আহ, প্রতারণা, সর্বদা সেরা সমাধান। এখনও 100% কেস পরিচালনা করতে হবে, তবে সম্পূর্ণ পৃথক কোড শাখার চেয়ে কেবল "গোল করে" 99.999% এ নিয়ে যেতে হবে।

— সাইমনআর

কোন ডেমো? এই উত্তরটি পূরণ করে না

— মেডেট টেলিউকিবুলি

@ মেডিটলেকুবিলিউলি প্রশ্নটিতে আপনার উপরের চাপটি রয়েছে, zশেষে একটি যুক্ত করুন এবং সম্পন্ন করুন। আপনাকে জিরোগুলি সরিয়ে ফেলতে হতে পারে, উদাহরণস্বরূপ সর্বশেষতম ক্রোমে 0.0001এটি কাজ করতে আমাকে লিখতে হয়েছিল। আপনি যদি পাথের স্ট্রিংটি কোথায় রাখবেন তা সন্ধান করছেন, MDN- এ পাথগুলি দেখুন ।

— TWiStErRob

415

আমি জানি যে গেমটিটি কিছুটা দেরি হয়েছে, তবে আমি যখন এই প্রশ্নটি নতুন হয়েছিল তখন থেকেই আমার মনে পড়েছিল এবং আমার একই ধরণের দ্বিধা ছিল এবং আমি দুর্ঘটনাক্রমে "সঠিক" সমাধানটি খুঁজে পেয়েছি, যদি কেউ এখনও অনুসন্ধান করে থাকে:

<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), যা এটি রেন্ডার করে "ওহ, আমি ইতিমধ্যে সেখানে আছি, কোন চাপ নেই!"।

আমি যে সমাধানটি দিচ্ছি তার সুবিধাগুলি হ'ল:

চেনাশোনা থেকে সরাসরি একটি পাথে অনুবাদ করা সহজ, এবং
দুটি তোরণ লাইনে কোনও ওভারল্যাপ নেই (যা যদি আপনি চিহ্নিতকারী বা নিদর্শনগুলি ব্যবহার করেন তবে সমস্যা দেখা দিতে পারে)। এটি একটি পরিষ্কার ধারাবাহিক রেখা, যদিও এটি দুটি টুকরো টানা হয়েছে।

যদি তারা কেবল পাঠ্যপথগুলিকে আকারগুলি গ্রহণ করার অনুমতি দেয় তবে এগুলির মধ্যে কোনওটাই আপত্তিজনক নয়। তবে আমি মনে করি তারা সেই সমাধানটিকে এড়িয়ে চলেছে কারণ বৃত্তের মতো আকৃতির উপাদানগুলির প্রযুক্তিগতভাবে কোনও "শুরু" পয়েন্ট থাকে না।

জেএসফিডাল ডেমো: 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
    "
/>

— এন্থনি
সূত্র

1

+1, সূত্রগুলির জন্য ধন্যবাদ। অবশ্যই, প্রথম দুটি কমান্ড একীভূত হতে পারে।

— জন গিয়েজেন

সাধারণভাবে সমাধানটির স্পষ্টতা এবং ব্যবহারিকতার জন্য, তবে বিশেষত 'বৃত্তের মতো আকৃতির উপাদানগুলির জন্য প্রযুক্তিগতভাবে "শুরু" পয়েন্ট থাকে না - সমস্যাটি প্রকাশ করার মতো স্পষ্ট উপায়।

— ডেভিড জন ওয়েলশ

11

আমি মনে করি যে এখানে সমস্যাটি এই নয় যে "ওহ, আমি ইতিমধ্যে সেখানে আছি, কোন চাপ নেই!", 1 হিসাবে বৃহত-চাপ-পতাকা সরবরাহ করে আপনি স্পষ্টভাবে ইঞ্জিনকে বলবেন যে আপনি এটি আরও এগিয়ে যেতে চান। আসল সমস্যাটি হ'ল এখানে অনেকগুলি চেনাশোনা রয়েছে যা আপনার পয়েন্টটি উত্তোলন করার ক্ষেত্রে পুরো বাধা দেয়। এটি ব্যাখ্যা করে যে আপনি যখন 360 * আরকি চান তখন ইঞ্জিন কী করবে তা জানে না। 359.999 এর জন্য এটি কাজ না করার কারণটি হ'ল এটি সংখ্যাগতভাবে অস্থির গণনা, এবং প্রযুক্তিগতভাবে অনুরোধের সাথে মেলে এমন একটি বৃত্ত রয়েছে, তবে সম্ভবত আপনি

— যেভাবে

@ কিবোলেক - আপনি ঠিক বলেছেন, আমি বড়-চাপ এবং ঝাড়ু বন্ধ করে দেওয়া এবং অর্কের কোনও গন্তব্য নেই বলে বিবেচনা করছি। বা খুব কমপক্ষে এটি এমনকি বৃহত্তর-চাপ এবং ঝাড়ু সক্ষম করেও এমন কিছু মৌলিক নকশা ছিল যা একটি চাপকে দুটি পয়েন্টের মধ্যে বক্র হিসাবে সংজ্ঞায়িত করে (যাতে একটি পয়েন্টটি দ্বিগুণ ব্যবহৃত হয়েছিল, এটি এটি একটি ধসে পড়া একক বিন্দু হিসাবে দেখেছিল) আপনার একটি বিন্দুর চারপাশে সম্ভাব্যভাবে ৩ 360০ টি বৃত্ত আঁকবার আর্কের দৃষ্টিভঙ্গিটি বোধগম্য হয়, যদিও কেন্দ্রটিকে সংজ্ঞায়িত করা হলে এটি একটি বৃত্তে পতিত হবে, যে কেন্দ্রটি উপস্থিত থাকলে একটি একক চাপ কী একটি পূর্ণ বৃত্ত তৈরি করতে পারে তা নিয়ে প্রশ্ন উত্থাপন করে?

— অ্যান্থনি

1

"বৃত্তের মতো আকৃতির উপাদানগুলির প্রযুক্তিগতভাবে" শুরু "পয়েন্ট থাকে না। এটি আসলে সত্য নয়। এসভিজি স্পেসটি সম্পূর্ণরূপে নির্দিষ্ট করে যে সমস্ত আকারের প্রারম্ভকালীন অবস্থান। আকারে কাজ করার জন্য ড্যাশ অ্যারেগুলিকে এটি করতে হবে।

— পল লেবিউ

17

অ্যান্টনির সমাধানের প্রসঙ্গে, পথটি পেতে এখানে একটি ফাংশন রয়েছে:

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';
}

— আন্তন মাটিয়াশেভিচ
সূত্র

10

সম্পূর্ণ ভিন্ন পদ্ধতির:

এসভিজিতে একটি চাপকে নির্দিষ্ট করার জন্য পাথগুলিতে বিভক্ত হওয়ার পরিবর্তে, আপনি ছদ্ম কোডে একটি বৃত্ত উপাদানও নিতে পারেন এবং একটি স্ট্রোক-দশাররে নির্দিষ্ট করতে পারেন:

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" />

এর সরলতা হ'ল একাধিক-চাপ-পাথ পদ্ধতির প্রধান সুবিধা (উদাহরণস্বরূপ যখন আপনাকে কেবল কোনও মানতে প্লাগ স্ক্রিপ্ট করা হয় এবং আপনি যে কোনও চাপের দৈর্ঘ্যের জন্য সম্পন্ন করেছেন)

তোরণটি ডানদিকের পয়েন্টে শুরু হয় এবং একটি ঘোরানো ট্রান্সফর্ম ব্যবহার করে প্রায় স্থানান্তরিত হতে পারে।

দ্রষ্টব্য: ফায়ারফক্সের একটি বিজোড় বাগ রয়েছে যেখানে 90 ডিগ্রি বা তারও বেশি ঘূর্ণন এড়ানো হবে। সুতরাং শীর্ষ থেকে তোরণটি শুরু করতে, ব্যবহার করুন:

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

— mvds
সূত্র

সচেতন থাকুন যে এই সমাধানটি কেবলমাত্র সেই ক্ষেত্রেই প্রযোজ্য যেখানে আপনি কোনও ধরণের ফিল ব্যবহার করছেন না এবং আপনার কেবল কোনও বিচ্যুতি ছাড়াই একটি চাপ খণ্ডের প্রয়োজন। যে মুহুর্তে আপনি সেক্টরগুলি আঁকতে চান সেই মুহুর্তে আপনার জন্য একটি নতুন এসভিজি পাথ নোডও প্রয়োজন, যা অন্যথায় কোনও একক পাথ ট্যাগে পরিচালনা করা যেতে পারে।

— এমএক্সএফএফ

@ এমএক্সএফএফ সত্যই নয়, আপনি যদি স্ট্রোক-প্রস্থের চেয়ে দ্বিগুণ হন তবে আপনি খাঁটি খাত পাবেন।

— এমভিডিএস

এর stroke-dasharray="0 10cm 5cm 1000cm"মাধ্যমে রূপান্তরটি এড়ানো সম্ভব

— স্টেনসি

@ স্টেঞ্চি হ্যাঁ, তবে খারাপ দিকটি হল যে আপনার দশাররে একটি প্যারামিটার 0% থেকে 100% পূরণ (যা আমার উদ্দেশ্যগুলির মধ্যে একটি ছিল) স্কেল করতে পারবেন না

— এমভিডিএস

5

অ্যাডোব ইলাস্ট্রেটর এসভিজির মতো বেজিয়ার রেখাচিত্র ব্যবহার করে এবং চেনাশোনাগুলির জন্য এটি চারটি পয়েন্ট তৈরি করে। আপনি দুটি উপবৃত্তাকার চাপ কমান্ড দিয়ে একটি বৃত্ত তৈরি করতে পারেন ... তবে এসভিজিতে একটি বৃত্তের জন্য আমি একটি ব্যবহার করব <circle />:)

— Phrogz
সূত্র

"আপনি দুটি উপবৃত্তাকার চাপ কমান্ড দিয়ে একটি বৃত্ত তৈরি করতে পারেন"? আপনি কি বোঝাতে চেয়েছেন? আপনি কি কেবল একটি ব্যবহার করতে পারবেন না? কমপক্ষে (0,0) থেকে (0.01, 0) এ যাওয়ার মাধ্যমে যাতে এটি কোনও কিছু রেন্ডার করে। ব্যবহারের জন্য circle, পরিবর্তে প্রশ্নে আপডেট দেখুন see

— অবিচ্ছিন্নতা

না, আমি মনে করি না আপনি কেবল একটি ব্যবহার করতে পারেন। আপনি দেখিয়েছেন যে আপনি পারবেন না এবং এইচটিএমএল 5 ক্যানভাস আর্কগুলির সাথে আপনারও একই সমস্যা রয়েছে।

— ফ্রোগজ

আপনার মানে, arcবাম চাপ এবং ডানদিক চাপটি ব্যবহার করে একটি পুরো বৃত্ত তৈরি করতে ব্যবহার করছেন? তো arc

— আরক

2

@ 動靜 rect সঠিক, দুটি তোরণ পাথের প্রয়োজন (বা একটি চক্রের কুৎসিত হ্যাক বেশিরভাগ পথে চলছে এবং তারপরে প্রান্তে সোজা-লাইন পর্যন্ত একটি ক্লোজপথ কমান্ড)।

— ফোগজ

1

ইলাস্ট্রেটর চুষে দেয়। আপনি বেজিয়ার কার্ভগুলি দিয়ে একটি বৃত্ত তৈরি করতে পারবেন না। কেবলমাত্র একটি বৃত্তের কাছাকাছি কিছু, তবে এখনও একটি বৃত্ত নয়।

— অ্যাডিয়াস

4

এটি একটি ভাল ধারণা যে দুটি বৃত্ত আঁকতে দুটি আর্ক কমান্ড ব্যবহার করা।

সাধারণত, আমি একটি সম্পূর্ণ বৃত্ত আঁকতে উপবৃত্ত বা বৃত্ত উপাদান ব্যবহার করি।

— cuixiping
সূত্র

5

এসভিজির একটি প্রধান সীমাবদ্ধতা হ'ল আকারের উপাদানগুলি পাঠ্য পথগুলির জন্য ব্যবহার করা যায় না। যারা সম্ভবত এই প্রশ্নটি দেখেন তাদের প্রত্যেকের জন্য এটি প্রাথমিক প্রেরণা।

— অ্যান্টনি

1

@ অ্যান্থনি তারা এখনই করতে পারে। ফায়ারফক্স কোনও আকারের বিপরীতে পাঠ্যপথ সমর্থন করে। আমার সন্দেহ ক্রোমও করে।

— রবার্ট লঙ্গসন

@ রবার্টলংসন - আপনি একটি উদাহরণ বা উদাহরণের লিঙ্ক সরবরাহ করতে পারেন? কৌতূহল কীভাবে এটি সিদ্ধান্ত নেয় যে পাঠ্য পথটি কোথায় শুরু হয় এবং itতিহ্যবাহী প্রারম্ভিক বিন্দু ব্যতীত যখন এটি আঁকা হয় তখন এটি বাইরের বা ভিতরে (ইত্যাদি) হয় কিনা।

— অ্যান্থনি

@ অ্যান্টনি এসভিজি 2 নির্দিষ্টকরণ দেখুন যেমন ডাব্লু 3.org/TR/SVG2/ shapes.html # সার্কেল এলিমেন্ট , এছাড়াও নতুন পাঠ্যপথ পক্ষের বৈশিষ্ট্য

— রবার্ট লঙ্গসন

4

অ্যান্টনি এবং অ্যান্টনের উত্তরের ভিত্তিতে আমি উত্পন্ন বৃত্তটি সামগ্রিক উপস্থিতিকে প্রভাবিত না করে ঘোরানোর ক্ষমতা অন্তর্ভুক্ত করেছি। আপনি যদি কোনও অ্যানিমেশনের জন্য পথটি ব্যবহার করেন এবং এটি কোথায় শুরু হয় তা আপনার নিয়ন্ত্রণ করা দরকার যদি এটি দরকারী।

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;
}

— রেভস রসকোয়ার
সূত্র

এটাই আমার দরকার ছিল। আমি গ্রেনসক মোর্ফ প্লাগইনটি একটি আয়তক্ষেত্রাকার পথে একটি বৃত্তের পথটি রূপে ব্যবহার করতেছিলাম এবং এটি ঠিক দেখতে দেখতে কিছুটা ঘোরানো দরকার।

— রোবকোজো

3

আমার মতো যারা পথের রূপান্তরটির জন্য একটি উপবৃত্ত বৈশিষ্ট্য সন্ধান করছিলেন:

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`

— যোগী
সূত্র

2

একটি ফাংশন হিসাবে লিখিত, এটি দেখতে এরকম দেখাচ্ছে:

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";
}

— হ্যারি স্টিভেন্স
সূত্র

2

এটি একটি দুর্দান্ত উত্তর! সামান্য সংযোজন: এই পথটি পূর্ব, উত্তর, পশ্চিম, দক্ষিণে আঁকা drawn আপনি যদি চেনাশোনাটি ঠিক এর মতো আচরণ করতে চান তবে <circle>আপনাকে পূর্ব, দক্ষিণ, পশ্চিম, উত্তর দিকে দিক পরিবর্তন করতে হবে:

"M" + cx + "," + cy + "m" + (r) + ",0" + "a" + r + "," + r + " 0 1,1 " + (-r * 2) + ",0" + "a" + r + "," + r + " 0 1,1 " + (r * 2) + ",0"

সুবিধাটি হ'ল stroke-dashoffsetএবং startOffsetএখন একই পদ্ধতিতে কাজ করা।

— লুমিনেড

2

এই উত্তরগুলি অনেক জটিল।

দুটি আর্ক তৈরি না করে এটি করতে একটি সহজ উপায় বা বিভিন্ন স্থানাঙ্ক সিস্টেমে রূপান্তর করা ..

এটি ধরে নিয়েছে আপনার ক্যানভাসের ক্ষেত্রের প্রস্থ wএবং উচ্চতা রয়েছে h।

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

কেবলমাত্র "দীর্ঘ আরক" পতাকাটি ব্যবহার করুন, যাতে পুরো পতাকাটি পূর্ণ হয়। তারপরে আরকসকে 99.9999% পুরো চেনাশোনা তৈরি করুন। দৃশ্যত এটি একই। বৃত্তের ডানদিকের বিন্দুতে কেবল বৃত্তটি শুরু করে সুইপ পতাকাটি এড়িয়ে চলুন (কেন্দ্র থেকে সরাসরি অনুভূমিক এক ব্যাসার্ধ)।

— উদাহরণস্বরূপ পরিসংখ্যান শেখা
সূত্র

1

আরেকটি উপায় হ'ল দুটি কিউবিক বেজিয়ার কার্ভ ব্যবহার করা। এটি আইওএস লোকেরা পকেটএসভিজি ব্যবহার করে যা এসভিজি আরক প্যারামিটারকে স্বীকৃতি দেয় না।

C x1 y1, x2 y2, xy (বা সি 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" />

— ha100
সূত্র

1

আমি এখানে এটি করার জন্য একটি জিসফিল তৈরি করেছি:

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))

লিংক

আপনাকে যা করতে হবে তা হ'ল কনসোল.লগের ইনপুট পরিবর্তন করা এবং কনসোলের ফলাফল পাওয়া

— জাভাদ ব্যাট
সূত্র

এটি ঠিক আমি যা খুঁজছিলাম ছিল। এখানে সেরা উত্তর! এই লোকটিকে উত্সাহিত করুন

— মানস দহলস্ট্রোম