【问题标题】:Filling a shape with other small shapes in HTML,CSS,JQuery [closed]用 HTML、CSS、JQuery 中的其他小形状填充形状 [关闭]
【发布时间】:2013-11-27 03:31:27
【问题描述】:

我想使用 html、css 和 jQuery 以随机大小和随机数量的球动态填充形状。

例如在附图中,“图A”是用户添加球时我要填充的自定义形状(当他发表评论时,球实际上是用户图片)。例如 100 个用户发表评论,我想将 100 个随机大小、颜色的球放在“图 A”的形状中。图 A 目前显示了一条线,但是当我用这些圆圈填充它时,这条线将不可见,因此形状会变成圆圈。

知道如何实现吗?或者有人在 HTML、CSS、jQuery 中做过的任何例子?

提前致谢。

【问题讨论】:

  • 圆圈重叠可以接受吗?
  • @fiddler 感谢您的及时评论。重叠的圆圈,实际上没有。我希望他们在圆圈周围有一个小的边距,比如 2px;
  • 你想要达到的目标很难。最好你已经有了一些东西并且你被困在某个点上。一个“最简单”的解决方案是已经放置一个点数组并创建一个重叠算法,它会说 - 如果我的位置被最大的圆圈占据,则从“可用点”数组中排除我最近的点以防止任何较小的圆圈与我重叠”。还有谷歌 检测圆圈碰撞
  • 您愿意为此花费多少天的工作时间?
  • @ThomasW 我猜是 3 到 4 天,或者可能是一周。

标签: javascript php jquery html css


【解决方案1】:

有两种方法可以解决这个问题:

  1. 绘制出圆圈,例如对布局进行硬编码并保持隐藏,直到它们被填充。 cicles 基本上是具有唯一 ID 的占位符。
  2. 如果圆圈是动态创建的,请使用 box2dweb,它是一个内置碰撞检测的物理引擎。它需要一把大锤来敲碎坚果,但它可以让您通过一些引人注目的动画和用户交互来扩展您的项目。圆圈可以拖动,用户可以移动他们的图片等。您可以自己设置重力,以便它们可以落下或漂浮到您构建的包含形状中。 Seth Ladd 有一套全面的在线教程。您还需要对 html canvas 有很好的了解。

【讨论】:

    猜你喜欢
    • 2013-10-21
    • 1970-01-01
    • 1970-01-01
    • 2017-03-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-12
    相关资源
    最近更新 更多