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