একটি চাপ (একটি বৃত্তের) এর জন্য এসভিজি পাথ কীভাবে গণনা করা যায়

191

(200,200), 25 ব্যাসার্ধকে কেন্দ্র করে একটি বৃত্ত দেওয়া হয়েছে, আমি কীভাবে 270 ডিগ্রি থেকে 135 ডিগ্রি এবং 270 থেকে 45 ডিগ্রি পর্যন্ত যেতে পারি এমন একটি খিলাকে কীভাবে আঁকব?

0 ডিগ্রি মানে এটি এক্স-অক্ষের সাথে ডানদিকে থাকে (ডান দিকে) (যার অর্থ এটি 3 টি 'ক্লক পজিশন) 270 ডিগ্রি মানে এটি 12 টা বাজে অবস্থান, এবং 90 এর অর্থ এটি 6 টা বাজে অবস্থান

আরও সাধারণভাবে, একটি বৃত্তের অংশের জন্য একটি তোরণটির জন্য একটি পথ কী

x, y, r, d1, d2, direction

অর্থ

center (x,y), radius r, degree_start, degree_end, direction
svg 
— nonopolarity
সূত্র

উত্তর:

379

@ Wdebeaum এর দুর্দান্ত উত্তরের উপর প্রসারিত, এখানে একটি আটকানো পথ তৈরি করার একটি পদ্ধতি রয়েছে: 

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

ব্যবহার করা

document.getElementById("arc1").setAttribute("d", describeArc(200, 400, 100, 0, 180));

এবং আপনার এইচটিএমএলে

<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />

সরাসরি নমুনা

— opsb
সূত্র
9
এটি সুপার! নোট করুন যে arcSweepভেরিয়েবলটি আসলে large-arc-flagএসভিজি এ প্যারামিটারটি নিয়ন্ত্রণ করে । উপরের কোডে, sweep-flagপরামিতিটির মান সর্বদা শূন্য। arcSweepসম্ভবত কিছু ভালো নামকরণ করা উচিত longArc।
— স্টিভেন গ্রসমার্ক 9'16
ধন্যবাদ @ পকেটলজিক, আপনার পরামর্শ অনুসারে (শেষ পর্যন্ত) আপডেট হয়েছে।
— opsb
2
সত্যিই সহায়ক, ধন্যবাদ। কেবলমাত্র আমি খুঁজে পেলাম যে আপনি নেতিবাচক কোণগুলি ব্যবহার করলে লার্জআরসি লজিক কাজ করে না। এটি কাজ করে -360 থেকে +360: jsbin.com/kopisonewi/2/edit?html,js, আউটপুট
— এক্সকোডো
আমি কেন বিন্দুটিকে একইভাবে সংজ্ঞা দেয় না সে বিষয়টিটি আমি মিস করছি।
— polkovnikov.ph
4
এবং কম পরিমাণ চাপের দৈর্ঘ্য যেমন কাটাতে ভুলবেন না: endAngle - 0.0001তবে তা না হলে পুরো চাপটি রেন্ডার হবে না।
— সাইকে
128

আপনি উপবৃত্তাকার Aআরসি কমান্ডটি ব্যবহার করতে চান । দুর্ভাগ্যক্রমে আপনার জন্য, এটিতে আপনার যে পোলার স্থানাঙ্কগুলি (ব্যাসার্ধ, কোণ) আছে তার চেয়ে শুরু এবং শেষের পয়েন্টগুলির কার্টেসিয়ান স্থানাঙ্কগুলি (x, y) নির্দিষ্ট করা দরকার, সুতরাং আপনাকে কিছু গণিত করতে হবে। এখানে একটি জাভাস্ক্রিপ্ট ফাংশন রয়েছে যা কাজ করা উচিত (যদিও আমি এটি পরীক্ষা করেছি না), এবং যা আমি আশা করি মোটামুটি স্ব-ব্যাখ্যামূলক:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = angleInDegrees * Math.PI / 180.0;
  var x = centerX + radius * Math.cos(angleInRadians);
  var y = centerY + radius * Math.sin(angleInRadians);
  return [x,y];
}

কোন কোণটি কোন ঘড়ি অবস্থানগুলি স্থানাঙ্ক ব্যবস্থার উপর নির্ভর করবে; কেবল অদলবদল করুন এবং / অথবা পাপ / কোস শর্তগুলি প্রয়োজনীয় হিসাবে উপেক্ষা করুন।

চাপ কমান্ডের এই পরামিতি রয়েছে:

rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y

