跳到主要内容

网格辅助线

Ydesign 内置了智能参考线与吸附，能在元素拖拽时自动吸附到其他元素的边缘与中心。但有时你想要一个始终可见的网格作为对齐基准（比如专业的排版场景、印刷物料的栅格系统）。

本文介绍如何在 Ydesign 画布上渲染一层网格。

思路：用一张 SVG 图片做网格​

最简单的做法是生成一张和画布等大的 SVG 网格图，作为最底层的不可选元素加到画布上：

function generateGridSvg(width: number, height: number, gridSize = 40) {
  const lines: string[] = [];
  for (let x = 0; x <= width; x += gridSize) {
    lines.push(`<line x1="${x}" y1="0" x2="${x}" y2="${height}" stroke="#e0e0e0" stroke-width="1"/>`);
  }
  for (let y = 0; y <= height; y += gridSize) {
    lines.push(`<line x1="0" y1="${y}" x2="${width}" y2="${y}" stroke="#e0e0e0" stroke-width="1"/>`);
  }
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
    ${lines.join('\n')}
  </svg>`;
}

把 SVG 转成 dataURL 后作为图片元素插入：

import { svgToURL } from '@ydesign/react-editor/utils/svg';

const gridSvg = generateGridSvg(store.width, store.height, 40);

store.addElement({
  type: 'Image',
  id: 'grid-overlay',           // 固定 id，方便之后找到并删除
  src: svgToURL(gridSvg),
  left: 0,
  top: 0,
  width: store.width,
  height: store.height,
  selectable: false,             // 不可选中
  evented: false,                // 不响应事件（点击穿透）
  lockMovementX: true,
  lockMovementY: true,
});

// 放到最底层
store.moveElementsBottom(['grid-overlay']);

切换显示 / 隐藏​

function toggleGrid() {
  const grid = store.getElementById('grid-overlay');
  if (grid) {
    // 已有网格 → 删除
    store.editor?.objectsHandler.removeById('grid-overlay');
  } else {
    // 没有 → 添加（同上面的代码）
  }
}

扩展思路​

  • 吸附到网格：在 object:moving 事件里把元素的 left / top 对齐到网格倍数
  • 动态调整格宽：用 <Slider /> 控制 gridSize，每次变化重新生成 SVG
  • 导出时忽略网格：在 store.toDataURL 的 filter 选项里跳过 id === 'grid-overlay'：
await store.toDataURL({
  multiplier: 2,
  filter: (obj: any) => obj.id !== 'grid-overlay',
});

相关文档​