使用Konva.js选中画布图形后如何将选中图形类型保存到MySQL数据库

1. Konva.js前端侧：获取选中图形的自定义标识 #

绘制图形时给每个Konva实例添加自定义属性存储你需要的图形类型标识（如square1、rectangle2），再监听选中事件拿到对应标识后传给后端。
示例代码：

// 初始化舞台与层
const stage = new Konva.Stage({ container: 'container', width: 600, height: 400 });
const layer = new Konva.Layer();
stage.add(layer);

// 绘制图形时添加自定义shapeType属性存标识
const square = new Konva.Rect({
  x: 50, y: 50, width: 80, height: 80, fill: 'blue',
  shapeType: 'square1' // 自定义属性，存储你要保存的图形类型
});
layer.add(square);

// 监听选中事件（点击触发为例，也可适配Konva.Transformer的选中逻辑）
stage.on('click', (e) => {
  // 点击画布空白区域不处理
  if (e.target === stage) return;
  // 取选中图形的自定义标识
  const selectedType = e.target.attrs.shapeType;
  // 调用接口传给后端
  fetch('/save-shape-type', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ shape_type: selectedType })
  });
});

如果是用Konva.Transformer做批量选中，可通过transformer.nodes()拿到所有选中的图形实例，遍历取出所有shapeType后传给后端即可。

2. 后端接口：接收参数并做合法性校验 #

你可以用任意后端技术栈实现，以下以Node.js+Express为例：

const express = require('express');
const app = express();
// 解析json格式的请求参数
app.use(express.json());

// 图形类型保存接口
app.post('/save-shape-type', async (req, res) => {
  const { shape_type } = req.body;
  // 参数校验：非空、格式符合要求
  if (!shape_type || typeof shape_type !== 'string' || shape_type.length > 50) {
    return res.status(400).json({ code: 400, msg: '参数非法' });
  }
  // 调用数据库插入方法
  const saveResult = await saveToMysql(shape_type);
  res.json(saveResult);
});

app.listen(3000, () => console.log('服务启动在3000端口'));

3. MySQL侧：建表与数据写入 #

首先创建存储选中图形类型的表，SQL示例：

CREATE TABLE selected_shapes (
  id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '主键自增ID',
  shape_type VARCHAR(50) NOT NULL COMMENT '选中的图形类型标识',
  create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '选中时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='选中图形记录表';

如果需要关联用户、画布ID等其他维度，直接在表中新增对应字段即可。

后端对接MySQL的写入示例（以Node.js的mysql2依赖为例）：

const mysql = require('mysql2/promise');
// 初始化数据库连接池
const pool = mysql.createPool({
  host: '数据库Host地址',
  user: '数据库用户名',
  password: '数据库密码',
  database: '你的业务库名'
});

// 数据写入方法
async function saveToMysql(shapeType) {
  const [result] = await pool.execute(
    'INSERT INTO selected_shapes (shape_type) VALUES (?)',
    [shapeType]
  );
  return { code: 200, msg: '保存成功', insertId: result.insertId };
}

注意事项 #

• 批量选中多个图形时，可将所有选中的图形类型拼成数组传给后端，用批量插入SQL写入数据库减少连接开销
• 生产环境需要给接口添加鉴权逻辑，避免未授权请求恶意写入数据
• 建议后端新增图形类型枚举校验，只有预设的合法标识才允许写入，避免脏数据入库

内容的提问来源于stack exchange，提问作者MariLuz Ramírez