HOW - Canvas 入门系列之基于vue-konva的多维表格（四）

已于 2024-05-17 13:56:38 修改
阅读量1.6k 收藏 18
点赞数 26
分类专栏： 前端 Canvas 学习专栏 文章标签： vue.js 前端 javascript
于 2024-05-17 11:40:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58540586/article/details/139000222
版权

一、背景

在 HOW - Canvas 入门系列之表格绘制工具（二） 中我们介绍过基于原生 Canvas 实现表格绘制，并支持如下能力：

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

今天我们将将基于 vue-konva 实现的一个表格渲染的组件。

二、涉及 konva 组件

  • v-stage：用于场景一个画布，它是Konva应用程序的根容器，所有的图形都是在画布上绘制的。画布定义了Canvas的大小以及应用程序的全局属性。
  • v-layer：用于创建一个图层，它是Konva中用于组织和管理可视元素的容器。通常情况下，每个图形都被添加到一个图层上，然后图层再添加到舞台上。使用图层可以实现对不同部分的图形进行分组和独立管理。
  • v-group：用于创建一个群组，它是Konva中用于将多个形状或群组组合在一起的容器。群组可以包含任意数量的形状、群组或其他Konva节点，并可以一起移动、旋转和缩放。
  • v-shape：用于创建任意形状的图形，比如矩形、圆形、线条等。通过指定不同的type属性，可以创建不同类型的形状。除了预定义的形状外，还可以通过sceneFunc属性自定义绘制函数来创建特定形状的图形。
  • v-rect： 用于在 Konva 画布上绘制矩形，可以通过设置属性来定义矩形的位置、大小、填充颜色、边框颜色、边框宽度等属性。
  • v-text：用于在 Konva 画布上显示文本，并且可以通过设置 属性来定义文本的位置、内容、字体、字体大小、字体颜色等属性。

三、具体实现

回顾一下我们要实现的能力：

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

下面是一个简单的示例，演示如何使用Vue Konva来实现一个多维表格渲染，支持绘制表格数据、填充单元格内容、单元格点击事件：

<template>
  <v-stage :config="stageConfig" @click="handleStageClick">
    <v-layer>
      <!-- 绘制表格 -->
      <v-group>
        <!-- 绘制表头 -->
        <v-rect
          v-for="(column, columnIndex) in columns"
          :key="'header-' + columnIndex"
          :config="getHeaderRectConfig(columnIndex)"
        />
        <v-text
          v-for="(column, columnIndex) in columns"
          :key="'header-text-' + columnIndex"
          :config="getHeaderTextConfig(columnIndex)"
        />
        <!-- 绘制表格内容 -->
        <v-rect
          v-for="(row, rowIndex) in rows"
          :key="'row-' + rowIndex"
          :config="getRowRectConfig(rowIndex)"
          :fill="highlightedCell && highlightedCell.row === rowIndex ? (highlightedCell.column === null ? 'yellow' : 'lightyellow') : (rowIndex % 2 === 0 ? 'lightblue' : 'lightcyan')"
        />
        <v-text
          v-for="(row, rowIndex) in rows"
          :key="'row-text-' + rowIndex"
          :config="getRowTextConfig(rowIndex)"
        />
      </v-group>
    </v-layer>
  </v-stage>
</template>

<script>
import { Vue as VueKonva, Stage, Layer, Group, Rect, Text } from 'vue-konva';

