js+svg实现一个svg花朵生成器代码
代码语言:html
所属分类:其他
代码描述:js+svg实现一个svg花朵生成器代码,可调节参数生成不同类型的花朵svg代码,而且svg代码可复制。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: grid; place-items: center; } html, body { background: #334d44; height: 100%; } svg { height: 100vh; width: 100vw; } svg, g { transform-box: fill-box; transform-origin: 50% 50%; } .button { background: #000; border: none; bottom: 2rem; color: #fff; cursor: pointer; font-size: 0.7rem; padding: 1em 2em; position: absolute; right: 2rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .button::after { color: #fff; content: "all done!"; height: 100%; left: 0; position: absolute; top: -1.5em; visibility: hidden; width: 100%; z-index: 0; } .button.copied::after { opacity: 0; transform: translateY(-200%); transition: transform 0.75s ease-out, opacity 0.25s ease-out 0.5s; visibility: visible; } </style> </head> <body > <svg id="flower" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" aria-labelledby="svgTitle svgDesc" role="img"> <title id="svgTitle">A generative illustration</title> <desc id="svgDesc">Click on the image to redraw it!</desc> </svg> <button class="button" type="button">Copy SVG</button> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="module"> import copy from "https://cdn.skypack.dev/copy-to-clipboard@3.3.1"; const utils = { getRandFromRange: function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } }; class Illustration { boxSize; hue = 0; box = { width: 0, height: 0 }; element; svg; constructor(selector, settings) { this.boxSize = 500; this.box = { width: this.boxSize * 4, height: this.boxSize * 4 }; this.settings = settings; this.setSVG(selector); this.createSettingsBox(); this.setupCopyButton(); // window.setInterval(this.draw.bind(this), 500); this.draw(); } setupCopyButton() { this.copy = document.querySelector(".button"); this.copy.addEventListener("click", () => { copy(this.svg.outerHTML); this.copy.classList.add("copied"); }); this.copy.addEventListener("transitionend", () => { this.copy.classList.remove("copied"); }); } addSetting() { folder.add(this.settings[setting], "min", this.settings[setting].minVal, this.settings[setting].maxVal); } createSettingsBox() { this.gui = new dat.GUI(); let temp; for(let setting in this.settings) { let folder = this.gui.addFolder(setting); if (this.settings[setting].min) { folder.add(this.settings[setting], "min", this.settings[setting].minVal, this.settings[setting].maxVal); folder.add(this.settings[setting], "max", this.settings[setting].minVal, this.settings[setting].maxVal); folder.onChange( this.draw.bind(this) ); } else { for(let subsetting in this.settings[setting]) { if (this.settings[setting][subsetting].type) { let subfolder = folder.addFolder(subsetting); subfolder.add(this.settings[setting][subsetting], "min", this.settings[setting][subsetting].minVal, this.settings[setting][subsetting].maxVal).onChange( this.draw.bind(this) ); subfolder.add(this.settings[setting][subsetting], "max", this.settings[setting][subsetting].minVal, this.settings[setting][subsetting].maxVal).onChange( this.draw.bind(this) ); } else { let a = folder.add(this.settings[setting], subsetting); a.onChange( this.draw.bind(this) ); } } } } } setSVG(selector) { this.svg = document.querySelector(selector); this.svg.addEventListener("click", this.draw.bind(this)); this.svg.setAttribute( "viewBox", `0 0 ${this.boxSize * 4} ${this.boxSize * 4}` ); this.svg.style.strokeWidth = 1.5; } reset() { delete this.element; this.element = null; this.svg.innerHTML = ""; } draw() { this.reset(); this.settings.hue.value.value = utils.getRandFromRange( settings.hue.value.min, settings.hue.value.max ); const element = new Flower( this.boxSize * 2, this.boxSize * 2, this.boxSize * 0.5, this.boxSize * 0.75, this.settings ); this.background = new Rect( 0, 0, this.boxSize * 4, this.boxSize * 4, `hsl(${this.settings.hue.value.value}, 20%, 25%)` ).element; this.svg.appendChild(this.background); this.element = element.getDOMElement(); this.svg.appendChild(this.element); } } class Flower { x; y; width; height; hue; element; background; constructor(x, y, width, height, settings) { this.shapes = []; this.x = x; this.y = y; this.width = width; this.height = height; this.settings = settings; this.petalCount = utils.getRandFromRange( settings.petals.value.min, settings.petals.value.max ); this.loopCount = Math.floor(utils.getRandFromRange( settings.layers.value.min, settings.layers.value.max )); this.hue = settings.hue.value.value; this.hueStep = utils.getRandFromRange( settings.hue.step.min, settings.hue.step.max ); this.saturation = utils.getRandFromRange( settings.saturation.value.min, settings.saturation.value.max ); this.saturationStep = utils.getRandFromRange( settings.saturation.step.min, settings.saturation.step.max ); this.lightness = utils.getRandFromRange( settings.lightness.value.min, settings.lightness.value.max ); this.lightnessStep = utils.getRandFromRange( settings.lightness.step.min, settings.lightness.step.max ); this.widthFraction = utils.getRandFromRange( settings.petals.widthScalePerLayer.min, settings.petals.widthScalePerLayer.max ) / 100; this.heightFraction = utils.getRandFromRange( settings.petals.heightScalePerLayer.min, settings.petals.heightScalePerLayer.max ) / 100; this.createFlower(); this.setDOMElement(); } createFlower() { const petalsPeerLoop = Math.floor(this.petalCount / this.loopCount); const angleStep = 360 / petalsPeerLoop; for (let i = 0; i < this.loopCount; i++) { const wBase = this.width * Math..........完整代码请登录后点击上方下载按钮下载查看
网友评论0