使用React实现的美丽数学模式图形

SVG/ReactJS math patterns

react, math, pattern

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 9633
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class CopyToClipboard extends React.Component {
	copy() {
		const textarea = this.textarea;
		let { text, onCopy, silent } = this.props;
		silent =
			typeof silent === "boolean" ||
			silent.toLowerCase() == "true" ||
			silent == "1";
		textarea.value = onCopy.call(this, text);
		textarea.select();

try {
			const successful = document.execCommand("copy");
			const msg = successful ? "successful" : "unsuccessful";
			if (!silent) {
				prompt("Copying text command was " + msg, textarea.value);
			}
		} catch (err) {
			alert(`Oops, unable to copy (${err.message})`);
		}
	}
	render() {
		const { label } = this.props;
		const attr = {
			style: this.props.style,
			className: this.props.className,
		}
		return (
			<p>
				<button onClick={() => this.copy()} {...attr}>
					{label}
				</button>
				<textarea
					ref={textarea => {
						this.textarea = textarea;
					}}
					style={{ position: "absolute", top: "-1000px" }}
				/>
			</p>
		);
	}
}
CopyToClipboard.defaultProps = {
	label: "Copy",
	silent: false,
	text:
		"Set prop 'text' to your text to copy, or add call back function 'onCopy' which returns the value to copy",
	onCopy: txt => {
		// return "Nothing to copy "+new Date();
		return txt;
	}
};

CopyToClipboard.propTypes = {
	className: React.PropTypes.string,
	style: React.PropTypes.object,
	label: React.PropTypes.string,
	text: React.PropTypes.string,
	onCopy: React.PropTypes.func,
	silent: React.PropTypes.oneOfType([
		React.PropTypes.string,
		React.PropTypes.boolean
	])
};

