Question

我正在尝试使图像在浏览器中可编辑。我找到了this，并尝试重新使用此代码供我使用。这就是我最终得到的：

export default class CanvasComponent extends React.Component {
    constructor(props) {
        super(props);
        this.lastX = 0;
        this.lastY = 0;
        this.ctx = 0;
    }

    componentWillReceiveProps(nextProps) {
        this.ctx = document.getElementById('canvas').getContext('2d');
        const img = new Image();
        img.onload = () => {
            this.ctx.drawImage(img, 0, 0, nextProps.width, nextProps.height);
        };
        img.src = URL.createObjectURL(nextProps.image)
    }

    handleClick = () => {
        const canvas = document.getElementById('canvas');
        canvas.addEventListener('click', (e) => {
            this.Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
        })
    };

    Draw = (x, y) => {
        console.log('drawing');
        this.ctx.beginPath();
        this.ctx.strokeStyle = 'red';
        this.ctx.lineWidth = 5;
        this.ctx.lineJoin = "round";
        this.ctx.moveTo(this.lastX, this.lastY);
        this.ctx.lineTo(x, y);
        this.ctx.closePath();
        this.ctx.stroke();
        this.lastX = x;
        this.lastY = y;
    };

    render() {
        return (
            <div>
                <canvas onClick={this.handleClick} width={this.props.width} height={this.props.height} id={'canvas'}/>
            </div>
        );
    }
}

我真的不了解画布（第一次使用它），所以我可能做的事情确实很愚蠢（请不要大喊大叫）。

现在，代码的行为如下：https://youtu.be/4rvGigRvJ8E

我无法将其制成gif。抱歉

我想发生的事情：当用户单击图像时，我希望出现一个点，而不是单击。我该如何实现？

新的Draw方法

Draw = (x, y) => {
    console.log('drawing');
    this.ctx.beginPath();
    this.ctx.strokeStyle = 'red';
    this.ctx.lineWidth = 5;
    // x, y are the cords, 5 is the radius of the circle and the last 2 things specify full circle.
    this.ctx.arc(x, y, 5, 0, 2 * Math.PI);
    this.ctx.stroke();
    this.lastX = x;
    this.lastY = y;
};

Answer 1

您的绘制代码似乎正在尝试绘制一条线而不是一个圆…

要绘制一个圆形，请看此示例。

this.ctx.beginPath();
this.ctx.strokeStyle = 'red';
this.ctx.lineWidth = 5;
// x, y are the cords, 5 is the radius of the circle and the last 2 things specify full circle.
this.ctx.arc(x, y, 5, 0, 2 * Math.PI);
this.ctx.stroke();

记录https://developer.mozilla.org/kab/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Arcs

此外，您似乎还试图附加一个列表器，而不是在侦听中起作用，传递给onClick的函数将在每次单击时调用，而不必在其中附加一个点击侦听器。

在单击画布的位置添加一个点

1 个答案: