https://github.com/zsytssk/react-laya

use react write laya
https://github.com/zsytssk/react-laya

canvas jsx laya react

Last synced: 27 days ago
JSON representation

use react write laya

• Host: GitHub
• URL: https://github.com/zsytssk/react-laya
• Owner: zsytssk
• License: mit
• Created: 2018-03-22T01:10:57.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T10:56:04.000Z (almost 2 years ago)
• Last Synced: 2024-09-27T19:41:03.801Z (about 1 month ago)
• Topics: canvas, jsx, laya, react
• Language: TypeScript
• Size: 1.97 MB
• Stars: 3
• Watchers: 4
• Forks: 1
• Open Issues: 85
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# install

`npm install react-laya -save`

# example

[completecode](https://github.com/zsytssk/react-laya/tree/master/example/example1)

```tsx

import * as React from "react";

import { render } from "react-dom";

import { Stage, Text, Image } from "react-laya";

class App extends React.Component {

  state = {

    text: "default",

    img: "",

    rotate: 0,

    button: ""

  };

  interval: any;

  handleClick = () => {

    this.setState({

      text: "hello world"

    });

  };

  clickImage = event => {

    event.stopPropagation();

    clearInterval(this.interval);

    this.interval = setInterval(() => {

      this.setState({

        rotate: this.state.rotate + 10

      });

    }, 16);

  };

  text: any;

  componentDidMount() {

    Laya.loader.load(

      "res/atlas/comp.atlas",

      Laya.Handler.create(null, () => {

        this.setState({

          img: "comp/image.png",

          button: "comp/button.png"

        });

      })

    );

  }

  render() {

    let state = this.state;

    return (

       console.log(node)} onRightClick={this.handleClick}>

        

        

      

    );

  }

}

type TestProps = {

  skin: string;

  rotate?: number;

  clickImage?: (any) => void;

};

class Test extends React.Component {

  componentDidMount() {}

  render() {

    return (

       console.log(node)}

        x={200}

        y={200}

        anchorX={0.5}

        anchorY={0.5}

        skin={this.props.skin}

        rotation={this.props.rotate}

        onClick={this.props.clickImage}

      />

    );

  }

}

Laya.init(500, 300);

var renderelement = document.querySelector("#layaContainer div");

let app = ;

render(app, renderelement);

```

# inspiration

* [react-konva](https://github.com/lavrton/react-konva)