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

Trigonometry Helper。可用来直观的理解角度概念。

react，几何

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 2716
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Component = React.Component;

var Angle = (function(_Component) {
    function Angle() {
        var _this = this;

_classCallCheck(this, Angle);

if (_Component != null) {
            _Component.apply(this, arguments);
        }

this.propTypes = {
            index: React.PropTypes.number.isRequired,
            isDragging: React.PropTypes.number.isRequired,
            angle: React.PropTypes.shape({
                numerator: React.PropTypes.number.isRequired,
                denominator: React.PropTypes.number.isRequired
            }).isRequired,
            dragStart: React.PropTypes.func.isRequired,
            circleRadius: React.PropTypes.number.isRequired,
            sketchSize: React.PropTypes.number.isRequired
        };

this.handleMouseDown = function(e) {
            _this.props.dragStart(e, _this.props.index);
        };
    }

_inherits(Angle, _Component);

_createClass(Angle, [{
        key: "render",
        value: function render() {
            var _props = this.props;
            var angle = _props.angle;
            var index = _props.index;
            var isDragging = _props.isDragging;

var props = _objectWithoutProperties(_props, ["angle", "index", "isDragging"]);

var sketchHalfSize = props.sketchSize / 2;

var numerator = angle.numerator !== "" ? angle.numerator : 1;
            var denominator = angle.denominator !== "" ? angle.denominator : 1;

var radians = numerator / denominator * Math.PI;
            var cosRadius = sketchHalfSize + Math.cos(radians) * props.circleRadius;
            var sinRadius = sketchHalfSize - Math.sin(radians) * props.circleRadius;

var angleRadius = 40;
            var cosAngleRadius = sketchHalfSize + Math.cos(radians) * angleRadius;
            var sinAngleRadius = sketchHalfSize - Math.sin(radians) * angleRadius;

return React.createElement(
                "g", {
                    className: "ad-SketchAngle"
                },
                React.createElement("path", {
                    className: "ad-SketchAngle-angle",
                    d: "M " + (sketchHalfSize + angleRadius) + " " + sketchHalfSize + " A " + angleRadius + " " + angleRadius + ", " + (Math.sin(radians) < 0 ? "0, 1, 0" : "0, 0, 0") + ", " + cosAngleRadius + " " + sinAngleRadius + " L " + sketchHalfSize + " " + sketchHalfSize + " Z"
                }),
                React.createElement(
                    "g", {
                        className: "ad-SketchAngle-trigo"
                    },
                    React.createElement("line", {
                        className: "ad-SketchAngle-cos",
                        x1: sketchHalfSize,
                        y1: sinRadius,
                        x2: cosRadius,
                        y2: sinRadius
                    }),
                    React.createElement("line", {
                        className: "ad-SketchAngle-sin",
                        x1: cosRadius,
                        y1: sketchHalfSize,
                        x2: cosRadius,
                        y2: sinRadius
                    })
                ),
                React.createElement("line", {
                    className: "ad-SketchAngle-line",
                    x1: sketchHalfSize,
                    y1: sketchHalfSize,
                    x2: sketchHalfSize + props.circleRadius,
                    y2: sketchHalfSize
                }),
                React.createElement("line", {
                    className: "ad-SketchAngle-line",
                    x1: sketchHalfSize,
                    y1: sketchHalfSize,
                    x2: cosRadius,
                    y2: sinRadius
                }),
                React.createElement("circle", {
                    className: "ad-SketchAngle-dot" + (isDragging === index ? " is-dragging" : ""),
                    onMouseDown: this.handleMouseDown,
                    cx: cosRadius,
                    cy: sinRadius,
                    r: 6
                })
            );
        }
    }]);

return Angle;
})(Component);

