将div的面积缩小为一个圆圈？答案

【问题标题】：Reducing area of div to a circle?将div的面积缩小为一个圆圈？
【发布时间】：2017-01-27 16:51:48
【问题描述】：

虽然赋予 div 相同的高度和宽度并将边框半径设置为 100% 会使 div“看起来”像一个圆形，但实际上它仍然是一个伪装的正方形。如何使 div 成为“真正的”圆圈？出于我的目的，我想让项目只能在我创建的圈子内放置。通过使 div 看起来像一个圆圈，项目仍然可以在边缘放置在圆圈之外。

$(".circle").droppable();
$(".drop").draggable({
  containment: "parent"
  });

.circle
{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 100%;
  display: inline-block;
}
.drop
{
  border: 1px solid black;
  display: inline-block;
}
.drop:hover
{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="circle">
<div class="drop">
  Drop Me<br>
  Outside
</div>
</div>

【问题讨论】：

您必须使用圆形形式的 SVG。 CSS-Tricks 有一个很好的教程：css-tricks.com/using-svg 在 SVG 中，每个节点和线都是一个可以定位、定位和交互的元素，而不是带有圆形边框的方形 div 的伪圆。
以上评论是正确的。使用 CSS，您可以做的最好的事情是使用 clip-path 将元素剪辑成一个圆圈，但我只是尝试了一个示例，即使使用剪辑路径，它也表现出与所讨论的相同的行为。您可能必须使用圆的半径进行一些计算，以找到沿其圆周的点，查看可放置框具有的点，然后采取相应的行动。
你看过答案了吗？

标签： javascript jquery html css

【解决方案1】：

overflow: hidden;
box-sizing: border-box;
padding: 50px;

对于容器会做的事情:) 或者如果你可以用 flexbox 来做，那么

overflow: hidden;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;

按照评论中的建议使用 svg 对象

<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="#FFF" cx="50" cy="50" r="50"/></svg>

【讨论】：

这并不能解决他的问题。 div 仍将被视为拖放的正方形（您仍然可以拖放到 div 的不可见角，这是他不想要的）。如果您希望将元素视为真正的圆圈，则必须使用 SVG。将 div 舍入只会改变视觉效果 - 它不会使实际的 div 舍入。

【解决方案2】：

如果元素超出圆圈，我可以建议手动处理拖动并防止意外行为。添加一些额外的javascript。

以下代码只能处理一个角（左上角）。您可以再添加三个条件来处理所有角落。移动一个小圆圈而不是一个矩形会更好 - 一个圆圈只有一个条件，矩形有四个条件。

// radius of a circle
var radius = 100;

$(".circle").droppable();
$(".drop").draggable({
  containment: "parent",
  drag: function( event, ui ) {
    // position of a left top corner of a rectangle with respect 
    // to a center of a circle 
    var x = ui.position.left - radius,
        y = radius - ui.position.top,
        r = Math.sqrt(x*x + y*y);

    // if distance from a center of a circle is greater than radius
    // move it back into the circle
    if (Math.floor(r) > radius) {
        ui.position.top = radius - Math.round(radius * y / r);
        ui.position.left = Math.round(radius * x / r) + radius;
    }
  }
});

.circle
{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  display: inline-block;
}
.drop
{
  border: 1px solid black;
  display: inline-block;
}
.drop:hover
{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="circle">
<div class="drop">
  Drop Me<br>
  Outside
</div>
</div>

UPD。拖动圆圈的例子被认为是in another question。

【讨论】：