canvas实现可以延长的直线，并且算出两条线之间的夹角

最新推荐文章于 2023-01-27 22:55:52 发布

刘同学要努力呀

最新推荐文章于 2023-01-27 22:55:52 发布

阅读量949

点赞数

文章标签： react.js html5 javascript

本文链接：https://blog.csdn.net/weixin_45575273/article/details/106539733

版权

直线可延长主要就是监听鼠标的各种事件

import React from 'react'
export default class Line extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            flag: false,
            x1: 200,
            y1: 100,
            x2: 10,
            y2: 100,
            currentMove: 1
        }
    }
    componentDidMount() {
        const { x1, y1, x2, y2 } = this.state
        if (document.getElementById("myCanvas")) {
            var canvas = document.getElementById("myCanvas")
            canvas.width = 200
            canvas.height = 100
            this.draw(x1, y1, x2, y2)
        }
    }

    draw = (x1, y1, x2, y2) => {
        var c = document.getElementById("myCanvas");
        var ctx1 = c.getContext("2d");
        ctx1.clearRect(0, 0, c.width, c.height)
        ctx1.beginPath()
        ctx1.moveTo(0, 0);
        ctx1.lineTo(x1, y1);
        // ctx1.arc(x1, y1, 5, 0, 2 * Math.PI)
        ctx1.stroke()
        ctx1.beginPath()
        ctx1.moveTo(0, 0);
        ctx1.lineTo(x2, y2);
        // ctx1.arc(x2, y2, 5, 0, 2 * Math.PI)
        ctx1.stroke()
    }
    handleMouseDown = (e) => {
        var c = document.getElementById("myCanvas");
        var b = document.body
        let x = e.clientX - c.offsetLeft - b.scrollLeft
        let y = e.clientY - c.offsetTop - b.scrollTop
        let { x1, y1, x2, y2 } = this.state
        if (x >= x1 - 5 && x <= x1 + 5 && y >= y1 - 5 && y <= y1 + 5) {
            this.setState({
                currentMove: 1
            })
            this.setState({
                flag: true
            })
        }
        if (x >= x2 - 5 && x <= x2 + 5 && y >= y2 - 5 && y <= y2 + 5) {
            this.setState({
                currentMove: 2
            })
            this.setState({
                flag: true
            })
        }
    }

    handleMouseMove = (e) => {
        var c = document.getElementById("myCanvas");
        var b = document.body
        if (this.state.flag) {
            let x = e.clientX - c.offsetLeft - b.scrollLeft
            let y = e.clientY - c.offsetTop - b.scrollTop
            if (this.state.currentMove == 1) {
                this.setState({
                    x1: x,
                    y1: y
                })
                this.draw(x, y, this.state.x2, this.state.y2)
            }
            else {
                this.setState({
                    x2: x,
                    y2: y
                })
                this.draw(this.state.x1, this.state.y1, x, y)
            }
        }
    }
    getAngle = ({ x: x1, y: y1 }, { x: x2, y: y2 }) => {
        const dot = x1 * x2 + y1 * y2
        const det = x1 * y2 - y1 * x2
        const angle = Math.atan2(det, dot) / Math.PI * 180
        return Math.round(angle + 360) % 360
    }

    handleMouseUp = (e) => {
        const {x1,y1,x2,y2} = this.state
        //两个零分别是起始点的x轴坐标和y轴坐标（获取夹角的两个零也是一样的）
        var x1length = Math.sqrt(Math.pow(x1-0, 2) + Math.pow(y1-0, 2));
        var x2length = Math.sqrt(Math.pow(x2-0, 2) + Math.pow(y2-0, 2));
        // console.log(x1length,x2length,'handleMouseUp');
        //获取两条线之间的夹角
        const angle = this.getAngle({
            x: this.state.x1 - 0,
            y: this.state.y1 - 0,
        }, {
            x: this.state.x2 - 0,
            y: this.state.y2 - 0,
        })
        // console.log(angle, 'angle');
        this.setState({
            flag: false
        })
    }

    render() {
        return (
            <div style={{ margin: 100 }}>
                <canvas onMouseUp={this.handleMouseUp} onMouseMove={this.handleMouseMove} onMouseDown={this.handleMouseDown} id="myCanvas" ></canvas>
            </div>
        )
    }
}

注意：canvas容器的宽高不要直接在canvas标签内写，这样设的宽高不准确