HOW - Canvas 入门系列之表格绘制工具（二）

已于 2024-04-22 22:44:34 修改
阅读量1.2k 收藏 9
点赞数 8
分类专栏： 前端 Canvas 学习专栏 文章标签： 前端 javascript 图形渲染
于 2024-04-10 18:30:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58540586/article/details/137604400
版权

目录

一、前言

通过这个系列，我们将学习 canvas 的基本内容，并且通过两个案例实现，即一个表格绘制工具（其支持表格数据渲染），一个画图工具（其支持常见图形绘制，以及撤销和恢复等功能），来掌握基于 canvas 的复杂交互实现。

今天我们首先实现一个表格绘制工具。

二、功能设计

  • 绘制表格数据并填充单元格内容
  • 单元格点击触发事件
  • 支持动态调整列宽

三、具体实现

1. 绘制表格数据并填充单元格内容

<canvas id="myCanvas" width="400" height="200"></canvas>

canvas {
  border: 1px solid #ccc;
}

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const data = [
  ['Name', 'Age', 'Gender'],
  ['Alice', 25, 'Female'],
  ['Bob', 30, 'Male'],
  ['Charlie', 35, 'Male'],
  ['Diana', 28, 'Female']
];
const columnWidths = [100, 50, 100]; // 列宽
const rowHeight = 30; // 行高
const borderWidth = 1; // 边框宽度

function drawTable() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#fff'; // 设置填充颜色为白色
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < data.length; i++) {
    for (let j = 0; j < data[i].length; j++) {
      const cellX = j === 0 ? 0 : columnWidths.reduce((accumulator, currentValue, idx) => { if (idx < j) { return accumulator + currentValue } else { return accumulator } }, 0);
      const cellY = i * rowHeight;
      const cellWidth = columnWidths[j];
      const cellHeight = rowHeight;

      // 绘制单元格边框
      ctx.strokeStyle = '#000'; // 设置边框颜色为黑色
      ctx.lineWidth = borderWidth;
      ctx.strokeRect(cellX, cellY, cellWidth, cellHeight);

      // 绘制单元格内容
      ctx.fillStyle = '#000'; // 设置文本颜色为黑色
      ctx.font = '14px Arial'; // 设置字体样式
      ctx.fillText(data[i][j], cellX + 5, cellY + 20); // 绘制文本内容
    }
  }
}

drawTable();

请添加图片描述

2. 单元格点击触发事件

2.1 点击单元格时触发 alert

思路：我们可以在单元格上添加点击事件，并在点击事件处理函数中获取单元格的内容，然后调用 alert() 方法进行弹窗提示。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const data = [
  ['Name', 'Age', 'Gender'],
  ['Alice', 25, 'Female'],
  ['Bob', 30, 'Male'],
  ['Charlie', 35, 'Male'],
  ['Diana', 28, 'Female']
];
const columnWidths = [100, 50, 100]; // 列宽
const rowHeight = 30; // 行高
const borderWidth = 1; // 边框宽度

// main code
canvas.addEventListener('click', function(event) {
  const x = event.offsetX;
  const y = event.offsetY;
  
  const rowIndex = Math.floor(y / rowHeight);
  
  // 注意，列是动态列宽
  let columnIndex = -1;
  let totalWidth = 0;
  for (let i = 0; i < columnWidths.length; i++) {
    totalWidth += columnWidths[i];
    if (x < totalWidth) {
      columnIndex = i;
      break;
    }
  }
  if (data[rowIndex] && data[rowIndex][columnIndex]) {
    const content = data[rowIndex][columnIndex];
    alert(content);
  }
});

function drawTable() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#fff'; // 设置填充颜色为白色
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < data.length; i++) {
    for (let j = 0; j < data[i].length; j++) {
      const cellX = j === 0 ? 0 : columnWidths.reduce((accumulator, currentValue, idx) => { if (idx < j) { return accumulator + currentValue } else { return accumulator } }, 0);
      const cellY = i * rowHeight;
      const cellWidth = columnWidths[j];
      const cellHeight = rowHeight;

      // 绘制单元格边框
      ctx.strokeStyle = '#000'; // 设置边框颜色为黑色
      ctx.lineWidth = borderWidth;
      ctx.strokeRect(cellX, cellY, cellWidth, cellHeight);

      // 绘制单元格内容
      ctx.fillStyle = '#000'; // 设置文本颜色为黑色
      ctx.font = '14px Arial'; // 设置字体样式
      ctx.fillText(data[i][j], cellX + 5, cellY + 20); // 绘制文本内容
    }
  }
}

