如何绘制响应形状

Question

返回story/context: 我正在做一个 child activity，其中 child 会听到声音并决定使用什么颜色来绘制毛毛虫的一部分 body。这必须是响应式的。我只使用 HTML、CSS 和 Javascript。 Bootstrap 正在处理我的响应方面，我正在使用 % 或 vmin/vmax 中的措施... 我需要能够分别处理 body 的每个部分，因此我可以根据用户的选择为其着色！

到目前为止： 我尝试使用内部有 20 个 div 的 div，每个部分都有一个图像，我尝试用 CSS 绘制它们；我还尝试了第一种方法，只有一个 div 和里面的所有东西......

问题： 当我调整 window 大小时，到目前为止所有解决方案都失败了。我试过绝对位置，相对位置，...

So：我需要放置最多 20 个圆圈，CSS 或 SVG（最好），可以通过用户交互单独解决（单击它以更改颜色），并在调整 window.

大小时保持其形状

下面我放了一张我想在 html 中重新创建的毛毛虫的图像：

任何提示、指示或 how-to 都会有所帮助。或者如果您对如何解决此问题有任何其他看法...

干杯！

Answer 1

可以通过多种方法使毛毛虫响应。您可以使用 svg、多个 elements/pseudo 元素、框阴影...

这是一个使用多个 box shadows and the appraoch described here : Overlapping circles in CSS with 1 div 的示例，第二个示例使用与视口相关的单位：

DEMO

div{
  width:20vmin; height:20vmin;
  border-radius:50%;
  background:gold;
  margin:0 auto;
  box-shadow: -10vmin   1vmin  0  .2vmin teal,
              -18vmin  .5vmin  0   1vmin pink,
              -25vmin  .8vmin  0  .5vmin tomato,
              -37vmin   1vmin  0  .2vmin green,
              -50vmin   1vmin  0  .5vmin teal,
              -63vmin   1vmin  0  .2vmin aqua;
}

<div></div>

这是一个使用 svg 和圆形元素的示例：

svg{
  display:block;
  width:100%;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
    <circle cx="35" cy="10" r="4" fill="green" stroke="black" stroke-width="0.5" />
    <circle cx="40" cy="9" r="5.1" fill="teal" stroke="black" stroke-width="0.5" />
    <circle cx="46" cy="11" r="5" fill="pink" stroke="black" stroke-width="0.5" />
    <circle cx="50" cy="10" r="4" fill="tomato" stroke="black" stroke-width="0.5" />    
</svg>

Answer 2

您使用图像和绝对定位的方法可能行得通，但使用百分比值 left 属性:

http://jsfiddle.net/0dea7r75/

<div class="catterpillar">
    <img src="http://images.clipartpanda.com/circle-clip-art-yToeE5KLc.png" class="cirlce c1" />
    <img src="http://images.clipartpanda.com/circle-clip-art-yToeE5KLc.png" class="cirlce c2" />
</div>

CSS

.catterpillar {
    width: 50%; // use a percantage for the width of the catterpillar
    position:relative;
}

.cirlce {
    position:absolute;
}

.c1 {
    width:5%; // use percentage for width and left
    left: 0%;
    top: 0;
}

.c2 {
    width:8%; 
    left: 3%;
    top: 5px;
}

Answer 3

因为你想给圆形着色，我们可以使用 DIV 元素 border-radius 50%。您可以将所有内容都保留为百分比，甚至可以通过这种方式模拟圆的边框宽度：

var circles = [
    {
        left: 5,
        top: 5,
        radius: 5
    },
    {
        left: 7.5,
        top: 7,
        radius: 8
    },
    {
        left: 11.5,
        top: 10,
        radius: 8
    },
    {
        left: 14.5,
        top: 14,
        radius: 9
    }
];
var wormBox = $('.worm');
$.each(circles, function(i, data) {
    var circle = $('<div class="circle"><div class="color"></div></div>');
    circle.css({
        'width': data.radius+'%',
        'padding-bottom': data.radius+'%',
        'left': data.left+'%',
        'top': data.top+'%'
    });
    circle.appendTo( wormBox );
});
$('.color').on('click', function(e) {
   // Test color with random
    var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    $(this).css({
        'background-color': randomColor
    });
});

.worm {
    position: relative;
    padding-bottom: 50%;
    border: 1px solid #000;
}
.circle {
    position: absolute;
    display: block;
    border: 1px solid #000;
    border-radius: 50%;
    background: none #000;
}
.color {
    position: absolute;
    top: 3%;
    right: 3%;
    bottom: 3%;
    left: 3%;
    width: 94%;
    background: none #fff;
    border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="worm"></div>

调整浏览器宽度将调整 .worm 内所有元素的大小。单击圆圈将添加随机背景颜色。

请注意：我使用了脚本，但结果是纯粹的HTML/CSS（您只需要脚本来着色）。

另请注意：由于您使用纯 html，因此您还可以为您的蠕虫制作动画。

同样的脚本也在 Fiddle.

如何绘制响应形状

How to draw a responsive shape

css

jquery

svg

responsive-design

css-shapes