React实现jsxGraph 图形试画框

JSXGraph是Web浏览器中的交互式几何，功能绘图，图表和数据可视化的跨浏览器JavaScript库。

用react组件化，电脑和手机，平板上都可以看到点击的点的名称

如图：

在左边框里输入代码，右边可以实现图形

react父组件如下：

import GraphComponent from './GraphComponent';
import Menubar from './Menubar';
require('styles/graphPage.scss');
class GraphPage extends React.Component{
  constructor(props) {
    super(props);

    this.textChange=(e)=>{
      e.preventDefault();
      let data=e.currentTarget.value
      const values=data.split('n');
      let datas=values.join('');
      this.setState({values:datas});

    }

    this.handleClick=(current)=>{
        this.setState({currentName:current});

    }

    this.state = {};
  }
  render(){
    const { values='',currentName={}} = this.state;
    console.log('currentName',currentName);
    return (
    <div className='graph-container'>
      <div className='graph-problem'>
        <div className="top-left">
          <textarea name="" id="codeArea" cols="30" rows="10" onChange={this.textChange}></textarea>
          <div className="pointPosition">当前:{values ? currentName.name : ''} </div>
        </div>
        <GraphComponent values={values} handle={this.handleClick.bind(this)} change={this.textChange}/>
      </div>
    </div>
    );
  }
}
GraphPage.defaultProps = {
};

export default GraphPage;

import JXG from 'jsxgraph';

class GraphComponent extends React.Component{
  constructor(props){
    super(props);

    this.shouldComponentUpdate=(nextProps,nextState)=> {
      // return nextState.current == this.state.current;
      return nextProps.values !== this.props.values;
    }
    this.componentDidMount = () =>{
      let board = JXG.JSXGraph.initBoard('box',{boundingbox: [-10,10,-10],axis:false,showCopyright: false,showNavigation: false,showReload: false});
      board.jc = new JXG.JessieCode();
      board.jc.use(board);
      board.on('up',(e) => {
        let allUnderMouse= board.getAllUnderMouse((e.changedTouches && e.changedTouches[0]) || e);//手机和pc的event对象结构不一样,这是一个大坑！！！
        // console.log('allUnderMouse',allUnderMouse);
        board.addTouchEventHandlers(true);
        let points=allUnderMouse.filter((item)=>{ //过滤出点
          return item instanceof JXG.Point;
        })
        const {handle,values} = this.props;
        if(handle && points){
          handle(points[0]);
        }

      });
      this.board = board;
      board.update();
    }

    this.componentWillUnmount = () =>{
      if (this.board) {
        JXG.JSXGraph.freeBoard(this.board);
      }
    }

    this.state={};
  }
  render(){
    const {values,change,handle} = this.props;
    let jc=(this.board ||{}).jc;
    if(jc){
      if(values){
        jc.parse(values);
      }else{
          JXG.JSXGraph.freeBoard(this.board);
          this.board = JXG.JSXGraph.initBoard('box',showReload: false});
          jc.parse=null;
          this.board.update();

      }

    }
    return (
      <div className="top-right">
        <div id="box" className="jxgbox" style={{width:'500px',height:'500px',border:'1px solid #000'}}></div>
        <br/>
        <div id="currentName"></div>
      </div>
    );
  }
}

export default GraphComponent;





scss代码如下：


.graph-container{
  font-size: 1.2rem;
  .graph-problem{
    margin-top: 5rem;
    display: flex;
    .top-left{
      flex:1;
      textarea {
        overflow: auto;
        width: 500px;
        height: 500px;
        margin-left: 10rem;
      }
      .pointPosition{
        margin-left: 30rem;
      }
    }

    .top-right{
      flex:1;

    }
  }
}



 


参考链接：http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Board.html
  可以在这个http://bin.sketchometry.com/页面的画图代码copy过来复制到左边框里，右边就能看到一样的图形 







            

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!