আপনার প্রথম উদাহরণের জন্য:

rx= ry= 25 এবং x-axis-rotation= 0, যেহেতু আপনি একটি বৃত্ত চান এবং উপবৃত্ত চান না। আপনি Mউপরের ফাংশনটি ব্যবহার করে প্রারম্ভিক স্থানাঙ্কগুলি (যা আপনার বোঝা উচিত ) এবং শেষ স্থানাঙ্কগুলি (x, y) উভয়ই গণনা করতে পারবেন , যথাক্রমে (200, 175) এবং প্রায় (182.322, 217.678) ফলন করুন। এখনও অবধি এই প্রতিবন্ধকতাগুলি দেওয়া, এখানে চারটি আরক রয়েছে যা আঁকতে পারে, তাই দুটি পতাকা তাদের মধ্যে একটি নির্বাচন করে। আমি অনুমান করছি আপনি সম্ভবত একটি ক্ষুদ্রতর চাপ আঁকতে চান (অর্থাত্ large-arc-flag= 0), কমমান কোণের (অর্থ sweep-flag= 0) দিকে। সব মিলিয়ে, এসভিজি পাথটি হ'ল:

M 200 175 A 25 25 0 0 0 182.322 217.678

দ্বিতীয় উদাহরণটির জন্য (ধরে নিচ্ছেন যে আপনি একই দিকের দিকে যাচ্ছেন এবং এইভাবে একটি বৃহত চাপটি রয়েছে), এসভিজি পাথটি হ'ল:

M 200 175 A 25 25 0 1 0 217.678 217.678

আবার, আমি এগুলি পরীক্ষা করিনি।

(2016-06-01 সম্পাদনা করুন), যদি @ ক্লকস্মিথের মতো আপনিও ভাবছেন যে তারা কেন এই এপিআইটি বেছে নিয়েছে, বাস্তবায়ন নোটগুলিতে একবার দেখুন । তারা দুটি সম্ভাব্য আর্ক প্যারামিটারাইজেশন, "এন্ডপয়েন্ট প্যারামিটারাইজেশন" (যা তারা বেছে নিয়েছিল) এবং "সেন্টার প্যারামিটারাইজেশন" (যা প্রশ্নটি ব্যবহার করে তার মতো) বর্ণনা করে। "শেষ পয়েন্ট প্যারামিটারাইজেশন" এর বিবরণে তারা বলে:

এন্ডপয়েন্ট প্যারামিটারাইজেশনের অন্যতম সুবিধা হ'ল এটি একটি সামঞ্জস্যপূর্ণ পাথ সিনট্যাক্সের অনুমতি দেয় যাতে নতুন "বর্তমান পয়েন্ট" এর স্থানাঙ্কে সমস্ত পাথ কমান্ড শেষ হয়।

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

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

— wdebeaum
সূত্র
1
দেখতে সুন্দর, পরের চেষ্টা করা হবে। সত্য যে এটি যদি চাপের "বেশি" হয় (যখন চাপটি বৃত্তের অর্ধেকেরও বেশি হয়) এবং large-arc-flag0 থেকে 1 পর্যন্ত টগল করতে হয় কিছু বাগ প্রবর্তন করতে পারে।
— অবিচ্ছিন্নতা
ওহ, এসভিজি আরকেসের জন্য এটি কেন এপিআই?
— ক্লকস্মিত
16

আমি opsb এর উত্তরটি সামান্য পরিবর্তন করেছি এবং বৃত্ত খাতটির জন্য সমর্থন পূরণ করেছি। http://codepen.io/anon/pen/AkoGx

জাতীয়

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 arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

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

    return d;       
}

document.getElementById("arc1").setAttribute("d", describeArc(200, 400, 100, 0, 220));

এইচটিএমএল

<svg>
  <path id="arc1" fill="orange" stroke="#446688" stroke-width="0" />
</svg>
— Ahtenus
সূত্র
5
কোডপেন লিঙ্কটি আমার (ক্রোম) কাজ করছে বলে মনে হচ্ছে না
— রায় হুলহা
চাপটি এসভিজি সীমানার বাইরে টানা হয়। করা SVG উচ্চতা এবং পরিবর্তন বৃদ্ধি centerX, centerYউদাহরণস্বরূপ 100।
— আকরাম
আপনি প্যারেন্ট এসভিজি উপাদানগুলিতে স্পষ্টভাবে একটি ভিউ বক্স সেট করতে পারেন। উদাহরণস্বরূপviewBox="0 0 500 500"
— হেকেন লিড
7

