dudwl7676
110
2020-02-18 18:35:30
0
264

css 천재님들 저좀 도와주세요


div 태그의 넓이와 시작점을 구하는 중입니다

두번의 클릭으로 각 클릭의 마우스위치의 x좌표를 pagex로 받아서 (첫번째는 getX, 두번째는 getY로 받았습니다)

getY-getX로 넓이를 구하고 getX(처음 클릭한 마우스의 x 좌표)를 시작점으로 하여 위치를 잡아준 후 보여주기 버튼을 누르면 해당 좌표값에 div 태그로 빨간 박스를 보여지게 하고싶은데 위치가 영 이상합니다ㅠㅠ 제가 css를 아예 몰라서 코드 보시고 고쳐야 할 부분있으면 조언 부탁드리겠습니다ㅠㅠㅠㅠㅠㅠ

//선택구간 잡는 함수 입니다 

 GetCurrentTimeForStart=(event)=>{
    this.setState({
      startTime: this.wavesurfer.getCurrentTime(),
      getX: event.pageX
    })
  }

  GetCurrentTimeForEnd=(event)=>{
    this.setState({
      endTime: this.wavesurfer.getCurrentTime(),
      getY: event.pageX

    })
  }

//잡은 선택구간에 대하여 div태그 요소를 보여주는 함수입니다

 PlaySection = () => {
    this.wavesurfer.play(this.state.startTime,this.state.endTime);
    this.setState({
        getWidth: this.state.getY-this.state.getX
    })
  }

//div 설정 부분입니다

 <button onClick={this.GetCurrentTimeForStart}>구간선택(시작)</button>
        <button onClick={this.GetCurrentTimeForEnd}>구간선택(끝)</button>
        <button onClick={this.PlaySection}>선택구간파형보기</button>
        <div
          style={{ border: '1px solid grey', width: 900, height: 80, position: "absolute"}}
          id="waveform"></div>
        <div ref={ref => { this.mydiv = ref }} 
        style={{height: 80, left:this.state.getX, width:this.state.getWidth, position:'relative', border: '1px solid red'}}></div>


0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.