var Sketch = (function(_Component2) {
    function Sketch() {
        _classCallCheck(this, Sketch);

if (_Component2 != null) {
            _Component2.apply(this, arguments);
        }

this.propTypes = {
            angles: React.PropTypes.array.isRequired,
            circleRadius: React.PropTypes.number.isRequired,
            sketchSize: React.PropTypes.number.isRequired
        };
    }

_inherits(Sketch, _Component2);

_createClass(Sketch, [{
        key: "render",
        value: function render() {
            var _props2 = this.props;
            var angles = _props2.angles;

var props = _objectWithoutProperties(_props2, ["angles"]);

var sketchHalfSize = props.sketchSize / 2;
            var svgAngles = angles.map(function(angle, index) {
                return React.createElement(Angle, _extends({
                    angle: angle,
                    index: index
                }, props));
            });

return React.createElement(
                "svg", {
                    className: "ad-Sketch",
                    viewBox: "0 0 " + props.sketchSize + " " + props.sketchSize
                },
                React.createElement(
                    "g", {
                        className: "ad-Sketch-base"
                    },
                    React.createElement("line", {
                        className: "ad-Sketch-ortho",
                        x1: sketchHalfSize,
                        y1: 0,
                        x2: sketchHalfSize,
                        y2: props.sketchSize
                    }),
                    React.createElement("line", {
                        className: "ad-Sketch-ortho",
                        x1: 0,
                        y1: sketchHalfSize,
                        x2: props.sketchSize,
                        y2: sketchHalfSize
                    }),
                    React.createElement(
                        "text", {
                            className: "ad-Sketch-hint",
                            x: sketchHalfSize + 10,
                            y: 10
                        },
                        "sin"
                    ),
                    React.createElement(
                        "text", {
                            className: "ad-Sketch-hint  ad-Sketch-hint--r",
                            x: props.sketchSize - 5,
                            y: sketchHalfSize - 10
                        },
                        "cos"
                    ),
                    React.createElement(
                        "text", {
                            className: "ad-Sketch-value",
                            x: sketchHalfSize + props.circleRadius + 15,
                            y: sketchHalfSize - 10
                        },
                        "0"
                    ),
                    React.createElement(
                        "text", {
                            className: "ad-Sketch-value  ad-Sketch-value--r",
                            x: sketchHalfSize - (props.circleRadius + 15),
                            y: sketchHalfSize - 10
                        },
                        "π"
                    ),
                    React.createElement(
                        "text", {
                            className: "ad-Sketch-value  ad-Sketch-value--c  ad-Sketch-value--t",
                            x: sketchHalfSize,
                            y: sketchHalfSize - (props.circleRadius + 10)
                        },
                        "π / 2"
                    ),
                    React.createElement(
                        "text", {
                            className: "ad-Sketch-value  ad-Sketch-value--c  ad-Sketch-value--b",
                            x: sketchHalfSize,
                            y: sketchHalfSize + props.circleRadius + 10
                        },
                        "3π / 2"
                    ),
                    React.createElement("circle", {
                        className: "ad-Sketch-circle",
                        cx: sketchHalfSize,
                        cy: sketchHalfSize,
                        r: props.circleRadius
                    })
                ),
                React.createElement(
                    "g", {
                        className: "ad-Sketch-angles"
                    },
                    svgAngles
                )
            );
        }
    }]);

return Sketch;
})(Component);

var Icon = (function(_Component3) {
    function Icon() {
        _classCallCheck(this, Icon);

if (_Component3 != null) {
            _Component3.apply(this, arguments);
        }

this.propTypes = {
            name: React.PropTypes.string.isRequired
        };
    }

_inherits(Icon, _Component3);

_createClass(Icon, [{
        key: "render",
        value: function render() {
            var path = undefined;

switch (this.props.name) {
                case "clear":
                    path = "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z";
                    break;

case "add":
                    path = "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z";
                    break;
            }

return React.createElement(
                "svg", {
                    className: "ad-Icon",
                    viewBox: "0 0 1024 1024"
                },
                React.createElement("path", {
                    d: path
                })
            );
        }
    }]);

return Icon;
})(Component);

