Невозможно повернуть изображение с Reel в Reactjs - PullRequest
0 голосов
/ 10 апреля 2019

Довольно плохо знаком с React, но я пытаюсь использовать катушку jQuery для поворота списка изображений на 360 градусов. У меня работает чисто реализация jQuery, но я хочу перенести ее в Reactjs.

Когда я пытаюсь установить атрибут data-images в теге img, барабан не может найти остальные изображения.

import React, { Component } from 'react';
import styles from "./main.css";
require('tracking')
require('jquery.reel')

import pic from './pics/cascadion/Cascadio2017 360 turn 06__0000.png'

class MainView extends Component{

    constructor(props){
        super(props);

        this.style = styles.mainView;
        this.tracker = null
    }

    componentDidMount () {
        tracking.ColorTracker.registerColor('red', function(r, g, b) {
            if (r > 175 && g < 90 && b < 90) {
                return true;
            }
            return false;
        });
        this.tracker = new window.tracking.ColorTracker("red")

        window.tracking.track("#img", this.tracker)
        this.tracker.on('track', event => {
            event.data.forEach(function(rect) {
                console.log("Found: " + rect.x + " and " + rect.y)
            })
        })

        $('#img').reel({
            frames: "360",
            images: "./pics/cascadion/Cascadio2017 360 turn 06__####.png",
        })
    }

    render(){
        return(
            <div className="container">
                <div className="row">
                    <div id="demo-container" className={"col justify-content-center " + this.style}>
                        <img 
                            id="img"
                            className="reel" 
                            src={pic} 
                            width="850" 
                            height="600" 
                        />
                    </div>
                </div>
            </div>
            );
        }
    }

export default MainView;

1 Ответ

0 голосов
/ 12 апреля 2019

Извините, я все еще новичок в этом, у меня неправильный путь.

App
 node_modules
 src
   components
     cascadion
       pics
         cascadion
 .bablerc
 package.json

Путь для data-images должен быть абсолютным путем: src/components/cascadion/pics/cascadion/Cascadio2017 360 turn 06__####.png

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...