为canvas绘制的图形设置点击事件

效果：

 

原理：

给canvas设置点击事件，点击时获取点击位置的信息，通过判断点击位置是否包含在图形中来执行对应的效果。

 

详解：

1.通过getBoundingClientRect方法获取canvas相对于可视区域的偏移量

2.canvas点击事件触发时使用clientX、clientY方法获取点击位置，计算可得到点击位置在canvas中的坐标

3.清空画布

4.重绘画布，在绘制完每个图形的时候都执行一次isPointInPath方法判断点击位置是否在该图形中，决定是否要执行onClick事件

 

代码：（react hook语法）

 

index.js

import React, { useEffect, useRef, useState } from 'react';
import { DrawImg } from './draw';
import { MenuInfo } from './config';
import styles from './index.less';

const Home = () => {
    // canvas
    const meCanvas = useRef();
    // 画布
    const ctx = useRef();
    // canvas位置
    const [cInfo, setCInfo] = useState({ top: 0, left: 0 });

    /* 获取canvas位置 */
    useEffect(() => {
        //使canvas铺满可视区域
        meCanvas.current.width = document.documentElement.clientWidth;
        meCanvas.current.height = document.documentElement.clientHeight;
        //更新canvas位置
        setCInfo(meCanvas.current.getBoundingClientRect())
    }, [])

    /* 绘制图形 */
    useEffect(() => {
        ctx.current = meCanvas.current.getContext('2d');
        const qbb = ctx.current;
        qbb.strokeStyle = "#fff";
        qbb.fillStyle = "#fff";
        MenuInfo.forEach(i => {
            DrawImg({
                ctx: qbb, ...i, onClick: () => {
                    console.log(i.msg)
                }
            })
        })
    }, [])

    /* 画布点击事件 */
    const CanvasOnClick = (e) => {
        ctx.current.clearRect(0, 0, meCanvas.current.width, meCanvas.current.height);
        MenuInfo.forEach(i => {
            DrawImg({
                ctx: ctx.current, ...i, onClick: () => {
                    console.log(i.msg)
                }
            }, { x: e.clientX - cInfo.left, y: e.clientY - cInfo.top })
        })
    }

    return <div>
        <canvas onClick={CanvasOnClick} ref={meCanvas} className={styles.meCanvas} width={1000} height={1000}></canvas>
    </div>
}

export default Home;

 

draw.js

/* 绘制六边形 */
export const DrawImg = (ctxMsg, position) => {
    const { ctx, x = 50, y = 50, length = 50, onClick = () => { } } = ctxMsg;
    const meLength = Math.sqrt(Math.pow(length, 2) / 2);
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + meLength, y - meLength);
    ctx.lineTo(x + 2 * meLength, y);
    ctx.lineTo(x + 2 * meLength, y + length);
    ctx.lineTo(x + meLength, y + length + meLength);
    ctx.lineTo(x, y + length);
    ctx.lineTo(x, y);

    if (position && ctx.isPointInPath(position.x, position.y)) {
        ctx.fill();
        ctx.stroke();
        onClick();
    } else {
        ctx.stroke();
    }
}

　　

config.js

/* 菜单信息 */
export const MenuInfo = [
    { x: 100, y: 100, msg: 1 },
    { x: 200, y: 100, msg: 2 },
    { x: 300, y: 100, msg: 3 },
    { x: 400, y: 100, msg: 4 },
]

　　

index.less

.meCanvas{
    background-color: black;
}