var Button = (function(_Component4) {
    function Button() {
        _classCallCheck(this, Button);

if (_Component4 != null) {
            _Component4.apply(this, arguments);
        }

this.propTypes = {
            type: React.PropTypes.string,
            size: React.PropTypes.string,
            icon: React.PropTypes.string
        };
    }

_inherits(Button, _Component4);

_createClass(Button, [{
        key: "render",
        value: function render() {
            var _props3 = this.props;
            var type = _props3.type;
            var size = _props3.size;
            var icon = _props3.icon;
            var children = _props3.children;

var props = _objectWithoutProperties(_props3, ["type", "size", "icon", "children"]);

return React.createElement(
                "button",
                _extends({
                    className: "ad-Button" + (type ? " ad-Button--" + type : "") + (size ? " ad-Button--" + size : "")
                }, props, {
                    type: "button"
                }),
                icon && React.createElement(Icon, {
                    name: icon
                }),
                children && React.createElement(
                    "span", {
                        className: "ad-Button-text"
                    },
                    children
                )
            );
        }
    }]);

return Button;
})(Component);

var FormGroup = (function(_Component5) {
    function FormGroup() {
        var _this2 = this;

_classCallCheck(this, FormGroup);

if (_Component5 != null) {
            _Component5.apply(this, arguments);
        }

this.propTypes = {
            index: React.PropTypes.number.isRequired,
            angle: React.PropTypes.shape({
                numerator: React.PropTypes.number.isRequired,
                denominator: React.PropTypes.number.isRequired
            }).isRequired,
            updateNumerator: React.PropTypes.func.isRequired,
            updateDenominator: React.PropTypes.func.isRequired,
            deleteFormGroup: React.PropTypes.func.isRequired
        };

this.handleNumerator = function(e) {
            _this2.props.updateNumerator(_this2.props.index, e.target.value);
        };

this.handleDenominator = function(e) {
            _this2.props.updateDenominator(_this2.props.index, e.target.value);
        };

this.handleClick = function(e) {
            e.preventDefault();

_this2.props.deleteFormGroup(_this2.props.index);
        };
    }

_inherits(FormGroup, _Component5);

_createClass(FormGroup, [{
        key: "render",
        value: function render() {
            return React.createElement(
                "div", {
                    className: "ad-FormGroup"
                },
                React.createElement("div", {
                    className: "ad-FormGroup-color"
                }),
                React.createElement(
                    "div", {
                        className: "ad-FormMath"
                    },
                    React.createElement(
                        "div", {
                            className: "ad-FormMath-frac"
                        },
                        React.createElement(
                            "div", {
                                className: "ad-FormMath-n"
                            },
                            React.createElement("input", {
                                className: "ad-FormInput",
                                ref: "numerator",
                                value: this.props.angle.numerator,
                                onChange: this.handleNumerator,
                                type: "text"
                            })
                        ),
                        React.createElement(
                            "div", {
                                className: "ad-FormMath-n"
                            },
                            React.createElement("input", {
                                className: "ad-FormInput",
                                ref: "denominator",
                                value: this.props.angle.denominator,
                                onChange: this.handleDenominator,
                                type: "text"
                            })
                        )
                    ),
                    React.createElement(
                        "div", {
                            className: "ad-FormMath-formula"
                        },
                        "π"
                    )
                ),
                React.createElement(
                    "div", {
                        className: "ad-FormGroup-action"
                    },
                    React.createElement(Button, {
                        onClick: this.handleClick,
                        type: "cancel",
                        size: "mini",
                        icon: "clear"
                    })
                )
            );
        }
    }]);

return FormGroup;
})(Component);

var Form = (function(_Component6) {
    function Form() {
        var _this3 = this;

_classCallCheck(this, Form);

if (_Component6 != null) {
            _Component6.apply(this, arguments);
        }

this.propTypes = {
            angles: React.PropTypes.array.isRequired,
            shouldScroll: React.PropTypes.bool.isRequired,
            addFormGroup: React.PropTypes.func.isRequired,
            blurAddButton: React.PropTypes.func.isRequired
        };

this.handleClick = function(e) {
            e.preventDefault();

_this3.props.addFormGroup();
        };

this.handleBlur = function(e) {
            _this3.props.blurAddButton();
        };
    }

_inherits(Form, _Component6);

_createClass(Form, [{
        key: "componentDidUpdate",
        value: function componentDidUpdate() {
            var n = React.findDOMNode(this.refs.groups);

if (this.props.shouldScroll) {
                n.scrollTop = n.scrollHeight;
            }
        }
    }, {
        key: "render",
        value: function render() {
            var _props4 = this.props;
            var angles = _props4.angles;
            var addFormGroup = _props4.addFormGroup;

var props = _objectWithoutProperties(_props4, ["angles", "addFormGroup"]);

var groups = angles.map(function(angle, index) {
                return React.createElement(FormGroup, _extends({
                    index: index,
                    angle: angle
                }, props));
            });

return React.createElement(
                "form", {
                    className: "ad-Form"
                },
                React.createElement(
                    "div", {
                        className: "ad-Form-groups",
                        ref: "groups"
                    },
                    groups
                ),
                React.createElement(
                    "div", {
                        className: "ad-Form-actions"
                    },
                    React.createElement(
                        Button, {
                            onClick: this.handleClick,
                            onBlur: this.handleBlur,
                            type: "primary",
                            size: "full",
                            icon: "add"
                        },
                        "Add angle"
                    )
                )
            );
        }
    }]);

return Form;
})(Component);