drawTable();

在这个实现中，需要注意不同列的宽度不一样，我们需要根据点击位置来动态计算对应的列索引。可以通过循环遍历每一列的宽度，累加宽度值，并在累加值大于点击位置的 x 坐标时，就找到了对应的列索引。然后再根据点击位置的 y 坐标计算出行索引。这样就可以正确地根据点击位置找到对应的单元格了。

2.2 点击单元格时触发高亮色

思路：我们可以在点击事件处理函数中记录当前点击的单元格索引，然后在绘制表格的函数中根据记录的索引信息来绘制高亮效果。
请添加图片描述

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const data = [
  ['Name', 'Age', 'Gender'],
  ['Alice', 25, 'Female'],
  ['Bob', 30, 'Male'],
  ['Charlie', 35, 'Male'],
  ['Diana', 28, 'Female']
];
const columnWidths = [100, 50, 100]; // 列宽
const rowHeight = 30; // 行高
const borderWidth = 1; // 边框宽度

// main code
let highlightedCell = null; // 用于记录高亮的单元格索引
canvas.addEventListener('click', function(event) {
  const x = event.offsetX;
  const y = event.offsetY;
  
  const rowIndex = Math.floor(y / rowHeight);
  
  // 注意，列是动态列宽
  let columnIndex = -1;
  let totalWidth = 0;
  for (let i = 0; i < columnWidths.length; i++) {
    totalWidth += columnWidths[i];
    if (x < totalWidth) {
      columnIndex = i;
      break;
    }
  }
  if (data[rowIndex] && data[rowIndex][columnIndex]) {
	highlightedCell = {
      row: rowIndex,
      column: columnIndex,
    }
    drawTable();
  }
});

function drawTable() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#fff'; // 设置填充颜色为白色
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < data.length; i++) {
    for (let j = 0; j < data[i].length; j++) {
      const cellX = j === 0 ? 0 : columnWidths.reduce((accumulator, currentValue, idx) => { if (idx < j) { return accumulator + currentValue } else { return accumulator } }, 0);
      const cellY = i * rowHeight;
      const cellWidth = columnWidths[j];
      const cellHeight = rowHeight;
      
      if (highlightedCell && highlightedCell.row === i && highlightedCell.column === j) {
        ctx.fillStyle = '#f0f0f0'; // 设置高亮背景色为灰色
        ctx.fillRect(cellX, cellY, cellWidth, cellHeight);
      }

      // 绘制单元格边框
      ctx.strokeStyle = '#000'; // 设置边框颜色为黑色
      ctx.lineWidth = borderWidth;
      ctx.strokeRect(cellX, cellY, cellWidth, cellHeight);

      // 绘制单元格内容
      ctx.fillStyle = '#000'; // 设置文本颜色为黑色
      ctx.font = '14px Arial'; // 设置字体样式
      ctx.fillText(data[i][j], cellX + 5, cellY + 20); // 绘制文本内容
    }
  }
}

drawTable();

3. 支持动态调整列宽

要支持拖拽调整列宽，你可以通过监听鼠标按下、移动和释放事件来实现。

并且，我们添加了一个小优化，在鼠标移动到边框范围内时，鼠标将展示为拖拽形态。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const data = [
  ['Name', 'Age', 'Gender'],
  ['Alice', 25, 'Female'],
  ['Bob', 30, 'Male'],
  ['Charlie', 35, 'Male'],
  ['Diana', 28, 'Female']
];
const columnWidths = [100, 50, 100]; // 列宽
const rowHeight = 30; // 行高
const borderWidth = 1; // 边框宽度