export default {
  components: {
    VueKonva,
    Stage,
    Layer,
    Group,
    Rect,
    Text,
  },
  data() {
    return {
      stageConfig: {
        width: 800,
        height: 600,
      },
      columns: ['Column 1', 'Column 2', 'Column 3'], // 列名
      rows: ['Row 1', 'Row 2', 'Row 3'], // 行名
      cellWidth: 100,
      cellHeight: 50,
      highlightedCell: null, // 记录当前高亮的单元格
    };
  },
  methods: {
    // 处理舞台点击事件
    handleStageClick(event) {
      // 点击事件处理逻辑
      const clickedX = event.evt.offsetX;
      const clickedY = event.evt.offsetY;
      const columnIndex = Math.floor(clickedX / this.cellWidth);
      const rowIndex = Math.floor(clickedY / this.cellHeight);
      this.highlightedCell = { row: rowIndex, column: columnIndex };
    },
    // 获取表头矩形配置
    getHeaderRectConfig(columnIndex) {
      return {
        x: columnIndex * this.cellWidth,
        y: 0,
        width: this.cellWidth,
        height: this.cellHeight,
        fill: 'lightgray',
        stroke: 'black',
        strokeWidth: 1,
      };
    },
    // 获取表头文本配置
    getHeaderTextConfig(columnIndex) {
      return {
        x: columnIndex * this.cellWidth + 5,
        y: 5,
        text: this.columns[columnIndex],
      };
    },
    // 获取行矩形配置
    getRowRectConfig(rowIndex) {
      return {
        x: 0,
        y: rowIndex * this.cellHeight,
        width: this.cellWidth * this.columns.length,
        height: this.cellHeight,
        fill: rowIndex % 2 === 0 ? 'lightblue' : 'lightcyan',
        stroke: 'black',
        strokeWidth: 1,
      };
    },
    // 获取行文本配置
    getRowTextConfig(rowIndex) {
      return {
        x: 5,
        y: rowIndex * this.cellHeight + 5,
        text: this.rows[rowIndex],
      };
    },
  },
};
</script>

<style scoped>
/* Add your styles here */
</style>

在这个示例中，我们使用了Vue Konva的各个组件来绘制多维表格。其中：

  • <v-stage>用于创建舞台。
  • <v-layer>用于创建图层。
  • <v-group>用于组织表格中的各个元素。
  • <v-rect>用于绘制矩形，代表表格的单元格。
  • <v-text>用于绘制文本，显示表格的行名和列名。

这个示例中还包含了一些方法，用于动态计算单元格的位置和尺寸，并根据表格的行数和列数来绘制相应的内容。同时，还提供了一个舞台点击事件的处理方法handleStageClick，你可以在其中添加你需要的点击事件处理逻辑。

你可以根据需要扩展这个示例，实现更复杂的表格功能，比如动态调整列宽等：

<template>
  <v-stage :config="stageConfig" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @mousemove="handleMouseMove">
    <v-layer>
      <!-- 绘制表格 -->
      <v-group>
        <!-- 绘制表头 -->
        <v-rect
          v-for="(column, columnIndex) in columns"
          :key="'header-' + columnIndex"
          :config="getHeaderRectConfig(columnIndex)"
        />
        <v-text
          v-for="(column, columnIndex) in columns"
          :key="'header-text-' + columnIndex"
          :config="getHeaderTextConfig(columnIndex)"
        />
        <!-- 绘制表格内容 -->
        <v-rect
          v-for="(row, rowIndex) in rows"
          :key="'row-' + rowIndex"
          :config="getRowRectConfig(rowIndex)"
        />
        <v-text
          v-for="(row, rowIndex) in rows"
          :key="'row-text-' + rowIndex"
          :config="getRowTextConfig(rowIndex)"
        />
      </v-group>
      <!-- 拖拽调整列宽的辅助线 -->
      <v-line v-if="isResizing" :config="resizerLineConfig"/>
    </v-layer>
  </v-stage>
</template>

<script>
import { Vue as VueKonva, Stage, Layer, Group, Rect, Text, Line } from 'vue-konva';

