个人中心
gpt4 book ai didi

javascript - 随机大小的 SVG 图案单元

转载 作者：行者123 更新时间：2023-11-30 12:25:11 25 4
gpt4 key购买 nike

我有一个华丽的图案 (http://pages.bangor.ac.uk/~abp4d9/)，用户可以在其中移动 slider (用于内圈和花瓣)并且花朵会发生变化。现在有两个大问题我无法解决:1)花瓣被剪掉。我试过改变 SVG 的宽度和高度、模式本身、元素。尝试更改 x 和 y。没什么区别
2) 我想随机化模式单元。我的第一站是圈子。除了随机不同大小的圆圈之外，我希望图案保持不变。我到处搜索，现在我不确定这个想法是否可行？我有一个可以使用的按钮和一个从数组中获取随机数的函数。图案看起来像这张照片(这张有随机的花瓣)enter image description here这是我的带有 SVG 的 HTML:

<body onload="refresh()">
<header>
  <h1>Create your own pattern</h1>
</header>
  <div class="controls">
    <table>
      <tr>
        <td><p>Cicle size: </p></td>
        <td><input id="slider1" type="range" min="5" max="28" onchange="refresh()"/></td>
        <td><p> Random Circle size: </p></td>
        <td><input id="randomCicle" type="button" value="Press here to activate" onClick="randomString();"></td>
      </tr>
      <tr>
        <td><p>Length of petals: </p></td>
        <td><input id="slider2" type="range" min="18" max="60" onchange="refreshPetals()"/></td>
      </tr>
      <tr>
        <td><p>Width of petals: </p></td>
        <td><input id="slider3" type="range" min="3" max="16" onchange="refreshWidth()"/></td>
      </tr>
      <tr>
      </tr>
    </table>
  </div>
 <div class="square">
  <svg width="520" height="520">
    <defs>
      <pattern id="pattern" x="5" y="5" width="140" height="140"
        patternUnits="userSpaceOnUse"
        patternTransform="rotate(45)">
        <path d="M 0 106 156 106" stroke="black" stroke-width="2" />
        <g width="140" height="140">
          <ellipse id="petal" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white"/>
          <ellipse id="petal1" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(35, 60, 40)"/>
          <ellipse id="petal2" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(70, 60, 40)"/>
          <ellipse id="petal3" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(105, 60, 40)"/>
          <ellipse id="petal4" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(140, 60, 40)"/>
        </g>
        <circle id="circleP" cx="60" cy="40" r="10" stroke="black" stroke-width="2" fill="white"/>
      </pattern>
    </defs>
    <rect x="10" y="10" width="500" height="500" stroke="black" stroke-width="4" fill="url(#pattern)"/>
  </svg>
</div>

和 JS:

  function refresh(){
   var slider1 = parseInt(document.getElementById("slider1").value);
   document.getElementById("circleP").setAttribute("r", slider1)
  }
  function refreshPetals(){
   var slider2 = parseInt(document.getElementById("slider2").value);
   document.getElementById("petal").setAttribute("rx", slider2)
   document.getElementById("petal1").setAttribute("rx", slider2)
   document.getElementById("petal2").setAttribute("rx", slider2)
   document.getElementById("petal3").setAttribute("rx", slider2)
   document.getElementById("petal4").setAttribute("rx", slider2)
  }
  function refreshWidth(){
   var slider3 = parseInt(document.getElementById("slider3").value);
   document.getElementById("petal").setAttribute("ry", slider3)
   document.getElementById("petal1").setAttribute("ry", slider3)
   document.getElementById("petal2").setAttribute("ry", slider3)
   document.getElementById("petal3").setAttribute("ry", slider3)
   document.getElementById("petal4").setAttribute("ry", slider3)
  }
 function test() {
var values = [5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28];
var valueToUse = values[Math.floor(Math.random() * values.length)];
}

最佳答案