// main code
let isResizing = false; // 是否正在调整列宽
let resizingColumnIndex = -1; // 正在调整列宽的列索引
let startX = 0; // 调整列宽时鼠标按下的起始位置
canvas.addEventListener('mousemove', function(event) {
  // 悬浮遇到边框切换鼠标形态
  const x = event.offsetX;
  let isHovering = false;
  let totalWidth = 0;
  for (let i = 0; i < columnWidths.length - 1; i++) {
    totalWidth += columnWidths[i];
    if (Math.abs(x - totalWidth) < 5) { // 假设拖拽宽度小于5像素
      isHovering = true;
      break;
    }
  }
  if(isHovering) {
    canvas.style.cursor = 'col-resize';
  } else {
    canvas.style.cursor = 'default';
  }
  
  // 若鼠标 mousedown 的区域是边框并且正在拖动
  if (isResizing) {
    const offsetX = x - startX;
    columnWidths[resizingColumnIndex] += offsetX; // 调整列宽

    startX = x;
    drawTable(); // 重新绘制表格以更新列宽
  }
});
canvas.addEventListener('mousedown', function(event) {
  const x = event.offsetX;

  // 判断鼠标是否在列边界上
  let totalWidth = 0;
  for (let i = 0; i < columnWidths.length - 1; i++) {
    totalWidth += columnWidths[i];
    if (Math.abs(x - totalWidth) < 5) { // 假设拖拽宽度小于5像素
      isResizing = true;
      resizingColumnIndex = i;
      startX = x;
      break;
    }
  }
});
canvas.addEventListener('mouseup', function(event) {
  isResizing = false;
  resizingColumnIndex = -1;
});


function drawTable() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#fff'; // 设置填充颜色为白色
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < data.length; i++) {
    for (let j = 0; j < data[i].length; j++) {
      const cellX = j === 0 ? 0 : columnWidths.reduce((accumulator, currentValue, idx) => { if (idx < j) { return accumulator + currentValue } else { return accumulator } }, 0);
      const cellY = i * rowHeight;
      const cellWidth = columnWidths[j];
      const cellHeight = rowHeight;

      // 绘制单元格边框
      ctx.strokeStyle = '#000'; // 设置边框颜色为黑色
      ctx.lineWidth = borderWidth;
      ctx.strokeRect(cellX, cellY, cellWidth, cellHeight);

      // 绘制单元格内容
      ctx.fillStyle = '#000'; // 设置文本颜色为黑色
      ctx.font = '14px Arial'; // 设置字体样式
      ctx.fillText(data[i][j], cellX + 5, cellY + 20); // 绘制文本内容
    }
  }
}