এটি একটি পুরানো প্রশ্ন, তবে আমি কোডটি দরকারী বলে খুঁজে পেয়েছিলাম এবং তিন মিনিটের চিন্তাভাবনাটি সংরক্ষণ করেছি :) সুতরাং আমি @opsb এর উত্তরে একটি ছোট সম্প্রসারণ যুক্ত করছি ।

আপনি যদি এই চাপটি কোনও স্লাইসে রূপান্তর করতে চান (পূরণের অনুমতি দেওয়ার জন্য) আমরা কোডটি কিছুটা সংশোধন করতে পারি:

function describeArc(x, y, radius, spread, startAngle, endAngle){
    var innerStart = polarToCartesian(x, y, radius, endAngle);
  	var innerEnd = polarToCartesian(x, y, radius, startAngle);
    var outerStart = polarToCartesian(x, y, radius + spread, endAngle);
    var outerEnd = polarToCartesian(x, y, radius + spread, startAngle);

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

    var d = [
        "M", outerStart.x, outerStart.y,
        "A", radius + spread, radius + spread, 0, largeArcFlag, 0, outerEnd.x, outerEnd.y,
        "L", innerEnd.x, innerEnd.y, 
        "A", radius, radius, 0, largeArcFlag, 1, innerStart.x, innerStart.y, 
        "L", outerStart.x, outerStart.y, "Z"
    ].join(" ");

    return d;
}

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

var path = describeArc(150, 150, 50, 30, 0, 50)
document.getElementById("p").innerHTML = path
document.getElementById("path").setAttribute('d',path)
<p id="p">
</p>
<svg width="300" height="300" style="border:1px gray solid">
  <path id="path" fill="blue" stroke="cyan"></path>
</svg>
স্নিপেট প্রসারিত করুন

এবং আপনি সেখানে যান!

— SumNeuron
সূত্র
5

@ অপসবির উত্তরগুলি ঝরঝরে, তবে কেন্দ্র পয়েন্টটি সঠিক নয়, তবুও, যেমন জিতিন উল্লেখ করেছেন যে, যদি কোণটি 360 হয় তবে কিছুই কিছুই টানা যায় না।

@ জিতিন ৩ the০ সংখ্যাটি সমাধান করেছেন, তবে আপনি যদি ৩ degree০ ডিগ্রির চেয়ে কম বাছাই করেন তবে আপনার চাপ লুপটি বন্ধ করে একটি লাইন পাওয়া যাবে, এটির প্রয়োজন নেই।

আমি এটি স্থির করেছি এবং নীচের কোডটিতে কিছু অ্যানিমেশন যুক্ত করেছি:

function myArc(cx, cy, radius, max){       
       var circle = document.getElementById("arc");
        var e = circle.getAttribute("d");
        var d = " M "+ (cx + radius) + " " + cy;
        var angle=0;
        window.timer = window.setInterval(
        function() {
            var radians= angle * (Math.PI / 180);  // convert degree to radians
            var x = cx + Math.cos(radians) * radius;  
            var y = cy + Math.sin(radians) * radius;
           
            d += " L "+x + " " + y;
            circle.setAttribute("d", d)
            if(angle==max)window.clearInterval(window.timer);
            angle++;
        }
      ,5)
 }     

  myArc(110, 110, 100, 360);
    
<svg xmlns="http://www.w3.org/2000/svg" style="width:220; height:220;"> 
    <path d="" id="arc" fill="none" stroke="red" stroke-width="2" />
</svg>
স্নিপেট প্রসারিত করুন

— হাসান এ ইউসুফ
সূত্র
4

আমি @ অ্যাটেনাস উত্তরের উপর মন্তব্য করতে চেয়েছিলাম, বিশেষ করে রে হুলাহ মন্তব্য করে কোডেপেন কোনও চাপ দেখায় না, তবে আমার খ্যাতি যথেষ্ট নয়।

এই কোডেপেনটি কাজ না করার কারণ হ'ল এটির এইচটিএমএল শূন্যের স্ট্রোক-প্রস্থের সাথে ত্রুটিযুক্ত।

আমি এটি সংশোধন করে এবং এখানে একটি দ্বিতীয় উদাহরণ যুক্ত করেছি: http://codepen.io/AnotherLinuxUser/pen/QEJmkN ।

এইচটিএমএল:

<svg>
    <path id="theSvgArc"/>
    <path id="theSvgArc2"/>
</svg>

সম্পর্কিত সিএসএস:

svg {
    width  : 500px;
    height : 500px;
}

