React-画布渲染，单独的绘制逻辑和输入逻辑

如何解决React-画布渲染，单独的绘制逻辑和输入逻辑

很抱歉，在我搜索之前找不到这个问题了。

我目前正在创建React应用程序，需要将详细信息呈现到画布上。该程序本身将是一个地图创建程序。目前，尽管我想最终将其更改为konva或ocanvas，但我正在使用canvas上下文来绘制画布。

此刻我的问题是，我正在努力寻找一种分离所有内容的好方法，因为画布需要处理大量鼠标事件，渲染数据以及“工具”选择和一些数据处理。理想情况下，我想将此代码分隔为单独的单元，以便所有代码都不会放在一个地方。 IE：渲染逻辑，输入逻辑等...我将如何去做？请记住，可能需要将地图传递到子单元中。

下面是我目前拥有的代码的片段，我已删除了一些详细信息，但保留了所有鼠标代码和值：

import React,{
  useState,useEffect,Fragment
} from "react";
import {
  useCanvas
} from './canvashooks/CanvasHooks.js';

const Canvas = ({map}) => {

  //far to many variables,is there a better way of doing this?
  const [offX,setOffX] = useState(0);
  const [offY,setOffY] = useState(0);
  const [scale,setScale] = useState(1.0);
  const [mouseDown,setMouseDown] = useState(false);
  const [mouseUp,setMouseUp] = useState(false);
  const [initialX,setInitialX] = useState(0);
  const [initialY,setInitialY] = useState(0);
  const [offXStart,setOffXStart] = useState(0);
  const [offYStart,setOffYStart] = useState(0);


  const canvasRef = React.useRef(null);

  const draw = ctx => {
    console.log(map)
    ctx.clearRect(0,ctx.canvas.clientWidth,ctx.canvas.clientHeight)

    //draw the buildings:
    if (map.Buildings === undefined) {
      return;
    }
    //draw data from the map
  }
  useEffect(() => {

    const canvas = canvasRef.current
    const context = canvas.getContext('2d')
    draw(context)
  },[draw])

  const handleCanvasClick = (event) => {

  }

  const handleCanvasMouseDown = (event) => {
    let initialX = event.pageX;
    let initialY = event.pageY;
    setMouseDown(true);
    setInitialX(initialX);
    setInitialY(initialY);
    setOffXStart(offX);
    setOffYStart(offY);
  }

  const handleCanvasMouseUp = (event) => {
    console.log('Canvas Mouse Up');
    setMouseDown(false);
  }

  const handleCanvasDrag = (event) => {
    if (!mouseDown) {
      return;
    }
    let diffX = event.pageX - initialX;
    let diffY = event.pageY - initialY;

    let offX = offXStart + diffX;
    let offY = offXStart + diffY;
    setOffX(offX);
    setOffY(offY);
  }

  const handleCanvasMouseWheel = (event) => {
    if (event.deltaY < 0) {
      setScale(scale + 0.1)
    }

    if (event.deltaY > 0) {
      setScale(scale - 0.1)
    }
  }



  return ( 
    <div class = "box canvasContainer" >
    <canvas id = "renderCanvas"ref = {canvasRef} width = "1000" height = "1000" 
    onWheel = {handleCanvasMouseWheel} 
    onMouseMove = {handleCanvasDrag}
    onMouseUp = {handleCanvasMouseUp}
    onMouseDown = {handleCanvasMouseDown} 
    onClick = {handleCanvasClick}> Your browser doesnt support the canvas < /canvas>
    </div>
  );
};

export default Canvas;

解决方法

经过一些考虑和思考问题，我提出了以下解决方案：

在canvas类中，创建和初始化一系列“工具”，该初始化的一部分是提供一系列回调函数来更新状态IE：渲染比例和偏移量。画布的事件函数内的会在选定工具内调用事件。

此方法可扩展，因为可以将任何函数添加到回调中，这意味着可以对工具进行编码以执行任何操作。我还向该工具添加了一个render函数，该函数被称为last，并且可以根据工具将自定义元素呈现到屏幕上。