drawTable();
@PHARAOH
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
你不知道的 Canvas 表格交互
github_38493710的博客
03-30 1637
背景 S2 是 AntV 在多维交叉分析表格领域的解决方案，主要用于看数分析, S2 采用 canvas 来进行表格绘制 (基于 易用、高效、强大的 2D 可视化渲染引擎 G ) , 同时内置大量的交互能力来辅助用户看数, 如 行列联动高亮 单选/多选高亮 刷选高亮 行高列宽动态调整 列头隐藏 等, 同时还支持 自定义交互, 本文主要介绍 S2 是如何实现这些交互的。 DOM 交互和 Canvas 交互的区别 以单元格点击为例, 得益于强大的 CSS3选择器, 我们可以准确的监听任意 do
使用CanvasExcel：以HTML5 Canvas绘制动态Excel的创新解决方案
gitblog_00088的博客
04-07 744
使用CanvasExcel：以HTML5 Canvas绘制动态Excel的创新解决方案 项目地址:https://gitcode.com/bojue/canvas-excel 项目简介 CanvasExcel 是一个轻量级的JavaScript库，利用HTML5的<canvas>元素来动态渲染Excel文件。它旨在提供一种在网页上展示和操作Excel数据的新方法，无需依赖Offi...
canvas-table:在Canvas中快速执行表格
05-02
帆布桌 Canvas中可自定义的小型快速表实现，带有字符串截断支持。 同时支持浏览器和 演示版 屏幕截图 安装 npm i canvas-table 用法 在NodeJS中的用法 import { CanvasTable , CTConfig } from "canvas-table" ; import { createCanvas } from "canvas" ; const canvas = createCanvas ( 640 , 250 ) ; const config : CTConfig = { columns , data } ; const ct = new CanvasTable ( canvas , config ) ; await ct . generateTable ( ) ; await ct . renderToFile ( "test-table.png"
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
最新发布
weixin_58540586的博客
05-17 1376
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
canvas——绘制表格
sleepwalker_1992的专栏
06-04 9907
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制表格</title> </head> <body> <div id="container"> <ca...
使用canvas画类似excel表格
热门推荐
weixin_43232488的博客
01-30 1万+
思路 先把表格分成3个canvas来画, 因为 excel表的左边和上面都是跟随内容来移动 通过oniscroll 事件来进行联动 如果需要再进行导出excel ,可以使用JsonExportExcel插件, 如果你需要在移动某个小表格之后出现弹框,可以使用添加,或删除dom放在canvas上面 用transfrom或position 来实现 HTML &lt;!DOCTYPE html&g...
canvas绘制网格(增加坐标)
qq_21058391的博客
09-06 6014
1.接着上篇文章，我打算给绘制的表格增加坐标，这样看起来比较方便 //绘制网格 function drawGrid(CANVAS_WIDTH,CANVAS_HEIGHT,GRID_WIDTH,GRID_HEIGHT){ var rows=parseInt(CANVAS_WIDTH/GRID_WIDTH); var cols=parseInt(CANVAS_HEIGHT/GRID_HE
微信小程序canvas绘制表格
Fantasywt的博客
11-29 1146
微信小程序canvas 2d 绘制表格,导出为图片。
Canvas绘制评分网格图表
qq_43225508的博客
04-10 245
Canvas绘制评分网格图表
canvas绘制表格
追梦猪的博客
02-16 2377
追梦猪（zmz）最近在学习canvas画图表，所有收藏一下相关的demo，供有缘人参考，Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。html部分<canv...
canvas绘制表格数据
weixin_30257433的博客
07-15 1685
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制表格</title> </head> <body> <div id="container"> <c...
如何用Canvas绘制精美的手表
11-24
绘制时钟Canvas需要的知识点，案例 绘制时钟Canvas，源代码。精美手表、时钟案例。
JS+html5 canvas实现的简单绘制折线图效果示例
10-20
主要介绍了JS+html5 canvas实现的简单绘制折线图效果,结合实例形式分析了js结合HTML5 canvas技术实现图形绘制的数值运算与数组遍历等操作技巧,需要的朋友可以参考下
gif-canvas:轻松将GIF绘制到画布上
05-12
轻松在画布上绘制GIF！ 安装 npm install --save gif-canvas 或者 < script src =" dist/gif-canvas.js " > </ script > 用法 var gc = GifCanvas ( '/my.gif' , { fps : 30 } ) gc . canvas // Gif ...
react-sketch-canvas：使用SVG绘制的React组件
02-06
使用SVG作为画布的React手绘矢量绘图工具 :paintbrush:总览产品特点支持桌面和移动。 接受来自鼠标，触摸和图形输入板的输入。要求需要React 16.4 取决于和想在使用之前测试React Sketch Canvas吗？ 试试安装如果您...
react-drawable-canvas:用于可绘制画布的React.js组件
05-09
React.js的可绘制画布组件。 安装 $ npm install react-drawable-canvas --save 使用示例： const React = require ( 'react' ) ; const DrawableCanvas = require ( 'react-drawable-canvas' ) ; const App = ...
微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分
09-01
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas，并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图，即用户在社交平台上分享时看到的个性...
vue ---- 基于canvas的绘制海报组件
03-04
在这个“vue ---- 基于canvas的绘制海报组件”的项目中，开发者利用 Vue 2.0 版本创建了一个专用于在网页上绘制H5海报的组件。这个组件充分利用了HTML5的Canvas元素，提供了一种灵活的方式来动态生成和定制海报。 ...
HTML5——Canvas图表插件 chart
2401_85013415的博客
05-15 298
【代码】HTML5——Canvas图表插件 chart。
node-canvas不支持直接绘制emoji表情，如何解决这一问题
06-08
是的，node-canvas默认不支持直接绘制emoji表情。不过，可以使用一些第三方库来解决这个问题。 其中一个比较常用的库是node-canvas-emoji，它提供了一个方便的方法 `fillTextWithEmoji`，可以在canvas上直接绘制emoji表情。代码如下： ```javascript const { createCanvas } = require('canvas'); const { fillTextWithEmoji } = require('node-canvas-emoji'); const canvas = createCanvas(200, 200); const ctx = canvas.getContext('2d'); ctx.font = '50px Arial'; ctx.textAlign = 'center'; fillTextWithEmoji(ctx, '😀', 100, 100); ``` 使用`fillTextWithEmoji`方法时，需要将canvas的2d上下文对象和要绘制的文本内容作为参数传入。这个方法会自动检测文本中的emoji表情，并将它们替换为对应的图片，从而正确地在canvas上绘制emoji表情。 除了node-canvas-emoji外，还有其他一些第三方库也可以用来在node-canvas上绘制emoji表情，比如canvas-emoji和canvas-unicode。使用这些库时，需要先安装依赖，并按照文档说明进行调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值