Ткань создает новый компонент холста вместо добавления объекта в холст - PullRequest
Новая
       5

Ткань создает новый компонент холста вместо добавления объекта в холст

0 голосов
/ 17 января 2019

Я создаю настраиваемое приложение для дизайна рубашки, используя fabricjs canvas. Все хорошо, пока я не создам вкладку для дизайна задней стороны рубашки. Если пользователь завершает разработку лицевой стороны и переходит на обратную сторону после загрузки своего изображения, он не может перетащить холст вокруг.

Я использую React 16.7 с Fabric 2.4.6 и ничего более!

Это мой штат: 

this.state = {
            canvas: new fabric.Canvas('customizer'),
            customizedFabric:[{},{}],
            seletedTab:0,
            loading:true
        }

Вот как они загружают свое изображение: 

     uploadFile(event){
        let imageUrl = URL.createObjectURL(event.target.files[0])
        fabric.Image.fromURL(imageUrl, (myImg) => {
            let img = myImg.scaleToWidth(200)
            const canvas = new fabric.Canvas('customizer')
            canvas.add(img)
            this.setState({ canvas })
        })
    }

Как изменить вкладку, чтобы настроить другую сторону: 

 handleChangeTab(event) {
        let userSelect = event.target.getAttribute('select')
        let json = this.state.canvas.toJSON([
          'lockMovementX',
          'lockMovementY',
          'lockRotation',
          'lockScalingX',
          'lockScalingY',
          'lockUniScaling',
        ])
        let temp = this.state.customizedFabric
        temp[this.state.seletedTab] = json
        this.setState({customizedFabric:temp})
        this.state.seletedTab = userSelect
        this.state.canvas.clear()
        this.state.canvas.loadFromJSON(
            this.state.customizedFabric[this.state.seletedTab],
            () => {
                this.state.canvas.renderAll()
            }
        )
      }

Элемент 

 <button select={0} onClick={(e) => this.handleChangeTab(e)} >front</button>
 <button select={1} onClick={(e) => this.handleChangeTab(e)} >back</button>             
 <canvas style={{border: '3px dashed'}} id="customizer"></canvas>
 <input type='file' onChange={(e) => this.uploadFile(e)}  />

новый компонент, созданный тканью, который не позволяет пользователю перемещать объект холста

...