在HTML,CSS,JQuery中填充其他小形状的形状[关闭]

</ p>

我想用随机大小的&amp;动态填充形状。 随机数量的球使用html,css,&amp; jQuery。</ p>

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

任何想法如何实现 那个? 或者之前有人在HTML,CSS,jQuery之前已经做过的任何例子?</ p>

先谢谢。</ p>
</ div>

展开原文

原文

Filling a shape with other small shapes

I want to fill in a shape dynamically with random sized & random number of balls using html, css, & jQuery.

For example in the figure attached, "Figure A" is the custom shape I want to fill in when a user add a ball (Ball will actually be user pictures when he puts a comment). For example 100 users put their comment, I want to put 100 balls of random size, color in the shape of "Figure A". Figure A is currently showing a line but when I am filling it with these circles, the line won't be visible, so the shape would become from the circles.

Any idea how to achieve that ? or Any example someone has already done that before in HTML, CSS, jQuery ?

Thanks in Advance.

doulian8742
doulian8742 我想3到4天,或者可能是一周。
接近 7 年之前 回复
dongshanjin8947
dongshanjin8947 你愿意花多少天的工作?
接近 7 年之前 回复
doumibi6899
doumibi6899 你想要实现的目标很难。你已经有了更好的东西,而且你在某些方面陷入困境会更好。一个“最简单”的解决方案是已经放置一个点数组并创建一个重叠算法,它会说-如果我的位置是由最大圆圈占据,则从“可用点”数组中排除我最近的点,以防止任何较小的圆重叠我也是。“Google也可以检测圈子碰撞。
接近 7 年之前 回复
duaj39673
duaj39673 谢谢你及时评论。重叠的圆圈,实际上没有。我希望他们在圈子周围有一个小的边距,比如2px;
接近 7 年之前 回复
douwaz34842
douwaz34842 圆圈重叠是否可以接受?
接近 7 年之前 回复

1个回答



我有两种方法可以解决这个问题:</ p>


  1. 映射出来 圈子例如硬编码布局并保持隐藏直到它们被填充。 cicles基本上都是具有唯一ID的占位符。</ li>
  2. 如果圆圈是动态创建的,请使用box2dweb,这是一个内置碰撞检测的物理引擎。它用大锤敲击螺母, 但是它允许你通过一些引人注目的动画和用户交互来扩展你的项目。 圆圈可以拖动,用户可以移动图片等。您可以自己设置重力,这样它们就可以掉落或漂浮到您构建的包含形状中。 Seth Ladd在线提供了一套全面的教程。 你也需要对html画布有一个很好的理解。</ li>
    </ ol>
    </ div>

展开原文

原文

There are two ways I would approach the problem:

  1. Map out the circles eg hard code the layout and keep them hidden until they have been populated. The cicles would basically be place holders with unique ids.
  2. If the cirles are created dynamically, use box2dweb which is a physics engine with collision detection built in. Its taking a sledge hammer to crack a nut, but it would allow you to extend you project with some arresting animation and user interaction. The circles could be draggable and the user could move their picture around etc. You can set the gravity yourself so they can fall or float up into the containing shape you construct. Seth Ladd has a comprehensive set of tutorials online. You will need a good understanding of html canvas too.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问