react-pixi

react-pixi copied to clipboard

Could you please explain how to work with Graphics component. It will be better if you add the simple example.

I have never used Graphics, so I can't really explain it. You might get some information by looking at this PR here.

Hello, yeah it's correct way. It will be great if you add this example to examples in your repository.I think it will helps other developers who don't know how to use graphics.

8 дек. 2016 г. 11:47 ПП пользователь "Gary Haussmann" < [email protected]> написал:

I have never used Graphics, so I can't really explain it. You might get some information by looking at this PR here https://github.com/Izzimach/react-pixi/pull/64.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Izzimach/react-pixi/issues/66#issuecomment-265865278, or mute the thread https://github.com/notifications/unsubscribe-auth/ARj9YPOq_BI06FE8m0mtoYJR8HzPFevgks5rGHregaJpZM4LH22C .

I didn't notice this post when i posted my issue.

I just made a rect and circle component out of Graphics.

It could use more features, but it should show how it's possible to do shapes with react-pixi:

export class Rect extends React.Component {
    drawRect = ({ x, y, width, height, rotation }) => {
        this.refs.graphics.clear();
        this.refs.graphics.lineStyle(2, 0x0000FF, 1);
        this.refs.graphics.beginFill(0x0000FF, 1);
        this.refs.graphics.drawRect(0, 0, width, height);
        this.refs.graphics.endFill();
    }

    componentDidMount() {
        this.drawRect(this.props);
    }

    componentWillReceiveProps(props) {
        this.drawRect(props);
    }

    render() {
        return <Graphics ref='graphics' x={this.props.x} y={this.props.y}/>;
    }
}

@funkjunky I think it's better to write like this. :)

export class Rect extends React.Component {
    drawRect = ({ x, y, width, height, rotation }) => {
        this.refs.graphics.clear();
        this.refs.graphics.lineStyle(2, 0x0000FF, 1);
        this.refs.graphics.beginFill(0x0000FF, 1);
        this.refs.graphics.drawRect(0, 0, width, height);
        this.refs.graphics.endFill();
    }

    componentDidMount() {
        this.drawRect(this.props);
    }

    shouldComponentUpdate(nextProps) {
        return !shallowEqual(this.props, nextProps);
    }

    componentWillUpdate() {
        this.drawRect(this.props);
    }

    render() {
        return <Graphics ref='graphics' x={this.props.x} y={this.props.y}/>;
    }
}

Does anyone have a repo around somewhere with a graphics example? I can't seem to get this kind of thing to work.

Hi, Gary. I have used React-pixi library in the project one year ago. I enjoy this library and now I have some free time. How can I help you with development and Is it still supported by you? I saw opened an issue with Graphic example and I think I can implement example because I solved this problem in my project.

Best regards, Oleksii.

2017-08-13 22:56 GMT+03:00 Matt Erhart [email protected]:

Does anyone have a repo around somewhere with a graphics example? I can't seem to get this kind of thing to work.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Izzimach/react-pixi/issues/66#issuecomment-322063711, or mute the thread https://github.com/notifications/unsubscribe-auth/ARj9YD8wdoORshhIsPYyIuaskEB6h6Ggks5sX1UBgaJpZM4LH22C .

I try to support react-pixi when I can, but it's not much. If you want to add examples for fix something do it and submit PR, it's OK.