class MySVG extends React.Component {
	toRadians(angle) {
		return angle * (Math.PI / 180);
	}
	inverse() {
		document.body.classList.toggle("inverse");
	}

getSvg(text) {
		return this.refs.svg.innerHTML;
	}
	render() {
		var canvas = {
			width: document.body.clientWidth * 0.95,
			height: document.body.clientHeight * 0.95
		};
		if (canvas.width < canvas.height) {
			canvas.height = canvas.width;
		} else {
			canvas.width = canvas.height;
		}
		var rx = canvas.width / 2,
			ry = canvas.height / 2,
			sub = 1,
			angle = 0,
			subtract = parseFloat(this.props.subtract),
			accelerate = parseFloat(this.props.accelerate),
			maxrun = 20160,
			timeout = false,
			count = 0,
			d = "";

var graphData = [],
			startTime = new Date();
		var controlledTimeout = setTimeout(function runForMaxTime() {
			timeout = true;
		}, 2000);

do {
			sub += subtract;
			angle += parseFloat(this.props.step);
			var x = Math.cos(this.toRadians(angle)) * (rx - sub) + rx;
			var y = Math.sin(this.toRadians(angle)) * (ry - sub) + ry;
			d += d == ""
				? "M " + x + " " + y + " " + this.props.type + " "
				: x + " " + y + " ";
			subtract = subtract + accelerate;
			maxrun--;
			count++;
		} while (!timeout && sub - subtract < rx && maxrun > 0);
		clearTimeout(controlledTimeout);
		var renderTime = new Date() - startTime;
		return (
			<div>
				<div className="info">
					<div>Click to change colors</div>
					<CopyToClipboard label="Copy SVG" onCopy={this.getSvg.bind(this)} />
					<div>Rendered in {renderTime} ms</div>
				</div>
				<div ref="svg">
					<svg
						onTouchStart={this.inverse}
						onClick={this.inverse}
						width={canvas.width}
						height={canvas.height}
						viewBox={`0 0 ${canvas.width} ${canvas.height}`}
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns_xlink="http://www.w3.org/1999/xlink"
					>

<path
							d={d}
							stroke-width=".1px"
							stroke={maxrun > 0 ? "rgba(0,0,0,.4)" : "rgba(255,0,0,.4)"}
							fill="none"
						/>
					</svg>
				</div>
			</div>
		);
	}
}

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			type: this.props.type || "L",
			step: parseFloat(this.props.step),
			subtract: parseFloat(this.props.subtract),
			accelerate: parseFloat(this.props.accelerate)
		};
		this.update.bind(this);
	}
	update(example) {
		let type = this.refs.type.value;
		let step = this.refs.step.value;
		let subtract = this.refs.subtract.value;
		let accelerate = this.refs.accelerate.value;
		var temp = example.target.value.split(",");
		if (temp.length === 4) {
			type = temp[0] || "L";
			step = parseFloat(temp[1]);
			subtract = parseFloat(temp[2]);
			accelerate = parseFloat(temp[3]);
		}
		this.setState({
			type: type,
			step: step,
			subtract: subtract,
			accelerate: accelerate
		});
	}
	toggle() {
		document.body.classList.toggle("inverse");
	}
	render() {
		return (
			<div>
				<div className="controls">
					<label>
						<select onChange={this.update.bind(this)}>
							<option value="L,226.75,0.14,0.002">Flower</option>
							<option value="C,90,0.362,0">Curve 1</option>
							<option value="C,225,-0.011,0.002">Curve 2</option>
							<option value="C,120,-0.088,0.067">Curve 3</option>
							<option value="Q,252,-4.928,.2">Quadratic 1</option>
							<option value="Q,90.75,0.362,0">Quandratic 2</option>
							<option value="Q25.75,0.351,0">Quandratic 3</option>
							<option value="L,225,-0.011,0.002">Line 1</option>

<option value="L,166.5,0,0.05">Beautiful 1</option>
							<option value="L,127,0.193,0">A.S.Hansen</option>
							<option value="L,306.75,0.197,0">Beautiful 2</option>
							<option value="L,206.75,2.061,0">Beautiful 3</option>
							<option value="L,185.75,0.14,0.002">Beautiful 4</option>
							<option value="L,130.75,0.247,0">Beautiful 5</option>
							<option value="L,288.25,0.14,0.002">Beautiful 6</option>
							<option value="L,44.5,0,0.022">Classic 1</option>
							<option value="L,157.5,0.237,0">Classic 2</option>
							<option value="L,188.5,0.247,0">Intense 1</option>
							<option value="L,179.5,0.19,0">Intense 2</option>
							<option value="L,215.25,-3.003,0.004">Very intense 1</option>
							<option value="L,226.75,-1.308,0.002">Very intense 2</option>
							<option value="L,188.5,-5,0">Very intense 3</option>
							<option value="L,190,0.085,0">Awesomeeeee</option>
							<option value="L,225,-0.011,0.002">Optical Illusion</option>
						</select>
						<label>
							<select
								ref="type"
								onChange={this.update.bind(this)}
								value={this.state.type}
							>
								<option value="L">Line</option>
								<option value="Q">Quadratic</option>
								<option value="C">Curveto</option>
							</select>
						</label>
					</label>
					<label>
						step ({this.state.step})<br />
						<input
							ref="step"
							onChange={this.update.bind(this)}
							type="range"
							min="1"
							max="355"
							step=".25"
							value={this.state.step}
						/>
					</label>
					<label>
						Subtract ({this.state.subtract})<br />
						<input
							ref="subtract"
							onChange={this.update.bind(this)}
							type="range"
							min="-5"
							max="5"
							step=".001"
							value={this.state.subtract}
						/>
					</label>
					<label>
						Accelerate ({this.state.accelerate})<br />
						<input
							ref="accelerate"
							onChange={this.update.bind(this)}
							type="range"
							min="0"
							max="5"
							step=".001"
							value={this.state.accelerate}
						/>
					</label>

</div>
				<MySVG
					type={this.state.type}
					step={this.state.step}
					subtract={this.state.subtract}
					accelerate={this.state.accelerate}
				/>
			</div>
		);
	}
}

const draw = () => {
	ReactDOM.render(
		<App step="226.75" subtract=".14" accelerate="0.002" />,
		document.querySelector(".app")
	);
};

window.onresize = draw;
document.onresize = draw;

draw();

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700|Open+Sans:400,800);
html,
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background: #eee;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 3s;
    overflow: hidden;
}
.controls {
    font-family: 'Inconsolata', monospace;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background: white;
}
svg {
    transform: scale(.9);
    cursor: pointer;
}
.inverse {
    background: #114c88;
}
path {
    stroke: rgba(0, 0, 0, .4);
    transition: stroke 2s;
}
.inverse path {
    stroke: rgba(255, 255, 255, .4);
}
select {
    margin-right: 5px;
}
text {
    user-select: none;
    fill: rgba(0, 0, 0, .6);
    transition: background 2s;
}
.inverse text {
    fill: rgba(255, 255, 0, .6);
}
.info {
    display: flex;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 5px;
}

HTML

SVG/ReactJS math patterns

react, math, pattern

编辑器支持Emmet

快捷键

SVG/ReactJS math patterns

react, math, pattern

使用React.js实现的平面几何三角学交互图形

使用React.js实现的SVG图形变形转换器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：