export default {
  components: {
    VueKonva,
    Stage,
    Layer,
    Group,
    Rect,
    Text,
    Line,
  },
  data() {
    return {
      stageConfig: {
        width: 800,
        height: 600,
      },
      columns: ['Column 1', 'Column 2', 'Column 3'], // 列名
      rows: ['Row 1', 'Row 2', 'Row 3'], // 行名
      cellHeight: 50,
      isResizing: false, // 是否正在调整列宽
      resizeStartX: 0, // 调整列宽的起始坐标
      resizingColumnIndex: -1, // 正在调整宽度的列索引
      columnWidths: [100, 100, 100], // 列宽度数组
    };
  },
  methods: {
    // 处理鼠标按下事件
    handleMouseDown(event) {
      if (event.target.name() === 'resizer') {
        this.isResizing = true;
        this.resizeStartX = event.evt.clientX;
        this.resizingColumnIndex = parseInt(event.target.attrs.columnIndex);
      }
    },
    // 处理鼠标移动事件
    handleMouseMove(event) {
      if (this.isResizing) {
        const movementX = event.evt.clientX - this.resizeStartX;
        const newWidth = Math.max(30, this.columnWidths[this.resizingColumnIndex] + movementX);
        this.$set(this.columnWidths, this.resizingColumnIndex, newWidth);
      }
    },
    // 处理鼠标释放事件
    handleMouseUp() {
      if (this.isResizing) {
        this.isResizing = false;
        this.resizeStartX = 0;
        this.resizingColumnIndex = -1;
      }
    },
    // 获取表头矩形配置
    getHeaderRectConfig(columnIndex) {
      return {
        x: this.getCellX(columnIndex),
        y: 0,
        width: this.columnWidths[columnIndex],
        height: this.cellHeight,
        fill: 'lightgray',
        stroke: 'black',
        strokeWidth: 1,
        name: 'resizer', // 设置名称以便于识别
        draggable: true, // 允许拖拽
        columnIndex: columnIndex, // 保存列索引
      };
    },
    // 获取表头文本配置
    getHeaderTextConfig(columnIndex) {
      return {
        x: this.getCellX(columnIndex) + 5,
        y: 5,
        text: this.columns[columnIndex],
      };
    },
    // 获取行矩形配置
    getRowRectConfig(rowIndex) {
      return {
        x: 0,
        y: rowIndex * this.cellHeight,
        width: this.columnWidths.reduce((acc, cur) => acc + cur, 0),
        height: this.cellHeight,
        stroke: 'black',
        strokeWidth: 1,
      };
    },
    // 获取行文本配置
    getRowTextConfig(rowIndex) {
      return {
        x: 5,
        y: rowIndex * this.cellHeight + 5,
        text: this.rows[rowIndex],
      };
    },
    // 获取单元格的 x 坐标
    getCellX(columnIndex) {
      let x = 0;
      for (let i = 0; i < columnIndex; i++) {
        x += this.columnWidths[i];
      }
      return x;
    },
  },
  computed: {
    // 获取调整列宽时的辅助线配置
    resizerLineConfig() {
      return {
        points: [this.resizeStartX, 0, this.resizeStartX, this.stageConfig.height],
        stroke: 'black',
        strokeWidth: 1,
      };
    },
  },
};
</script>

可以发现我们对于 cell 的宽度将通过一个 columnWidths 来维护，并根据鼠标事件来动态变更当前列每个cell渲染宽度和辅助线的位置。

