我怎样才能添加一个自定义线到反应-移动？

Question

我想添加7条自定义行作为用户的助手。

就像在那张照片里，我想加7次"div.moveable-line“

即使旋转改变，直线也会停留在合适的位置。 =>和我想把它们加7次。

我们能否在T1和B1之间创建一条线(以及其他的)？

或者，如果你有任何其他的解决方案，我也是开放的。

反应移动- Github

可调谐- StoryBook

Moveable.warpable -文档

下面是一个演示链接

我的组件

​

import React from 'react';
import ReactDOM from 'react-dom';
import Moveable from 'react-moveable';
import { ref } from 'framework-utils';
import { Frame } from 'scenejs';
import './styles.css';

class App extends React.Component {
  frame = new Frame({
    width: '250px',
    height: '200px',
    left: '0px',
    top: '0px',
    transform: {
      rotate: '0deg',
      scaleX: 1,
      scaleY: 1,
      matrix3d: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
    },
  });
  state = {
    target: null,
    container: null,
    warpable: true,
    stateTransform: [],
    totalBoxesTop: 0,
    totalBoxesFill: 0,
    totalBoxesBottom: 0,
    isBoxCreated: false,
  };

  render() {
    const { warpable, target } = this.state;

    let k = document.querySelector('.moveable-control-box');
    console.log(k, ':44');
    if (k !== null) {
      // k.appendChild(z);
      // k.appendChild(d);
      k.style.position = 'relative';
      k.style.backgroundColor = '#fff';
    }

    let topLine = document.querySelector(
      '.moveable-direction[data-line-index="0"]'
    );

    if (topLine !== null) {
      topLine.classList.add('myTopLine');
      let d = document.createElement('div'); // is a node
      d.innerHTML = `T${this.state.totalBoxesTop}`;
      d.setAttribute('data-box-position-top', `${this.state.totalBoxesTop}`);
      d.classList.add('my-box');

      if (this.state.totalBoxesTop < 8) {
        // When is this.state.totalBoxes === 1 it means 0 boxes appear
        topLine.appendChild(d);
        this.setState({ totalBoxesTop: this.state.totalBoxesTop + 1 });
      }
      console.log(topLine, this.state.totalBoxesTop);
    }

    let bottomLine = document.querySelector(
      '.moveable-direction[data-line-index="3"]'
    );

    if (bottomLine !== null) {
      bottomLine.classList.add('myBottomLine');
      let d = document.createElement('div'); // is a node
      d.innerHTML = `B${this.state.totalBoxesBottom}`;
      d.setAttribute(
        'data-box-position-bottom',
        `${this.state.totalBoxesBottom}`
      );
      d.classList.add('my-box');

      if (this.state.totalBoxesBottom < 8) {
        // When is this.state.totalBoxes === 1 it means 0 boxes appear
        bottomLine.appendChild(d);

        this.setState({ totalBoxesBottom: this.state.totalBoxesBottom + 1 });
      }
      console.log(bottomLine, this.state.totalBoxesBottom);
    }
    return (
      <div className="page main">
        <Moveable
          ref={ref(this, 'moveable')}
          target={target}
          pinchThreshold={20}
          container={document.body}
          draggable={true}
          warpable={warpable}
          rotatable={true}
          pinchable={true}
          origin={false}
          throttleDrag={1}
          throttleRotate={0.2}
          throttleResize={1}
          throttleScale={0.01}
          onDrag={this.onDrag}
          onWarp={this.onWarp}
          onDragEnd={this.onEnd}
          onScaleEnd={this.onEnd}
          onResizeEnd={this.onEnd}
          onWarpEnd={this.onEnd}
          onRotateEnd={this.onEnd}
          onPinchEnd={this.onEnd}
        />
        <div className="moveable">hello</div>
        <div className="label" ref={ref(this, 'label')} />
      </div>
    );
  }

