0

我是前端的初学者，我有一个用例允许用户选择图像并在其上绘制点。后来我想收集绘制点的坐标并用它们做一些基本的数学运算，比如计算距离、面积等。

我正在使用 react canvas draw 来完成绘图。下面是我到目前为止所做的粗略代码。

import React, {Component} from 'react'
import CanvasDraw from 'react-canvas-draw'

class DemoApp extends Component {

    constructor (props) {
        super()

        this.state = {
            showCanvas : false,
            image : null,
            coords : {
                p1: null,
                p2: null
            },
            canvasHeight: 500,
            canvasWidth: 800,
            lazyRadius : 0,
            brushRadius : 5
        }
    }    

    showCanvas = () => {
        this.setState ({ showCanvas : true })
    }

    handleCanvasChange = (e) => {
        let point = e.catenary.p1;
        
        let coord = this.state.coords;

        if (coord.p1 == null) {
            coord.p1 = [point.x, point.y]
        } else if (coord.p2 == null) {
            coord.p2 = [point.x, point.y]

            this.setState ({
                coords : coord
            })
        }
    }

    onImageChange = (event) => {
        this.setState ({
            showCanvas : false
        })

        if (event.target.files && event.target.files[0]) {
            this.setState({
                image: URL.createObjectURL(event.target.files[0])
            });
        }
    }

    render() {
        return (
            <div>
                <div>
                    <input type="file" onChange={this.onImageChange} /> <br/>
                    <button onClick={this.showCanvas}>Show Canvas</button>
                </div>
                {
                    this.state.showCanvas && 
                    <div>
                        <button
                            onClick={() => {
                            this.saveableCanvas.clear();
                            }}
                        >
                            Clear
                        </button>
                        <button
                            onClick={() => {
                            this.saveableCanvas.undo();
                            }}
                        >
                            Undo
                        </button>
                    </div>
                }

                {
                    this.state.showCanvas &&
                    <div className = "container">
                        <CanvasDraw
                            onChange={this.handleCanvasChange}
                            brushColor="rgba(0,0,0)"
                            imgSrc={this.state.image}
                            canvasHeight={this.state.canvasHeight}
                            canvasWidth={this.state.canvasWidth}
                            lazyRadius = {this.state.lazyRadius}
                            brushRadius = {this.state.brushRadius}
                            ref={canvasDraw => (this.saveableCanvas = canvasDraw)}
                        />
                    </div>
                }
            </div>
        )
    }
}

export default DemoApp

下图是结果。用户可以选择图像并在其上绘制东西（屏幕截图中缺少撤消和清除按钮）

可以选择图像并在其上绘制东西。

以状态存储坐标数据是一种好方法吗？因为如果我想将其扩展到多个图像，这看起来不可扩展。

以下是我坚持并需要一些帮助的事情。

  1. react-canvas-draw 读取 mouse-down 和 mouse-up 并根据鼠标指针绘制曲线。如何覆盖它以仅读取鼠标按下，以便我只会得到一个点而不是曲线？
  2. 我想允许用户选择多个图像。如何更改<input>标签以实现此目的？
  3. 我想在某种图库中显示多个图像。我没有找到太多关于如何做到这一点的资源。
  4. 从图库中选择图像时，应该会弹出一个模态框，其中包含画布绘制组件。我该怎么做？

react-canvas-draw 是我在谷歌上找到的一个库。有没有更好的方法来实现这个而不使用 react-canvas-draw？

提前致谢。

4

0 回答 0