var Trigonometry = (function(_Component7) {
    function Trigonometry() {
        var _this4 = this;

_classCallCheck(this, Trigonometry);

if (_Component7 != null) {
            _Component7.apply(this, arguments);
        }

this.state = {
            isDragging: false,
            shouldScroll: false,
            angles: [{
                numerator: 7,
                denominator: 10
            }, {
                numerator: 3,
                denominator: 2
            }, {
                numerator: 1,
                denominator: 5
            }]
        };

this.updateNumerator = function(index, numerator) {
            if (numerator !== "") {
                numerator = parseFloat(numerator);
            }

var angles = _this4.state.angles.map(function(angle, angleIndex) {
                if (angleIndex === index) {
                    numerator = numerator !== "" && isNaN(numerator) ? angle.numerator : numerator;

return {
                        numerator: numerator,
                        denominator: angle.denominator
                    };
                }

return angle;
            });

_this4.setState({
                angles: angles
            });
        };

this.updateDenominator = function(index, denominator) {
            if (denominator !== "") {
                denominator = parseFloat(denominator);

if (denominator === 0) {
                    denominator = 1;
                }
            }

var angles = _this4.state.angles.map(function(angle, angleIndex) {
                if (angleIndex === index) {
                    denominator = denominator !== "" && isNaN(denominator) ? angle.denominator : denominator;

return {
                        numerator: angle.numerator,
                        denominator: denominator
                    };
                }

return angle;
            });

_this4.setState({
                angles: angles
            });
        };

this.blurAddButton = function() {
            _this4.setState({
                shouldScroll: false
            });
        };

this.addFormGroup = function() {
            var numerator = 0,
                denominator = 1,
                angles = _this4.state.angles;

angles.push({
                numerator: numerator,
                denominator: denominator
            });

_this4.setState({
                angles: angles,
                shouldScroll: true
            });
        };

this.deleteFormGroup = function(index) {
            var angles = _this4.state.angles;

delete angles[index];

_this4.setState({
                angles: angles
            });
        };

this.drag = function(e) {
            var i = _this4.state.isDragging;
            var sketch = React.findDOMNode(_this4.refs.sketch).getBoundingClientRect();

if (i !== false) {
                var sketchHalfSize = _this4.props.sketchSize / 2;

var angles = _this4.state.angles,
                    x = e.pageX - sketch.left - sketchHalfSize,
                    y = sketchHalfSize - (e.pageY - sketch.top),
                    rad = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)),
                    sine = y / rad,
                    cosine = x / rad,
                    theta = undefined;

theta = Math.acos(cosine);

if (sine < 0) {
                    theta = 2 * Math.PI - theta;
                }

var f = new Fraction((theta / Math.PI).toFixed(1));

angles[i] = {
                    numerator: f.n,
                    denominator: f.d
                };

_this4.setState({
                    angles: angles
                });
            }
        };

this.dragStart = function(e, index) {
            e.preventDefault();

_this4.setState({
                isDragging: index
            });
        };

this.dragEnd = function(e) {
            _this4.setState({
                isDragging: false
            });
        };
    }

_inherits(Trigonometry, _Component7);

