मेरे पास पूर्ण स्थित मंडलियों का एक सेट है जिसे मैं वक्र/मोड़ना चाहता हूं। अब तक मैं उन्हें उनके सूचकांक के आधार पर वक्र करने में कामयाब रहा लेकिन परिणाम मेरी अपेक्षा से थोड़ा अलग है। केंद्रीय वृत्त बहुत दूर तक ऊपर/नीचे जाते हैं और इस प्रकार झुकने का प्रभाव अचानक होता है।

function App() {
  const [parentHeight, setParentHeight] = React.useState(200);
  const [parentWidth, setParentWidth] = React.useState(300);

  const [curve, setCurve] = React.useState(0);

  const childDiameter = 40;

  const rows = [
    { position: 0, seats: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
    { position: 1, seats: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
    { position: 2, seats: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
    { position: 3, seats: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }
  ];

  const getCurve = (idx, length) => {
    return curve / (Math.abs(idx - (length - 1 - idx)) / 8);
  };
  
  return (
    <div>
      <div
        style={{
          position: "absolute",
          width: `${parentWidth}px`,
          height: `${parentHeight}px`,
          top: 100,
          left: 100,
          boxSizing: "border-box",
          display: "flex",
          flexWrap: "wrap"
        }}
      >
        {rows.map((row, rowIdx) => (
          <div>
            {row.seats.map((seat, idx) => (
              <div
                style={{
                  position: "absolute",
                  left: idx * (childDiameter + 10),
                  top:
                    rowIdx * (childDiameter + 10) +
                    getCurve(idx, row.seats.length),
                  backgroundColor: "grey",
                  border: "3px solid grey",
                  borderRadius: "50%",
                  width: childDiameter,
                  height: childDiameter
                }}
              >
                {idx}
              </div>
            ))}
          </div>
        ))}
      </div>
      <input
        id="typeinp"
        type="range"
        min="-200"
        max="200"
        value={curve}
        onChange={evt => setCurve(parseInt(evt.target.value))}
        step="1"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

मुझे पता है कि जब मैं केंद्र में जाता हूं तो मुझे इस स्थानांतरण की भरपाई करने की आवश्यकता होती है, लेकिन मैं यह नहीं समझ सकता कि कैसे। तो मैं और अधिक चिकनी झुकने को कैसे प्राप्त कर सकता हूं? धन्यवाद।

1
Rinat Rezyapov 6 फरवरी 2019, 23:18

1 उत्तर

सबसे बढ़िया उत्तर

यह एक शुद्ध गणित मुद्दा है। आप इस सूत्र curve / (Math.abs(idx - (length - 1 - idx)) / 8) का उपयोग कर रहे हैं, जिसे हम इस मामले में इस तरह लिख सकते हैं A / |2*x - 9| (length 10 के बराबर और A बराबर A / |2*x - 9| curve/8)

अगर x, infinity के करीब है तो f(x), 0 के करीब होगा और अगर 2*x - 9, 0 के करीब है तो f(x) infinity के करीब होगा और हमारे पास यह मध्य मानों (4 या 5) के लिए है।

बेहतर ढंग से समझने के लिए यहां एक उदाहरण दिया गया है:

enter image description here

http://fooplot.com

आप स्पष्ट रूप से देख सकते हैं कि दूसरे की तुलना में 4 या 5 का उपयोग करते समय मान कैसे बड़े होते हैं। मूल रूप से आप अपने तत्वों के साथ उपरोक्त वक्र बना रहे हैं।

बेहतर क्यूवर पाने के लिए और infinity समस्या से बचने के लिए आपको किसी अन्य सूत्र का उपयोग करने की आवश्यकता है।

एक बेहतर सूत्र के नीचे। मैं इस विकल्प के पीछे के गणित को विस्तार से नहीं बताऊंगा लेकिन आप स्पष्ट रूप से देख सकते हैं कि बहुपद (X-5)²+X का ℝ में कोई हल नहीं है, इसलिए 0 (नहीं infinity infinity के बराबर नहीं होगा। f(x)) और यह इस उद्देश्य के लिए आवश्यक वक्र बनाएगा।

enter image description here

function App() {
  const [parentHeight, setParentHeight] = React.useState(200);
  const [parentWidth, setParentWidth] = React.useState(300);

  const [curve, setCurve] = React.useState(0);

  const childDiameter = 40;

  const rows = [
    { position: 0, seats: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
    { position: 1, seats: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
    { position: 2, seats: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
    { position: 3, seats: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }
  ];

  const getCurve = (idx, length) => {
    return curve / ((idx - (length/2))*(idx - length/2) + idx);
  };
  
  return (
    <div>
      <div
        style={{
          position: "absolute",
          width: `${parentWidth}px`,
          height: `${parentHeight}px`,
          top: 100,
          left: 100,
          boxSizing: "border-box",
          display: "flex",
          flexWrap: "wrap"
        }}
      >
        {rows.map((row, rowIdx) => (
          <div>
            {row.seats.map((seat, idx) => (
              <div
                style={{
                  position: "absolute",
                  left: idx * (childDiameter + 10),
                  top:
                    rowIdx * (childDiameter + 10) +
                    getCurve(idx, row.seats.length),
                  backgroundColor: "grey",
                  border: "3px solid grey",
                  borderRadius: "50%",
                  width: childDiameter,
                  height: childDiameter
                }}
              >
                {idx}
              </div>
            ))}
          </div>
        ))}
      </div>
      <input
        id="typeinp"
        type="range"
        min="-200"
        max="200"
        value={curve}
        onChange={evt => setCurve(parseInt(evt.target.value))}
        step="1"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
1
Temani Afif 9 फरवरी 2019, 15:32