path {
    stroke-width : 5;
    stroke       : lime;
    fill         : #151515;
}

জাভাস্ক্রিপ্ট:

document.getElementById("theSvgArc").setAttribute("d", describeArc(150, 150, 100, 0, 180));
document.getElementById("theSvgArc2").setAttribute("d", describeArc(300, 150, 100, 45, 190));
— অ্যালেক্স
সূত্র
3

একটি চিত্র এবং কিছু পাইথন

কেবল আরও ভালভাবে স্পষ্ট করার জন্য এবং আরও একটি সমাধান দেওয়ার জন্য। Arc[ A] কমান্ড বর্তমান অবস্থানকে একটি সূচনা পয়েন্ট হিসাবে ব্যবহার করবে যাতে আপনাকে Movetoপ্রথমে [এম] কমান্ড ব্যবহার করতে হবে ।

তারপরে প্যারামিটারগুলি Arcনিম্নলিখিত:

rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, xf, yf

আমরা উদাহরণস্বরূপ নিম্নলিখিত svg ফাইলটি সংজ্ঞায়িত করি:

<svg viewBox="0 0 500 500">
    <path fill="red" d="
    M 250 250
    A 100 100 0 0 0 450 250
    Z"/> 
</svg>
স্নিপেট প্রসারিত করুন

এখানে চিত্র বর্ণনা লিখুন

আপনি Mপ্যারামিটারগুলি xfএবং yfএর সাথে সমাপ্তি বিন্দুর সাথে প্রারম্ভিক পয়েন্টটি সেট করবেন A।

আমরা চেনাশোনাগুলির সন্ধান করছি সুতরাং আমরা মূলত এটি করার rxসমান হয়ে ryগেলাম এখন এটি ব্যাসার্ধের সমস্ত বৃত্তটি সন্ধান করার চেষ্টা করবে rxযা শুরুর এবং শেষের বিন্দুকে ছেদ করে।

import numpy as np

def write_svgarc(xcenter,ycenter,r,startangle,endangle,output='arc.svg'):
    if startangle > endangle: 
        raise ValueError("startangle must be smaller than endangle")

    if endangle - startangle < 360:
        large_arc_flag = 0
        radiansconversion = np.pi/180.
        xstartpoint = xcenter + r*np.cos(startangle*radiansconversion)
        ystartpoint = ycenter - r*np.sin(startangle*radiansconversion)
        xendpoint = xcenter + r*np.cos(endangle*radiansconversion)
        yendpoint = ycenter - r*np.sin(endangle*radiansconversion)
        #If we want to plot angles larger than 180 degrees we need this
        if endangle - startangle > 180: large_arc_flag = 1
        with open(output,'a') as f:
            f.write(r"""<path d=" """)
            f.write("M %s %s" %(xstartpoint,ystartpoint))
            f.write("A %s %s 0 %s 0 %s %s" 
                    %(r,r,large_arc_flag,xendpoint,yendpoint))
            f.write("L %s %s" %(xcenter,ycenter))
            f.write(r"""Z"/>""" )

    else:
        with open(output,'a') as f:
            f.write(r"""<circle cx="%s" cy="%s" r="%s"/>"""
                    %(xcenter,ycenter,r))

আমি লিখেছি যে এই পোস্টে আপনি আরও বিশদ ব্যাখ্যা করতে পারেন ।

— জিএম
সূত্র
3

উত্তর সন্ধানকারীদের জন্য নোট (আমিও কে ছিলাম) - যদি চাপ ব্যবহার বাধ্যতামূলক না হয় তবে পার্ট-সার্কেল আঁকার জন্য আরও সহজ সমাধান stroke-dasharrayএসভিজি ব্যবহার <circle>।

ড্যাশ অ্যারে দুটি উপাদানগুলিতে ভাগ করুন এবং তাদের পরিসরটি পছন্দসই কোণে স্কেল করুন। প্রারম্ভিক কোণটি ব্যবহার করে সামঞ্জস্য করা যায় stroke-dashoffset।

একক কোসাইন দৃষ্টিতে নয়।

ব্যাখ্যা সহ পুরো উদাহরণ: https://codepen.io/mjurczyk/pen/wvBKOvP

— ম্যাকিক জুরসিক
সূত্র
2

ওয়েডবিয়াম দ্বারা অরজিনাল পোলারটোকার্টেসিয়ান ফাংশনটি সঠিক:

var angleInRadians = angleInDegrees * Math.PI / 180.0;

শুরু এবং শেষ পয়েন্টগুলি ব্যবহার করে বিপরীত:

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