回答你问题的第一部分:花瓣被剪掉是因为你定义了一个宽度为 140 高度为 140 的图案区域，而不是将花卉图放在该区域的中间 (x=70, y =70)，你把它放在 (x=60, y=40)。结果，花瓣从图案区域的顶部脱落。

我已经在这里为您解决了这个问题:

function refresh(){
   var slider1 = parseInt(document.getElementById("slider1").value);
   document.getElementById("circleP").setAttribute("r", slider1)
}
function refreshPetals(){
   var slider2 = parseInt(document.getElementById("slider2").value);
   document.getElementById("petal").setAttribute("rx", slider2)
   document.getElementById("petal1").setAttribute("rx", slider2)
   document.getElementById("petal2").setAttribute("rx", slider2)
   document.getElementById("petal3").setAttribute("rx", slider2)
   document.getElementById("petal4").setAttribute("rx", slider2)
}
function refreshWidth(){
   var slider3 = parseInt(document.getElementById("slider3").value);
   document.getElementById("petal").setAttribute("ry", slider3)
   document.getElementById("petal1").setAttribute("ry", slider3)
   document.getElementById("petal2").setAttribute("ry", slider3)
   document.getElementById("petal3").setAttribute("ry", slider3)
   document.getElementById("petal4").setAttribute("ry", slider3)
}
function test() {
   var values = [5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28];
   var valueToUse = values[Math.floor(Math.random() * values.length)];
}
$(refresh);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>Create your own pattern</h1>
</header>
  <div class="controls">
    <table>
      <tr>
        <td><p>Cicle size: </p></td>
        <td><input id="slider1" type="range" min="5" max="28" onchange="refresh()"/></td>
        <td><p> Random Circle size: </p></td>
        <td><input id="randomCicle" type="button" value="Press here to activate" onClick="randomString();"></td>
      </tr>
      <tr>
        <td><p>Length of petals: </p></td>
        <td><input id="slider2" type="range" min="18" max="60" onchange="refreshPetals()"/></td>
      </tr>
      <tr>
        <td><p>Width of petals: </p></td>
        <td><input id="slider3" type="range" min="3" max="16" onchange="refreshWidth()"/></td>
      </tr>
      <tr>
      </tr>
    </table>
  </div>
 <div class="square">
  <svg width="520" height="520">
    <defs>
      <pattern id="pattern" x="0" y="0" width="140" height="140"
        patternUnits="userSpaceOnUse"
        patternTransform="rotate(45)">
        <path d="M0 139H140" stroke="black" stroke-width="2" />
        <g width="140" height="140">
          <ellipse id="petal" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white"/>
          <ellipse id="petal1" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(36, 70, 70)"/>
          <ellipse id="petal2" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(72, 70, 70)"/>
          <ellipse id="petal3" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(108, 70, 70)"/>
          <ellipse id="petal4" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(144, 70, 70)"/>
        </g>
        <circle id="circleP" cx="70" cy="70" r="10" stroke="black" stroke-width="2" fill="white"/>
      </pattern>
    </defs>
    <rect x="10" y="10" width="500" height="500" stroke="black" stroke-width="4" fill="url(#pattern)"/>
  </svg>
</div>

但是，您不能随机化花朵的大小。该模式只会以一种尺寸呈现它们。如果你想要不同大小的花朵，你也可以单独绘制它们而不是使用 SVG 图案。使用一点 Javascript 应该不会太难。试一试，如果遇到困难，请在此处发布另一个问题。

关于javascript - 随机大小的 SVG 图案单元，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29652150/

25 4 0
文章推荐： swift - 从 imagePickerController 选择的图像占据整个屏幕，而不是适合 UI ImageView [Swift]
文章推荐： ios - MyScript 如何将 mathwidget 添加为另一个 UIViewController 中的 subview
文章推荐： c# - 使用子类反序列化 JSON 数据
文章推荐： javascript - 选中复选框将类添加到 child
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com