component/Cropper.js
// create a new frame, and drag, so frame width and height is became larger.
create a new frame, and drag, so frame width and height is became larger.
create a new frame and drag so frame width and height is became larger .
createNewFrame (e) {
    if (this.state.dragging) {
      const {
        pageX,
        pageY
      } = e.pageX ? e : e.targetTouches[0]
      const {
        ratio,
        fixedRatio
      } = this.props
      const {
        frameWidth,
        frameHeight,
        startPageX,
        startPageY,
        originX,
        originY
      } = this.state
      const _x = pageX - startPageX
      const _y = pageY - startPageY
      const _width = frameWidth + Math.abs(_x)
      const _height = fixedRatio ? (frameWidth + Math.abs(_x)) / ratio : frameHeight + Math.abs(_y)
      let _left = originX
      let _top = originY
      if (_y < 0) {
        _top = fixedRatio ? originY - Math.abs(_x) / ratio : originY - Math.abs(_y)
      }
      if (_x < 0) {
        _left = originX + _x
      }
      return this.calcPosition(_width, _height, _left, _top)
    }
  }
createNewFrame ( e ) { if ( this . state . dragging ) { const { pageX , pageY } = e . pageX ? e : e . targetTouches [ 0 ] const { ratio , fixedRatio } = this . props const { frameWidth , frameHeight , startPageX , startPageY , originX , originY } = this . state const _x = pageX - startPageX const _y = pageY - startPageY const _width = frameWidth + Math . abs ( _x ) const _height = fixedRatio ? ( frameWidth + Math . abs ( _x ) ) / ratio : frameHeight + Math . abs ( _y ) let _left = originX let _top = originY if ( _y < 0 ) { _top = fixedRatio ? originY - Math . abs ( _x ) / ratio : originY - Math . abs ( _y ) } if ( _x < 0 ) { _left = originX + _x } return this . calcPosition ( _width , _height , _left , _top ) } }
create a new frame, and drag, so frame width and height is became larger.
create a new frame and drag so frame width and height is became larger .
// click or touch event // click or touch point's offset from source image top // frame new width, height, left, top // drag and resize to top, top changing // drag and resize, go to left, left changing // calc position