如何使用 konva react 将圆圈制作成表格答案

【问题标题】：How to make circle as table using konva react如何使用 konva react 将圆圈制作成表格
【发布时间】：2020-08-10 02:12:21
【问题描述】：

需要帮助，如何制作像这样的自定义圈子enter image description here

如果我添加一个小圆圈作为椅子，它将调整到中间圆圈（大圆圈）。我正在使用 konvaJS。提前致谢。

【问题讨论】：

你在做什么努力，你的努力在哪里？？
因为我想在eventbrite网站eventbrite.com/create/seat-map987654322@
思路是这样的，大圆圈一个作为桌子，小圆圈一个作为椅子，椅子（小圆圈）由用户输入椅子数量添加..更多椅子，它会调整到大圆圈（桌子）并保持圆形
您好 - 如果我的答案是正确的，请您点击勾号将其标记为正确答案。标记正确或最有帮助的答案有助于其他人判断其相关性并将积分奖励给回答者。谢谢。

标签： reactjs konvajs

【解决方案1】：

这是一个简单的 JS 解决方案，用于解决有关添加座位和适当移动当前座位的问题。数学很简单 - 将 360 除以座位数以获得每个座位的角度，然后通过角度数学计算每个座位的 X、Y 位置，注意 JS Math 库以弧度工作。希望你能把它变成 reactjs。

截取最佳观看全屏。也可以在CodePen

// These are the main parameters of the image
let seats = 4, tableRadius = 150;
const radmult = Math.PI / 180;

// Set up a stage
let stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: 500
      }),

    // add a layer to draw on
    seatLayer = new Konva.Layer(),
    

    tableLayer = new Konva.Layer(),

    // Add a circle to act as the table
    tableCircle = new Konva.Circle({name: 'table', x: 200, y: 200, radius: 120, fill: 'magenta', stroke: 'black', strokeWidth: 4 });

    // Add a circle to act as a positioner for the seats.
    seatPos = new Konva.Circle({name: 'seatPos', x: 200, y: 200, radius: 150, fill: 'transparent', stroke: 'black', strokeWidth: 4 });
    
 tableLayer.add(tableCircle);
 seatLayer.add(seatPos);
 stage.add(seatLayer);
 stage.add(tableLayer);

// function to lay out the seats
function layout() {

  let angle = 360 / (seats);

  // Clear current seats
  var shapes = seatLayer.find('.seat').destroy();
  
  // draw new seats
  for (var i = 0; i < seats; i++){

    let posAngle = angle * i,
        x = 200 + (tableRadius * Math.sin(posAngle * radmult)), 
        y = 200 + (tableRadius * Math.cos(posAngle * radmult));

    let c = new Konva.Circle({name: 'seat', x: x, y: y, radius: 40, fill: 'cyan', stroke: 'black', strokeWidth: 4});
      
    seatLayer.add(c);

  }
  
  seatLayer.draw();
}

// initial draw so we can see something
layout();
stage.draw()

// Listeners on buttons to add & remove seats
$('#add').on('click', function(){
  
  seats = seats + 1;
  layout();
  
})

$('#remove').on('click', function(){
  
  if (seats > 0) {
    seats = seats - 1;
    layout();
  }
  
})

body {
  margin: 10;
  padding: 10;
  overflow: hidden;
  background-color: #f0f0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/7.0.3/konva.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/konva@^3/konva.min.js"></script>
<p>
  <button id = 'add'>Add seat</button>
  <button id = 'remove'>Remove seat</button>

</p>
<div id="container"></div>

【讨论】：