বিভ্রান্তিকর (আমার কাছে) কারণ এটি সুইপ-ফ্ল্যাগটিকে বিপরীত করবে। ব্যবহার:

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

সুইপ-ফ্ল্যাগ সহ = "0" "সাধারণ" কাউন্টার-ক্লক-ওয়াইস আরকস আঁকেন, যা আমার মনে হয় আরও সোজা এগিয়ে রয়েছে। Https://developer.mozilla.org/en-US/docs/Web/SVG/ টিউটোরিয়াল / পাঠ্য দেখুন

— উইলি
সূত্র
2

@ Opsb এর উত্তরে সামান্য পরিবর্তন। আমরা এই পদ্ধতিটি সহ একটি সম্পূর্ণ বৃত্ত আঁকতে পারি না। উদাহরণস্বরূপ আমরা যদি (0, 360) দেই তবে এটি কিছুতেই আঁকবে না। সুতরাং এটি সংশোধন করার জন্য একটি সামান্য পরিবর্তন করা হয়েছে। স্কোরগুলি প্রদর্শন করতে এটি দরকারী হতে পারে যা কখনও কখনও 100% এ পৌঁছে যায়।

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 endAngleOriginal = endAngle;
    if(endAngleOriginal - startAngle === 360){
        endAngle = 359;
    }

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

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

    if(endAngleOriginal - startAngle === 360){
        var d = [
              "M", start.x, start.y, 
              "A", radius, radius, 0, arcSweep, 0, end.x, end.y, "z"
        ].join(" ");
    }
    else{
      var d = [
          "M", start.x, start.y, 
          "A", radius, radius, 0, arcSweep, 0, end.x, end.y
      ].join(" ");
    }

    return d;       
}

document.getElementById("arc1").setAttribute("d", describeArc(120, 120, 100, 0, 359));
— জীথিন বি
সূত্র
2

ES6 সংস্করণ:

const angleInRadians = angleInDegrees => (angleInDegrees - 90) * (Math.PI / 180.0);

const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
    const a = angleInRadians(angleInDegrees);
    return {
        x: centerX + (radius * Math.cos(a)),
        y: centerY + (radius * Math.sin(a)),
    };
};

const arc = (x, y, radius, startAngle, endAngle) => {
    const fullCircle = endAngle - startAngle === 360;
    const start = polarToCartesian(x, y, radius, endAngle - 0.01);
    const end = polarToCartesian(x, y, radius, startAngle);
    const arcSweep = endAngle - startAngle <= 180 ? '0' : '1';

    const d = [
        'M', start.x, start.y,
        'A', radius, radius, 0, arcSweep, 0, end.x, end.y,
    ].join(' ');

    if (fullCircle) d.push('z');
    return d;
};
— MrE
সূত্র
2
আপনি ES6 টেমপ্লেট লিটারালস উপকারের মাধ্যমে উদাহরণটিকে আরও স্পষ্ট করে তুলতে পারেন:const d = `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArc} 0 ${end.x} ${end.y}`
— রায় প্রিন্স
0

নির্বাচিত উত্তরের ভিত্তিতে প্রতিক্রিয়া জেএস উপাদান:

import React from 'react';

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

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

const describeSlice = (x, y, radius, startAngle, endAngle) => {

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

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

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

    return d;
};

const path = (degrees = 90, radius = 10) => {
    return describeSlice(0, 0, radius, 0, degrees) + 'Z';
};

export const Arc = (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
    <g transform="translate(150,150)" stroke="#000" strokeWidth="2">
        <path d={path(props.degrees, props.radius)} fill="#333"/>
    </g>

</svg>;

export default Arc;
— লোক
সূত্র
0

উপরের উত্তরের জন্য আপনি জেএসফিডাল কোডটি ব্যবহার করতে পারেন:

https://jsfiddle.net/tyw6nfee/

আপনাকে যা করতে হবে তা হ'ল শেষ লাইন কনসোল.লগ কোড পরিবর্তন করা এবং এটি আপনার নিজস্ব প্যারামিটার দেওয়া:

  console.log(describeArc(255,255,220,30,180));
  console.log(describeArc(CenterX,CenterY,Radius,startAngle,EndAngle))
— জাভাদ ব্যাট
সূত্র
1
আমি কেবলমাত্র একটি ভিজ্যুয়াল ফলাফল আউটপুট করতে আপনার স্নিপেটে কিছু পরিবর্তন করেছি। একবার দেখুন: jsfiddle.net/ed1nh0/96c203wj/3
— ed1nh0
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.