前端使用 Konva 实现可视化设计器（1）- 无限画布、比例尺

@xachary

已于 2024-05-11 22:47:30 修改

阅读量1.4k

点赞数 12

分类专栏：前端使用 Konva 实现可视化设计器文章标签：前端

于 2024-04-04 22:35:32 首次发布

本文链接：https://blog.youkuaiyun.com/xachary2/article/details/137384571

版权

本文介绍了如何使用Konva库在网页上构建一个可交互的设计器，包括创建画布、网格背景、比例尺，以及实现拖拽和缩放功能。代码展示了如何设置舞台大小、添加图层，并通过实例展示了网格和比例尺的绘制方法以及鼠标右键拖动和缩放的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 konva 实现一个设计器交互，首先考虑实现设计器的画布。

一个基本的画布：

【展示】网格、比例尺

【交互】拖拽、缩放

“拖拽”是无尽的，“缩放”是基于鼠标焦点的。

最终效果（示例地址）：

在这里插入图片描述

基本思路：

设计区域 HTML 由两个节点构成，内层挂载一个 Konva.stage 作为画布的开始。

<template>
  <div class="page">
    <header></header>
    <section>
      <header></header>
      <section ref="boardElement">
        <div ref="stageElement"></div>
      </section>
      <footer></footer>
    </section>
    <footer></footer>
  </div>
</template>

在这里插入图片描述
Konva.stage 暂时先设计3个 Konva.Layer，分别用于绘制背景、所有素材、比例尺。

通过 ResizeObserver 使 Konva.stage 的大小与外层 boardElement 保持一致。

为了显示“比例尺” Konva.stage 默认会偏移一些距离，这里定义“比例尺”尺寸为 40px。

    this.stage = new Konva.Stage({
   
      container: stageEle,
      x: this.rulerSize,
      y: this.rulerSize,
      width: config.width,
      height: config.height
    })

关于“网格背景”，是按照当前设计区域大小、缩放大小、偏移量，计算横向、纵向分别需要绘制多少条 Konva.Line（横向、纵向分别多加1条），同时根据 Konva.stage 的 x,y 进行偏移，用有限的 Konva.Line 模拟无限的网格画布。

      // 格子大小
      const cellSize = this

最低0.47元/天解锁文章