如何绘制响应形状[关闭]

Posted 2023-03-06

【中文标题】如何绘制响应形状[关闭]

【英文标题】：How to draw a responsive shape [closed]

【发布时间】：2015-05-28 00:35:02

【问题描述】：

背景故事/背景： 我正在做一个儿童活动，孩子会听到声音并决定用什么颜色来画毛虫身体的一部分。 这必须是响应式的。我只使用 html、CSS 和 javascript。 Bootstrap 正在照顾我的响应方面，我正在使用 %'s 或 vmin/vmax 中的度量... 我需要能够分别处理身体的每个部分，以便我可以根据用户的选择对其进行着色！

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

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

所以：我需要放置最多 20 个圆圈，CSS 或 SVG（最好），可以通过用户交互单独解决每个圆圈（单击它以更改颜色），并且调整窗口大小时保持其形状。

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

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

干杯！

【问题讨论】：

调整窗口大小时会发生什么？你能展示一下你的尝试吗？

对于这个特定的图像，解决方案可能很简单。问题是：你还想画其他图像吗？

感谢@web-tiki 添加我的图片！ FabrizioCalderan - 抱歉，我没有保留之前尝试的任何图像。我会尝试一些东西，测试并继续前进......我可以告诉你的是圆圈（或png）会切换位置。想象一下，我有这样的东西：d0000X（作为 X 的头部和 d 的尾部），我最终可能会拥有：d00 0x0... 或 x 在其他元素之上等等...... skobaljic - 我只是想画画那个图像。但是，该图像不能是单个 png...我需要访问身体的不同部分。

【参考方案1】：

有几种方法可以让您的 Catterpillar 做出响应。您可以使用 svg、多个元素/伪元素、box-shadows...

这是一个使用多个 box shadows 的示例，此处描述的方法：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- />
    <circle cx="40" cy="9" r="5.1" fill="teal" stroke="black" stroke- />
    <circle cx="46" cy="11" r="5" fill="pink" stroke="black" stroke- />
    <circle cx="50" cy="10" r="4" fill="tomato" stroke="black" stroke- />    
</svg>

【讨论】：

非常优雅的解决方案，虽然我很确定 IE 会有问题

@MarioA 谢谢。关于 IE，IE9 及以上版本支持 box-shadows。

我打算发布一个盒子阴影：O 无论如何都很好！ +1)

我最终使用了 svg！盒子阴影看起来很酷，但我不明白如何单独处理每个“阴影”！而且我需要能够单击并更改每一个！非常感谢！

【参考方案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;

【讨论】：

谢谢 web-tiki 和 Mario A。我将在今天和明天尝试这两种方法并接受一种。也感谢您提醒我注意另一篇文章！ Mario A 能否请您详细说明为什么我的左值使用百分比而不是 vmin 或 vmax？再次感谢！

【参考方案3】：

由于您想为圆形着色，我们可以使用边框半径为 50% 的 DIV 元素。您可以将所有内容保持为百分比，甚至可以通过这种方式模拟圆形边框宽度：

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 上也有相同的脚本。

【讨论】：

酷！我喜欢动画它的想法。我没有计划，但也许我可以调整位置，所以每次用户访问该页面时，毛毛虫都会略有不同！干杯人！

我想这样做，但今天没有时间......也许明天。干杯