Jquery的Canvas交互式表格示例

最新推荐文章于 2024-10-16 16:37:05 发布

天天进步2015

最新推荐文章于 2024-10-16 16:37:05 发布

阅读量338

点赞数 2

分类专栏：编程技巧文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/exlink2012/article/details/142561014

版权

编程技巧专栏收录该内容

83 篇文章 0 订阅

订阅专栏

在 <head> 中添加了 CSS 样式定义，包括 #inputbox 的样式。
创建了一个 <div id="container"> 来包含 Canvas 和我们将要添加的单元格元素。
#inputbox 样式设置为半透明黄色背景和黑色边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 交互式表格示例 - 带自定义右键菜单</title>
    <style>
        #container {
            position: relative;
            width: 300px;
            height: 300px;
        }
        #myCanvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .cell {
            position: absolute;
            width: 100px;
            height: 100px;
            z-index: 2;
            box-sizing: border-box;
        }
        #inputbox {
            background-color: rgba(255, 255, 0, 0.5);
            border: 2px solid #000;
        }
        #contextMenu {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 5px 0;
            z-index: 1000;
        }
        #contextMenu div {
            padding: 5px 20px;
            cursor: pointer;
        }
        #contextMenu div:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="myCanvas" width="300" height="300"></canvas>
    </div>
    <div id="contextMenu">
        <div id="copy">复制</div>
        <div id="paste">粘贴</div>
    </div>

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const container = document.getElementById('container');
        const contextMenu = document.getElementById('contextMenu');
        
        // 设置表格参数
        const rows = 3;
        const cols = 3;
        const cellWidth = 100;
        const cellHeight = 100;

        let copiedContent = null;

        // 绘制表格
        function drawGrid() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (let i = 0; i <= rows; i++) {
                ctx.beginPath();
                ctx.moveTo(0, i * cellHeight);
                ctx.lineTo(cols * cellWidth, i * cellHeight);
                ctx.stroke();
            }
            for (let j = 0; j <= cols; j++) {
                ctx.beginPath();
                ctx.moveTo(j * cellWidth, 0);
                ctx.lineTo(j * cellWidth, rows * cellHeight);
                ctx.stroke();
            }
        }

        // 处理左键点击事件
        canvas.addEventListener('click', (event) => {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            const col = Math.floor(x / cellWidth);
            const row = Math.floor(y / cellHeight);
            
            if (row < rows && col < cols) {
                const oldInputBox = document.querySelector('#inputbox');
                if (oldInputBox) {
                    oldInputBox.remove();
                }

                const inputBox = document.createElement('div');
                inputBox.id = 'inputbox';
                inputBox.className = 'cell';
                inputBox.style.left = `${col * cellWidth}px`;
                inputBox.style.top = `${row * cellHeight}px`;

                container.appendChild(inputBox);
            }
        });

        // 处理右键点击事件
        canvas.addEventListener('contextmenu', (event) => {
            event.preventDefault();
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            contextMenu.style.display = 'block';
            contextMenu.style.left = `${event.clientX}px`;
            contextMenu.style.top = `${event.clientY}px`;
        });

        // 处理复制和粘贴
        document.getElementById('copy').addEventListener('click', () => {
            const inputBox = document.querySelector('#inputbox');
            if (inputBox) {
                copiedContent = inputBox.innerHTML;
            }
            contextMenu.style.display = 'none';
        });

        document.getElementById('paste').addEventListener('click', () => {
            const inputBox = document.querySelector('#inputbox');
            if (inputBox && copiedContent) {
                inputBox.innerHTML = copiedContent;
            }
            contextMenu.style.display = 'none';
        });

        // 点击其他地方时隐藏右键菜单
        document.addEventListener('click', (event) => {
            if (event.target.closest('#contextMenu') === null) {
                contextMenu.style.display = 'none';
            }
        });

        // 初始绘制
        drawGrid();
    </script>
</body>
</html>