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

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

代码语言：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' hei.........完整代码请登录后点击上方下载按钮下载查看