_createClass(Trigonometry, [{
        key: "render",
        value: function render() {
            return React.createElement(
                "div",
                null,
                React.createElement(
                    "div", {
                        className: "ad-App-head"
                    },
                    React.createElement(
                        "h1", {
                            className: "ad-App-title"
                        },
                        "Trigonometry Helper"
                    ),
                    React.createElement(
                        "div", {
                            className: "ad-App-hint"
                        },
                        "Type values to move an angle or drag it directly on the scheme."
                    )
                ),
                React.createElement(
                    "div", {
                        className: "ad-Trigonometry",
                        onMouseUp: this.dragEnd,
                        onMouseMove: this.drag
                    },
                    React.createElement(
                        "div", {
                            className: "ad-Trigonometry-svg"
                        },
                        React.createElement(Sketch, _extends({
                            ref: "sketch",
                            angles: this.state.angles,
                            drag: this.drag,
                            dragStart: this.dragStart,
                            dragEnd: this.dragEnd,
                            isDragging: this.state.isDragging
                        }, this.props))
                    ),
                    React.createElement(
                        "div", {
                            className: "ad-Trigonometry-form"
                        },
                        React.createElement(Form, {
                            angles: this.state.angles,
                            shouldScroll: this.state.shouldScroll,
                            updateNumerator: this.updateNumerator,
                            updateDenominator: this.updateDenominator,
                            blurAddButton: this.blurAddButton,
                            addFormGroup: this.addFormGroup,
                            deleteFormGroup: this.deleteFormGroup
                        })
                    )
                ),
                React.createElement(
                    "div", {
                        className: "ad-App-foot"
                    },
                    React.createElement(
                        "a", {
                            href: "https://twitter.com/a_dugois"
                        },
                        "Follow me on Twitter"
                    )
                )
            );
        }
    }]);

return Trigonometry;
})(Component);