  componentDidMount() {
    this.setState({
      target: document.querySelector('.moveable'),
    });
    window.addEventListener('resize', this.onWindowReisze);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.onWindowReisze);
  }
  onWindowReisze = () => {
    this.moveable.updateRect();
  };

  setTransform(target) {
    target.style.cssText = this.frame.toCSS();
  }
  setLabel(clientX, clientY, text) {
    this.label.style.cssText = `
display: block; transform: translate(${clientX}px, ${
      clientY - 10
    }px) translate(-100%, -100%) translateZ(-100px);`;
    this.label.innerHTML = text;
  }

  onDrag = ({ target, clientX, clientY, top, left, isPinch }) => {
    this.frame.set('left', `${left}px`);
    this.frame.set('top', `${top}px`);
    this.setTransform(target);
    if (!isPinch) {
      this.setLabel(clientX, clientY, `X: ${left}px<br/>Y: ${top}px`);
    }
  };

  onWarp = ({
    target,
    clientX,
    clientY,
    delta,
    multiply,
    currentTarget,
    moveable,
    datas,
    inputEvent,
    transform,
    dist,
    matrix,
  }) => {
    console.log(target);
    target.style.transform = `matrix3d(${matrix.join(',')})`;
    this.setState({ stateTransform: `matrix3d(${matrix.join(',')})` });
    this.frame.set(
      'transform',
      'matrix3d',
      multiply(this.frame.get('transform', 'matrix3d'), delta)
    );
    this.setTransform(target);
    this.setLabel(clientX, clientY, `X: ${clientX}px<br/>Y: ${clientY}px`);
  };
  onEnd = () => {
    this.label.style.display = 'none';
  };
}

export default App;

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap");

.moveable {
    position: absolute;
    width: 250px;
    height: 200px;
    margin: 0 auto;
    background-color: transparent;
    top: 0;
    left: 0;
}

.my-new-box{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #73a079;
}

.myTopLine,
.myBottomLine{
    background-color: #8b270a!important;
    display: flex!important;
    position: absolute!important;
    justify-content: space-between!important;
    align-items: flex-end!important;
}

.my-box {
    position: relative;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    /*flex: 1;*/
    /*margin: 0 auto;*/
    background-color: rgba(0,222,222,0.3);

    /*transform:  translate3d(42px, -62px, -135px);*/
}

.my-line{
    position: relative;
    top: 0;
    left: 0;
    width: 100px;
    height: 150px;
    background-color: #3a3aa0;
}

.moveable-control-box {
    position: relative!important;
    background-color: #8b2c62 !important;
}

.label {
    position: fixed;
    top: 0;
    left: 0;
    padding: 5px;
    border-radius: 5px;
    background: #333;
    z-index: 3001;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    display: none;
    transform: translate(-100%, -100%);
}

.feature .container .left {
    position: relative;
    width: 300px;
    height: 205px;
    display: inline-block;
    vertical-align: top;
    z-index: 2000;
    margin-bottom: 20px;
}

.feature .container .right {
    position: relative;
    display: inline-block;
    vertical-align: top;
    flex: 1;
}

.feature .right .description {
    text-align: left;
    margin: 0px 0px 10px;
}

.feature .right .description strong {
    font-weight: 600;
}

.draggable,
.resizable,
.scalable,
.rotatable,
.origin,
.warpable,
.pinchable {
    position: absolute;
    left: 0;
}

.origin {
    transform-origin: 30% 50%;
}

pre {
    position: relative;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 10px;
    max-width: 500px;
}

code.hljs {
    padding: 0;
}

.tab {
    padding: 10px 12px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #ccc;
    box-shadow: none;
    font-weight: bold;
    margin: 0;
    cursor: pointer;
    outline: none;
}

.tab.selected {
    background: #333;
    color: #fff;
    border: 1px solid #333;
}

.panel {
    display: none;
}

.panel.selected {
    display: block;
}

.page.footer {
    font-weight: 400;
}

.page.footer a {
    text-decoration: underline;
}

.page.footer span:first-child:before {
    content: "";
}

.page.footer span:before {
    content: "/";
}

​

Answer 1

使自定义线能够自定义

https://stackblitz.com/edit/react-ts-wmy77k?file=index.tsx