@PHARAOH
关注
专栏目录
HOW - Canvas 入门系列之表格绘制工具（二）
weixin_58540586的博客
04-10 2240
通过这个系列，我们将学习 canvas 的基本内容，并且通过两个案例实现，即一个表格绘制工具（其支持表格数据渲染），一个画图工具（其支持常见图形绘制，以及撤销和恢复等功能），来掌握基于 canvas 的复杂交互实现。今天我们首先实现一个表格绘制工具。
基于vue+canvas的excel-like组件实例详解
08-28
a vue component，基于vue的表格组件，主要解决大数据量的表格渲染性能问题，使用canvas绘制表格，同时支持类似excel的批量选中，复制黏贴删除，实时编辑等功能.这篇文章主要介绍了基于vue+canvas的excel-like组件,需要的朋友可以参考下
canvas画表格
qq_42430948的博客
02-14 4073
data数据格式： [ {“num”:388,“dfname”:“砼”,“zdmj”:156679.44,“jzmj”:5197303.22}, {“num”:24,“dfname”:“混”,“zdmj”:12888.83,“jzmj”:428493.83} ] drawCanvasTable(data) { let canvas = document.querySelector("#canv"); let ctx = canvas.getContext("2.
Vue Konva 项目教程
最新发布
gitblog_01159的博客
09-03 394
Vue Konva 项目教程 项目地址:https://gitcode.com/gh_mirrors/vu/vue-konva 1、项目的目录结构及介绍 Vue Konva 项目的目录结构如下： vue-konva/ ├── src/ │ ├── components/ │ │ ├── VLayer.vue │ │ ├── VStage.vue │ │ └── ... ...
vue-konva：Vue和Canvas-JavaScript库，用于使用Vue绘制复杂的画布图形
02-06
Vue Konva Vue Konva是一个JavaScript库，用于使用Vue绘制复杂的画布图形。 它提供了声明性和React性绑定。 所有vue-konva组件都对应于具有前缀“ v-”的同名Konva组件。 可用于Konva对象的所有参数都可以在config中作为对应的vue-konva组件的config添加。 核心形状包括： v-rect ， v-circle ， v-ellipse ， v-line ， v-image ， v-text ， v-text-path ， v-star ， v-label ， v-path ， v-regular-polygon 。 您
canvas绘制表格
shiyzhang
08-01 550
最近在为公司产品做技术预研，经理让用canvas做一个表格，于是就有了这篇博客。在这里为了方便实用我直接封装成组件了，当MQTT数据来了就出发绘制方法。我们的数据是后端通过MQTT推送过来的。具体MQTT的实现代码，可见博客。我在代码中也直接使用了。
canvas——绘制表格
sleepwalker_1992的专栏
06-04 9993
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制表格</title> </head> <body> <div id="container"> <ca...
vue2-canvas-gauges:Vue2帆布尺
05-12
$ yarn add vue2-canvas-gauges --save 例子 < linear xss=removed xss=removed></ linear> < script > import LinearGauge from ' vue-canvas-gauges/src/LinearGauge ' import RadialGauge from ' vue-...
轻量级在线表格（canvas ) 组件.zip
10-11
轻量级在线表格（canvas ) 组件.zip,A web-based JavaScript（canvas） spreadsheet
vuedatagrid利用Vuejs实现复杂可交互表格的一个例子
08-10
vue-data-grid：利用Vue.js实现复杂可交互表格的一个例子
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
10-16
主要介绍了Vue+elementui 实现复杂表头和动态增加列的二维表格功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-konva-demo2
11-22
安装完成后，我们可以在Vue组件中导入Konva，并创建一个`<canvas>`元素。Vue允许我们在模板中直接使用Konva组件，例如： ```html <canvas id="konva-canvas"></canvas> ``` 接下来，我们在`script`部分引入...
Vue Konva - 基于 Canvas 开发的 2d JavaScript框架库 - 简单使用整理
热门推荐
Amy的博客
08-25 2万+
最近项目中用到Vue Konva框架，遇到一些问题基本搜不到，网上的文章基本都是些入门教程什么的。所以本文整理了使用过程中遇到的问题以及解决办法，希望你用到的时候有所帮助。 基本是按照我在开发中使用的顺序来写的，使用方法和错误处理没有做单独区分。如有需要可以搜索关键字。 2018.8.25 需求：类似美图秀秀网页版的拼图工具。但是美图秀秀用的是 Flash，我们用 canvas，所以能参...
基于Vue开源的高效复杂表格解决方案——「vxe-table」
代码讲故事
07-05 8275
背景 在目前大多数情况下，越来越多拥有开发团队的公司使用Vue作为他们的前端开发框架，我们不得不承认Vue这种模式在很多地方是优于传统项目的，但是相信很多人会和笔者一样，在使用过程中，事物总不是想象中那么美好，其中有一项就和今天的主角有关，在组件方面，以往jQuery的方式存在大量的第三方组件，能应对很多复杂的业务场景，就比如表格组件。虽然普通的表格能满足普通的开发需求，但是遇到复杂的就会显得捉襟见肘，遇到一个开源的在Vue中相当好用的一个表格组件——vxe-table！ 开源仓库（MIT） 一个基于 v
CSS实现间距相同 首尾无边距处理
weixin_40629549的博客
07-16 944
CSS实现间距相同 首尾无边距处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
飞书多维表格应用实例
08-08
飞书是一款由字节跳动开发的企业协作工具，其多维表格功能允许用户创建复杂的数据结构，支持高效的数据管理和分析。以下是一些飞书多维表格的应用实例： 1. **项目管理**：可以创建一个包含任务、成员、截止日期等信息的多维表格，方便团队成员跟踪项目的进度和责任分工。 2. **销售报表**：销售人员可以用多维表格记录客户数据，如销售额、产品分类、地区分布等，便于生成实时的销售报告和数据分析。 3. **人力资源**：HR部门可以利用多维表格管理员工信息，包括职位、薪资、绩效考核等维度，简化人事管理工作。 4. **财务预算**：企业可以通过多维表格设置预算分配、实际支出和对比分析，实现精细化财务管理。 5. **市场调研**：收集并整理消费者偏好、竞品对比等信息，通过多维透视分析来洞察市场趋势。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值