React.render(React.createElement(Trigonometry, {
    circleRadius: 130,
    sketchSize: 26 * 16
}), document.querySelector("#app"));

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic);
::-webkit-scrollbar {
    width: 8px;
    width: .5rem;
}
::-webkit-scrollbar-thumb {
    background: #37474F;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(65, 84, 93);
}
html {
    font-size: 16px;
}
html,
body {
    height: 100%;
    margin: 0;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
.ad-Icon {
    width: 1.5em;
    height: 1.5em;
    color: currentColor;
}
.ad-Icon path {
    fill: currentColor;
}
.ad-Button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 11px 16px;
    padding: .7rem 1rem;
    border: 2px solid #37474F;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    -webkit-transition: border .1s, background .1s, color .1s;
    transition: border .1s, background .1s, color .1s;
    font-size: 11px;
    font-size: .7rem;
    color: #37474F;
}
.ad-Button:focus {
    outline: 0;
}
.ad-Button--full {
    width: 100%;
}
.ad-Button--mini {
    padding: 4px;
    padding: .25rem;
    font-size: 8px;
    font-size: .5rem;
}
.ad-Button--primary {
    border-color: #00BCD4;
    color: #00BCD4;
}
.ad-Button--primary:focus,
.ad-Button--primary:hover {
    background: #00BCD4;
    color: #fff;
}
.ad-Button--cancel {
    border-color: #fff;
    color: #fff;
}
.ad-Button--cancel:focus,
.ad-Button--cancel:hover {
    background: #fff;
    color: #263238;
}
.ad-Button-text {
    text-transform: uppercase;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    color: currentColor;
}
.ad-Icon + .ad-Button-text {
    margin-left: 4px;
    margin-left: .25rem;
}
.ad-App {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #00BCD4;
}
.ad-App-head {
    margin-bottom: 32px;
    margin-bottom: 2rem;
}
.ad-App-title {
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 16px;
    font-size: 1.05rem;
    color: #fff;
}
.ad-App-hint {
    margin-top: 6px;
    margin-top: .4rem;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-size: .9rem;
    color: #fff;
}
.ad-App-foot {
    margin-top: 16px;
    margin-top: 1rem;
    text-transform: uppercase;
    text-align: right;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 10px;
    font-size: .65rem;
}
.ad-App-foot a {
    color: #fff;
    text-decoration: underline;
}
.ad-Trigonometry {
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 480px;
    height: 30rem;
    background: #37474F;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.ad-Trigonometry-svg {
    width: 480px;
    width: 30rem;
    height: 100%;
    padding: 32px;
    padding: 2rem;
}
.ad-Trigonometry-form {
    width: 224px;
    width: 14rem;
    height: 100%;
    background: #263238;
}
.ad-Sketch {
    width: 100%;
    height: 100%;
}
.ad-Sketch-circle {
    stroke: #fff;
    stroke-width: 2px;
    fill: none;
}
.ad-Sketch-ortho {
    stroke: rgb(65, 84, 93);
    stroke-width: 2px;
}
.ad-Sketch-hint {
    fill: #fff;
    font-family: "Open Sans", sans-serif;
    font-style: italic;
    font-size: 12px;
    font-size: .75rem;
}
.ad-Sketch-value {
    fill: #fff;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 12px;
    font-size: .8rem;
}
.ad-Sketch-value--c {
    text-anchor: middle;
}
.ad-Sketch-value--t {
    alignment-baseline: text-after-edge;
}
.ad-Sketch-value--b {
    alignment-baseline: text-before-edge;
}
.ad-Sketch-hint--r,
.ad-Sketch-value--r {
    text-anchor: end;
}
.ad-SketchAngle:nth-child(5n+1),
.ad-FormGroup:nth-child(5n+1) {
    color: #2196F3;
}
.ad-SketchAngle:nth-child(5n+2),
.ad-FormGroup:nth-child(5n+2) {
    color: #66BB6A;
}
.ad-SketchAngle:nth-child(5n+3),
.ad-FormGroup:nth-child(5n+3) {
    color: #F44336;
}
.ad-SketchAngle:nth-child(5n+4),
.ad-FormGroup:nth-child(5n+4) {
    color: #EC407A;
}
.ad-SketchAngle:nth-child(5n+5),
.ad-FormGroup:nth-child(5n+5) {
    color: #FFEB3B;
}
.ad-SketchAngle-line {
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
}
.ad-SketchAngle-angle {
    opacity: .2;
    fill: currentColor;
}
.ad-SketchAngle-trigo {
    stroke: rgb(65, 84, 93);
    stroke-width: 2px;
    stroke-dasharray: 6, 8;
}
.ad-SketchAngle-dot {
    fill: currentColor;
    stroke: #fff;
    stroke-width: 2px;
    -webkit-transition: stroke .2s, stroke-width .2s;
    transition: stroke .2s, stroke-width .2s;
}
.ad-SketchAngle-dot.is-dragging {
    stroke: #fff;
    stroke-width: 4px;
}
.ad-Form {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.ad-Form-groups {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: auto;
    padding: 16px 32px 0;
    padding: 1rem 2rem 0;
}
.ad-Form-actions {
    padding: 32px;
    padding: 2rem;
}
.ad-FormGroup {
    width: 100%;
    padding: 16px 0;
    padding: 1rem 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.ad-FormGroup + .ad-FormGroup {
    border-top: 1px solid #37474F;
}
.ad-FormGroup-color {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: currentColor;
}
.ad-FormMath {
    margin-left: 12px;
    margin-left: .8rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.ad-FormMath-frac {
    width: 40px;
    width: 2.5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.ad-FormMath-n + .ad-FormMath-n {
    margin-top: 4px;
    margin-top: .25rem;
    padding-top: 4px;
    padding-top: .25rem;
    border-top: 2px solid #fff;
}
.ad-FormMath-formula {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 6px;
    margin-left: .4rem;
    cursor: default;
    font-family: "Open Sans", sans-serif;
    font-size: 19px;
    font-size: 1.2rem;
    color: #fff;
}
.ad-FormInput {
    width: 100%;
    padding: 4px;
    padding: .25rem;
    border: none;
    border-radius: 4px;
    background: #37474F;
    -webkit-transition: background .1s;
    transition: background .1s;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-size: .85rem;
    color: #fff;
}
.ad-FormInput:focus {
    outline: 0;
    background: rgb(75, 97, 108);
}

HTML

Trigonometry Helper。可用来直观的理解角度概念。

react，几何

编辑器支持Emmet

快捷键

Trigonometry Helper。可用来直观的理解角度概念。

react，几何

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：