react拖拽生成贝塞尔曲线svg代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：react拖拽生成贝塞尔曲线svg代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rx.all.2.3.22.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/redux.3.6.0.js"></script>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-redux.5.0.2.js"></script>
    <style type="text/css">
        @import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
html {
  background-color: #222;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8em;
  color: #F7EDEE; }

#container {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }

svg {
  background-color: #42171E; }

.draggable {
  fill: rgba(145, 23, 41, 0.8);
  cursor: grab; }
  .draggable text {
    fill: rgba(247, 237, 238, 0.6); }

.draggable:hover, .dragging {
  fill: rgba(186, 31, 54, 0.8);
  cursor: grabbing; }
  .draggable:hover text, .dragging text {
    fill: rgba(255, 255, 255, 0.8); }

text {
  font-size: 0.8em; }
  .draggable text, .dragging text {
    user-select: none; }

path#curve {
  stroke: #F7EDEE;
  stroke-width: 20px;
  fill: transparent; }

line.helper {
  stroke: rgba(145, 23, 41, 0.8);
  stroke-width: 2px;
  fill: transparent; }

.code {
  margin: 50px; }

pre {
  font-family: 'Roboto Mono', monospace; }
  pre p {
    margin-top: 10px;
    margin-bottom: 10px; }
  pre .ident1 {
    margin-left: 10px; }
  pre .ident2 {
    margin-left: 30px; }

    </style>

</head>
<body>
<div id="app">Loading...</div>
<script type="text/babel">//<![CDATA[
/* React and SVG is used for display, 
 * Redux is used for state handling and 
 * RxJS is handling the drag & drop interaction
 */

/* Import { createStore } from 'redux' */
const { createStore, combineReducers } = Redux;

/* Import { connect, Provider } from 'react-redux' */
const { connect, Provider } = ReactRedux;

/*********
* React: Root Component
**********/
const Component = (() => {
  class UnconnectedComponent extends React.Component {
    render() {
      return (
        <div id='container'>
          <Canvas>
            <line className="helper"
              x1={this.props.sx} y1={this.props.sy}
              x2={this.props.c1x} y2={this.props.c1y} />
            <line className="helper"
              x1={this.props.c2x} y1={this.props.c2y}
              x2={this.props.ex} y2={this.props.ey} />
            <path id="curve" d={`
              M ${this.props.sx} ${this.props.sy} 
              C ${this.props.c1x} ${this.props.c1y}, 
                ${this.props.c2x} ${this.props.c2y}, 
                ${this.props.ex} ${this.props.ey}`
            } />
            <Draggable x={this.props.sx} y={this.props.sy} changeCoord={this.props.setStartPoint}/>
            <Draggable x={this.props.c1x} y={this.props.c1y} changeCoord={this.props.setControlPoint1}/>
            <Draggable x={this.props.c2x} y={this.props.c2y} changeCoord={this.props.setControlPoint2}/>
            <Draggable x={this.props.ex} y={this.props.ey} changeCoord={this.props.setEndPoint}/>
          </Canvas>
          <div className='code'>
            <pre>
              <p>&lt;svg width='400' height='400'&gt;</p>
              <p className='ident1'>&lt;path d='M {this.props.sx} {this.props.sy} C {this.props.c1x} {this.props.c1y}, {this.props.c2x} {this.props.c2y}, {this.props.ex} {this.props.ey}'</p>
              <p className='ident2'>stroke='white' stroke-width='20' fill='transparent'/&gt;</p>
              <p>&lt;/svg&gt;</p>
            </pre>
          </div>
        </div>
      );
    }
  }

  const componentMapStateToProps = (state, ownProps) => {
    return {
      sx: state.sx,
      sy: state.sy,
      c1x: state.c1x,
      c1y: state.c1y,
      c2x: state.c2x,
      c2y: state.c2y,
      ex: state.ex,
      ey: state.ey
    }
  }

  const componentMapDispatchToProps = (dispatch, ownProps) => {
    return {
      setStartPoint: (x, y) => {
        dispatch({ type: 'S', x, y });
      },
      setControlPoint1: (x, y) => {
        dispatch({ type: 'C1', x, y});
      },
      setControlPoint2: (x, y) => {
        dispatch({ type: 'C2', x, y});
      },
      setEndPoint: (x, y) => {
        dispatch({ type: 'E', x, y});
      }
    }
  }
  
  return connect(componentMapStateToProps, componentMapDispatchToProps)(UnconnectedComponent);
})();

/*********
* React: Canvas
**********/
const Canvas = (() => {
  // An SVG wrapper that adaps to the available space
  class UnconnectedCanvas extends React.Component {
    render() {
      return (
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
          width={this.props.canvasWidth} height={this.props.canvasHeight} 
          viewBox={`0 0 ${this.props.width} ${this.props.height}`} >
          {this.props.children}
        </svg>
      );
    }

    componentDidMount() {
      let resize = Rx.Observable.fromEvent(window, 'resize').ma.........完整代码请登录后点击上方下载按钮下载查看