Mam macierz kwadratową z określoną liczbą wierszy i kolumn, jestem w stanie narysować kwadrat z danymi wejściowymi wierszy i kolumn, ale nie jestem pewien, jak narysować okrąg poza nim. Próbowałem z następującą formułą, ...

0
user7824485 28 czerwiec 2021, 09:46

4 odpowiedzi

Najlepsza odpowiedź

To, co musisz zrobić, to w zasadzie okrąg, który zawsze tam jest, a kiedy chcesz go wyświetlić, po prostu robisz obramowanie na czarno zamiast przezroczystości i ustawiasz średnicę na

 square root of height **2 + width**2

Gdy wywołasz funkcję drawCircle(), zobaczysz okrąg

function drawCircle(){
    var circle = document.getElementById('circle');

    var height = Math.sqrt((myTableDiv.offsetHeight**2)*2);
    var width = Math.sqrt((myTableDiv.offsetWidth**2)*2);

    circle.style.height = `${height}px`;
    circle.style.width = `${width}px`;
    
    circle.style.borderColor = 'black';
}
<div id="circle">
    <div id="container">

    </div>
</div>
<style>
    #circle{
        display: grid;
        width: max-content;
        place-items: center;
        border: 1px solid transparent;
        border-radius: 50%;
    }
</style>
-1
Yishay 666 28 czerwiec 2021, 08:06

Po prostu dodaj pseudoelement do #kontenera, dodaj border i border-radius do pseudoelementu, a na koniec przeskaluj go o 1.4. To zadziała, nawet jeśli stół nie jest idealnym kwadratem.

UWAGA: Zignoruj ​​dodany kod javascript, który służy wyłącznie do zaprezentowania implementacji CSS.

var myTableDiv = document.getElementById("container");

function createTable(cellSize) {
  var table = document.createElement('table');
  table.border = '1';

  var tableBody = document.createElement('tbody');
  table.appendChild(tableBody);


  for (var i = 0; i < 5; i++) {
    var tr = document.createElement('tr');
    tableBody.appendChild(tr);

    for (var j = 0; j < 5; j++) {
      var td = document.createElement('td');
      td.width = cellSize;
      td.height = cellSize;
      td.appendChild(document.createTextNode("")); //put value inside box
      tr.appendChild(td);
    }
  }
  myTableDiv.appendChild(table);
}

document.getElementById("range").addEventListener('input', (event) => {
  let newCellSize = event.currentTarget.value + 'px';
  myTableDiv.innerHTML = "";
  createTable(newCellSize);
});

createTable('15px');
#container {
  display: inline-block;
  position: relative; /* so the pseudo-element doesn't escape the container */
  
  /* Place in the middle of the page - ignore this */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#container::before {
  content: '';
  position: absolute;
  left:   0px;
  right:  0px;
  top:    0px;
  bottom: 0px;
  
  border: 2px solid;
  border-radius: 50%;
  transform: scale(1.4);
}
<input id="range" type="range" value="15" min="5" max="50">

<div id="container">
</div>
0
Rickard Elimää 28 czerwiec 2021, 09:11

To jest możliwe. Potrzebujesz jeszcze jednego kontenera, który owinie Twój element #container i stwórz kolejny div, który będzie naszym kręgiem. Zamieściłem dla Ciebie kilka komentarzy w kodzie JS.

var myTableDiv = document.getElementById("container");

var table = document.createElement('table');
table.border = '1';

var tableBody = document.createElement('tbody');
table.appendChild(tableBody);

for (var i = 0; i < 5; i++) {
  var tr = document.createElement('tr');
  tableBody.appendChild(tr);

  for (var j = 0; j < 5; j++) {
    var td = document.createElement('td');
    td.width = '15px';
    td.height = '15px';
    td.appendChild(document.createTextNode("")); //put value inside box
    tr.appendChild(td);
  }
}
myTableDiv.appendChild(table);

let styles = document.querySelector(".circle");

//To set the dimension of main container as that of matrix
document.querySelector(".main").style.width = (2**0.5) * myTableDiv.getBoundingClientRect().height+"px";
document.querySelector(".main").style.height = (2**0.5) *  myTableDiv.getBoundingClientRect().height+"px";

document.querySelector(".main").style.margin = "100px";  //Optional: Just to make sure you can see the circle properly

//Styling the circle
styles.style.width = "100%";
styles.style.height = "100%";
styles.style.borderRadius = "50%";
styles.style.zIndex = "-1";
styles.style.border = "1px solid #000000";

//To position the circle over the matrix
styles.style.transform = "translateY(-85%) translateX(-15%)";
<div class="main">
  <div id="container"></div>
  <div class="circle"></div>
</div>
0
TechySharnav 28 czerwiec 2021, 08:24

Jeśli twój kwadratowy stół ma szerokość 𝑤, wzór na promień koła 𝑟 to:

𝑟 = 𝑤 / √2

Proponuję narysować siatkę i okrąg za pomocą elementu canvas:

let centerX = 300;
let centerY = 80;
let cellSize = 20;
let cellCount = 5
let radius = cellSize * cellCount / Math.sqrt(2);

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
drawSquareGrid(centerX, centerY, cellCount, cellSize);
drawCircle(centerX, centerY, radius);

function drawLine(fromX, fromY, toX, toY) {
    ctx.beginPath();
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    ctx.stroke();
}

function drawSquareGrid(centerX, centerY, cellCount, cellSize) {
    let startX = centerX - cellSize * cellCount / 2;
    let startY = centerY - cellSize * cellCount / 2;
    for (let i = 0; i <= cellCount; i++) {
        drawLine(startX + i * cellSize, startY, startX + i * cellSize, startY + cellCount * cellSize);
        drawLine(startX, startY + i * cellSize, startX + cellCount * cellSize, startY + i * cellSize);
    }
}

function drawCircle(centerX, centerY, radius) {
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.stroke();
}
<canvas width="500", height="180"></canvas>
1
trincot 28 czerwiec 2021, 08:44